编译带有汇总的React组件时返回Webpack错误

htzpubme  于 2022-11-13  发布在  Webpack
关注(0)|答案(2)|浏览(169)

我正在尝试通过Rollup.js编译React jsx组件,以填充commonjs中的组件库。
这是我的汇总配置

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
import json from '@rollup/plugin-json';

export default {
  input: ['./src/xxx.jsx'],
  output: [
    {
      dir: './public/build/lib/xxx/commonjs/',
      format: 'esm',
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve({
      browser: true,
      preferBuiltins: false,
      extensions: ['.mjs', '.js', '.json', '.node', '.jsx', '.ts', '.tsx'],
    }),
    babel({
      exclude: './node_modules/**',
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: ['@babel/plugin-transform-runtime'],
      babelHelpers: 'runtime',
    }),
    commonjs(),
    postcss({
      extensions: ['.css'],
    }),
    image(),
    json(),
  ],
};

在汇总编译时,我没有得到任何错误,只有这个警告
(!)循环依赖节点模块/@rjsf/core/dist/es/utils.js -〉节点模块/@rjsf/core/dist/es/组件/字段/索引.js -〉节点模块/@rjsf/core/dist/es/组件/字段/数组字段.js -〉节点模块/@rjsf/core/dist/es/utils.js节点模块/@ rjsf/core/dist/es/utils.js -〉节点模块/@ rjsf/core/dist/es/组件/字段/索引.js -〉节点模块/@rjsf/core/dist/es/组件/js-〉节点模块/@rjsf/core/dist/es/utils.js-〉节点模块/@rjsf/core/dist/es/utils. js -〉节点模块/@ rjsf/core/dist/es/components/fields/index.js -〉节点模块/@ rjsf/core/dist/es/components/fields/多架构字段.js -〉节点模块/@rjsf/core/dist/es/utils.js以及其他19个节点模块
但当我想导入我的组件到另一个应用程序,我有这些错误有关webpack,但从哪里来的?
编译时出现问题:X
在./节点模块/@xxx/xxx/xxx.js中出现错误1:0-32
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“http”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“http”:需要.resolve(“流-http”)}'
  • install 'stream-http'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“http”:错误}

在./节点模块/@xxx/xxx/xxx.js 2中出现错误:0-33
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“https”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“https”:需要.resolve(“https-浏览器化”)}'
  • install 'https-browserify'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“https”:错误}

在./节点模块/@xxx/xxx/xxx.js 3中出现错误:0-31
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“url”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“url”:需要.resolve(“url/”)}'
  • install 'url'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“url”:错误}

在./节点模块/@xxx/xxx/xxx.js 4中出现错误:0-34
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“流”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“流”:必需。resolve(“流浏览器化”)}'
  • install 'stream-browserify'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“流”:错误}

在./节点模块/@xxx/xxx/xxx中出现错误.js 5:0-32
找不到模块:错误:无法解析'C:\dev\Test\my-app\node_modules@xxx\xxx'中的'assert'
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“Assert”:必需。resolve(“assert/”)}'
  • install 'assert'如果你不想包含polyfill,你可以像这样使用一个空模块:resolve.fallback:{“Assert”:错误}

在./节点模块/@xxx/xxx/xxx中出现错误.js 6:0-30
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“zlib”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“zlib”:需要.resolve(“浏览器-zlib”)}'
  • install 'browserify-zlib'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“zlib”:错误}

在./节点模块/@xxx/xxx/xxx中出现错误.js 7:0-28
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“加密”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“加密”:必需。resolve(“加密浏览器化”)}'
  • install 'crypto-browserify'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“加密”:错误}

在./节点模块/@xxx/xxx/xxx中出现错误.js 8:0-30
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“fs”
在./节点模块/@xxx/xxx/xxx中出现错误.js 9:0-32
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“路径”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“路径”:需要。resolve(“路径-浏览器化”)}'
  • install 'path-browserify'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“路径”:假}

在./节点模块/@xxx/xxx/xxx中出现错误.js 10:0-34
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“模块”
在./节点模块/@xxx/xxx/xxx中出现错误.js 12:0-34
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“缓冲区”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“缓冲区”:必需。resolve(“buffer/”)}'
  • install 'buffer'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“缓冲区”:错误}

在./节点模块/@xxx/xxx/xxx中出现错误.js 13:0-32
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的“实用程序”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“util”:需要.resolve(“util/”)}'
  • install 'util'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“实用程序”:假}

在./节点_模块/@xxx/xxx/xxx中出现错误。js 123470:44-83
找不到模块:错误:无法解析'C:\dev\Test\my-app\node_modules@xxx\xxx'中的'../include/module.js'
在./节点_模块/@xxx/xxx/xxx中出现错误。
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules@xxx\xxx”中的../include/action.js
在./节点_模块/@xxx/xxx/xxx中出现错误。js 162102:17-48
找不到模块:错误:无法解析'C:\dev\Test\my-app\node_modules@xxx\xxx'中的'ajv-i18 n/localize/fr'
错误在./节点_模块/字符串_解码器/节点_模块/安全缓冲区/index. js 4:13-30
找不到模块:错误:无法解析“C:\dev\Test\my-app\node_modules\string_decoder\node_modules\安全缓冲区”中的“缓冲区”
突破性变化:webpack〈5用于默认包含node.js核心模块的polyfill。现在不再是这样了。请验证您是否需要此模块并为它配置polyfill。
如果要包括多边形填充,则需要:

  • 添加回退'resolve。回退:{“缓冲区”:必需。resolve(“buffer/”)}'
  • install 'buffer'如果你不想包含polyfill,你可以使用一个空的模块,如下所示:resolve.fallback:{“缓冲区”:错误}
koaltpgm

koaltpgm1#

我可以通过将resolve: ({ browser : true })添加到rollup.config.js中来修复这个问题,我看到您已经添加了resolve: ({ browser : true })
另一个对我有效的解决方案是用途:https://github.com/FredKSchott/rollup-plugin-polyfill-node
要使用此插件,请按如下方式修改rollup.config.js

import nodePolyfills from 'rollup-plugin-polyfill-node';

...

export default {

  ...

  resolve: ({ 
    preferBuiltins: false 
  }),

  ...

  plugins: [
    nodePolyfills()
  ],

  ...

};

这将在您的软件包中包含这些“缺失”的库。

n53p2ov0

n53p2ov02#

尝试替换从以下位置导入的@rollup/node-plugin-resolve:

import resolve from '@rollup/plugin-node-resolve';

收件人:

import {nodeResolve} from '@rollup/plugin-node-resolve';

并将其替换为插件:

nodeResolve({
  extensions: [".js", ".jsx"],
}),

对我很有效。

相关问题