使用 Rollup.JS 和 Formik 的外部库不尊重命名导出

Question

我正在使用 Rollup 来组合一个共享的表单组件库，它使用 Formik 作为基础层。我目前收到以下 'scheduler' 的编译错误，这是 Formik 在幕后使用的。

我已经尝试将其作为单独的 npm 依赖项手动安装，但仍然出现以下错误。

[!] Error: 'unstable_runWithPriority' is not exported by node_modules/formik/node_modules/scheduler/index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/formik/dist/formik.esm.js (9:9)
 7: import toPath from 'lodash-es/toPath';
 8: import invariant from 'tiny-warning';
 9: import { unstable_runWithPriority, LowPriority } from 'scheduler';

遵循汇总文档：我尝试使用 rollup.config.js 的命名导出部分，例如：

plugins: [


    peerDepsExternal(),
    postcss({ extract: true, plugins: [autoprefixer] }),
    json({  include: 'node_modules/**' }),
    babel({ exclude: 'node_modules/**', presets: ['@babel/env', '@babel/preset-react'] }),
    localResolve(),
    resolve({dedupe: [ 'react', 'react-dom' ]}),
    commonjs({
      namedExports: {
        // left-hand side can be an absolute path, a path
        // relative to the current directory, or the name
        // of a module in node_modules
        'node_modules/formik/node_modules/scheduler/index.js': ['unstable_runWithPriority'],
        'scheduler': ['unstable_runWithPriority'],
        'node_modules/scheduler': ['unstable_runWithPriority'],
        './node_modules/scheduler': ['unstable_runWithPriority'],
        '../node_modules/formik/node_modules/scheduler/index.js': ['unstable_runWithPriority']
      }
    }),
    globals(),
    externals(),
    builtins(),
    filesize()

  ]

如您所见，我已经尝试了一些目的地/路径以取得良好效果。谁能指出我如何重新编译的正确方向？或者如何正确定义我的命名导出？我在网络上阅读了一些问题，这些问题表明插件数组的顺序可能会影响事情，但我将它们交换了一下，但我仍然不知所措。

Answer 1

您可能认为地球上没有人会犯同样的隐秘错误。你会错的。找到了解决方案。（与插件顺序有关）

plugins: [
    globals(),
    builtins(),
    externals(),
    babel({ exclude: 'node_modules/**', presets: ['@babel/env', '@babel/preset-react'] }),
    commonjs({
      namedExports: {
        // left-hand side can be an absolute path, a path
        // relative to the current directory, or the name
        // of a module in node_modules
        'node_modules/formik/node_modules/scheduler/index.js' : ['unstable_runWithPriority'],
      }
    }),
    peerDepsExternal(),
    postcss({ extract: true, plugins: [autoprefixer] }),
    json({  include: 'node_modules/**' }),
    localResolve(),
    resolve({dedupe: [ 'react', 'react-dom' ]}),
    filesize()

  ]

Answer 2

这个插件顺序帮我解决了这个问题。

plugins: [
    babel({
      exclude: 'node_modules/**',
      presets: ['@babel/env', '@babel/preset-react'],
    }),
    typescript({ useTsconfigDeclarationDir: true }),
    commonjs({
      namedExports: {
        // left-hand side can be an absolute path, a path
        // relative to the current directory, or the name
        // of a module in node_modules
        'node_modules/formik/node_modules/scheduler/index.js': [
          'unstable_runWithPriority',
        ],
      },
    }),
    peerDepsExternal(),
    scss(),
    json({
      compact: true,
    }),
    resolve(),
  ],

Answer 3

使用这个语法：

      namedExports: {
        'scheduler': ['unstable_runWithPriority', 'unstable_LowPriority']
      }

使用 Rollup.JS 和 Formik 的外部库不尊重命名导出

External Library using Rollup.JS with Formik doesn't respect named exports

reactjs

rollupjs

formik