使用汇总编译 React 组件会返回 webpack 错误

我正在尝试通过 Rollup 编译一个 React jsx 组件.js以在 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(),
],
};

在汇总编译中，我没有收到任何错误，但只有此警告

(！循环依赖 node_modules/@rjsf/core/dist/es/utils.js -> node_modules/@rjsf/core/dist/es/components/fields/index.js -> node_modules/@rjsf/core/dist/es/components/fields/ArrayField.js -> node_modules/@rjsf/core/dist/es/utils.js node_modules/@rjsf/core/dist/es/utils.js -> node_modules/@rjsf/core/dist/es/components/fields/index.js -> node_modules/@rjsf/core/dist/es/components/fields/BooleanField.js -> node_modules/@rjsf/core/dist/es/utils.js node_modules/@rjsf/core/dist/es/utils.js -> node_modules/@rjsf/core/dist/es/components/fields/index.js -> node_modules/@rjsf/core/dist/es/components/fields/MultiSchemaField.js -> node_modules/@rjsf/core/dist/es/utils.js ...还有 19 个

但是当我想将我的组件导入另一个应用程序时，我遇到了有关 webpack 的错误，但它来自哪里？

编译有问题：X
./node_modules/@xxx/xxx/xxx 中的错误.js 1：0-32
找不到模块：错误：无法解析中的"http" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "http"： require.resolve("stream-http") }'
安装 'stream-http' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示： resolve.fallback： { "http"： false }
./node_modules/@xxx/xxx/xxx 中的错误.js 2：0-33
找不到模块：错误：无法解析中的"https" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "https"： require.Resolve("https-browserify") }'
安装 'https-browserify' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示：resolve.fallback： { "https"：假 }
./node_modules/@xxx/xxx/xxx.js 3：0-31 中的错误
找不到模块：错误：无法解析中的"url" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "URL"： require.Resolve("URL/") }'
安装 'url
' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示： resolve.fallback： { "url"： false }
./node_modules/@xxx/xxx/xxx 中的错误.js 4：0-34
找不到模块：错误：无法解析中的"流" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "Stream"： require.Resolve("Stream-browserify") }'
安装 'stream-browserify' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示：resolve.fallback： { "流"：假 }
./node_modules/@xxx/xxx/xxx 中的错误.js 5：0-32
找不到模块：错误：无法解析中的"断言" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "assert"： require.resolve("assert/") }'
安装 'assert
' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示： resolve.fallback： { "assert"： false }
./node_modules/@xxx/xxx/xxx 中的错误.js 6：0-30
找不到模块：错误：无法解析中的"zlib" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "zlib"： require.resolve("browserify-zlib") }'
安装 'browserify-zlib' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示： resolve.fallback： { "zlib"：假 }
./node_modules/@xxx/xxx/xxx 中的错误.js 7：0-28
找不到模块：错误：无法解析中的"加密" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "crypto"： require.Resolve("crypto-browserify") }'
安装"crypto-browserify" 如果你不想包含polyfill，你可以使用一个空模块，如下所示：resolve.fallback：{ "加密"：假 }
./node_modules/@xxx/xxx/xxx 中的错误.js 8：0-30
找不到模块：错误：无法解析中的"fs" 'C：\dev\Test\my-appode_modules@xxx\xxx'
./node_modules/@xxx/xxx/xxx 中的错误.js 9：0-32
找不到模块：错误：无法解析中的"路径" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "path"： require.resolve("path-browserify") }'
安装 'path-browserify' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示： resolve.fallback： { "path"：假 }
./node_modules/@xxx/xxx/xxx 中的错误.js 10：0-34

找不到模块：错误：无法解析中的"模块" 'C：\dev\Test\my-appode_modules@xxx\xxx'
./node_modules/@xxx/xxx/xxx 中的错误.js 12：0-34
找不到模块：错误：无法解析中的"缓冲区" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "buffer"： require.Resolve("buffer/") }'
安装 'buffer
' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示： resolve.fallback： { "buffer"： false }
./node_modules/@xxx/xxx/xxx 中的错误.js 13：0-32
找不到模块：错误：无法解析中的"util" 'C：\dev\Test\my-appode_modules@xxx\xxx'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "util"： require.resolve("util/") }'
安装 'util
' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示： resolve.fallback： { "util"： false }
./node_modules/@xxx/xxx/xxx 中的错误.js 123470：44-83
找不到模块：错误：无法解析"../include/module.js' in 'C：\dev\Test\my-appode_modules@xxx\xxx'
./node_modules/@xxx/xxx/xxx 中的错误.js 123471：44-83
找不到模块：错误：无法解析"../include/action.js' in 'C：\dev\Test\my-appode_modules@xxx\xxx'
./node_modules/@xxx/xxx/xxx 中的错误.js 162102：17-48
找不到模块：错误：无法解析"ajv-i18n/localize/fr" 'C：\dev\Test\my-appode_modules@xxx\xxx'
错误在 ./node_modules/string_decoder/node_modules/safe-buffer/index.js 4：13-30
找不到模块：错误：无法解析中的"缓冲区" 'C：\dev\Test\my-appode_modules\string_decoderode_modules\safe-buffer'
中断性变更：webpack <5 用于包含节点的 polyfill.js 默认为核心模块。情况已不再如此。验证您是否需要此模块并为其配置填充代码。
如果要包含填充代码，则需要：
添加回退 'Resolve.Fallback： { "buffer"： require.Resolve("buffer/") }'
安装 'buffer
' 如果你不想包含 polyfill，你可以使用一个空模块，如下所示： resolve.fallback： { "buffer"： false }

我能够通过向rollup.config添加resolve: ({ browser : true })来解决此问题.js我看到您已经添加了。

另一个对我有用的解决方案是使用： 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()
],
...
};

这将包括捆绑包中的这些"缺失"库。

尝试替换导入的@rollup/节点插件解析从：

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

自：

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

并在插件中替换它：

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

它对我有用。

相关内容

最新更新

热门标签：