logo标签列表

Webpack 5 变更： "process/browser"

node.jsreactjswebpack-5
7

错误截图: 无法解析 'process/browser': 错误截图: 无法解析 'process/browser'

我希望有人能帮我解决问题。由于Webpack 5的变化，我使用react-rewired在config-overrides.js中添加了回退，以处理polyfills。我已经安装了所有可以安装的依赖项，但仍然收到“process/browser”的错误提示。我不知道如何识别问题所在。

const webpack = require("webpack");


module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
    zlib: require.resolve("browserify-zlib"),
    fs: require.resolve("browserify-fs"),
    process: require.resolve("process"),
    buffer: require.resolve("buffer"),
    net: require.resolve("net"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};
2个回答
7
0

我有一个可行的解决方案，可以升级类似的问题，并包括以下代码行：config.override.js：

let plugs = config.plugins;

plugs.push(new webpack.ProvidePlugin({
    Buffer: ['buffer', 'Buffer'],
}));
plugs.push(new webpack.ProvidePlugin({
    process: 'process/browser.js'
}))

这里为每个插件调用new webpack.ProvidePlugin(...，而不是尝试在一个构造函数中创建两个。你上面的代码可能会被改写成以下类似的形式：

config.plugins = (config.plugins || []).concat([
  new webpack.ProvidePlugin({
    process: "process/browser",
  }),
  new webpack.ProvidePlugin({
    Buffer: ["buffer", "Buffer"],
  })
]);

...虽然我还没有确切尝试过这个。

谢谢您的回复。我尝试了您的解决方案，但似乎我无法从使用react app rewired构建中捕获依赖项。我手动将我的回退放入node_modules/react-scripts/config/webpack.config.js中。像这样resolve: { `fallback: { "crypto": require.resolve("crypto-browserify"), "http": require.resolve("stream-http"), "fs": require.resolve("browserify-fs"), "assert": require.resolve("assert"), "os": require.resolve("os-browserify"), "async_hooks": false, "express": false, },}` - euføeni
现在我遇到了这个错误：“警告：./node_modules/express/lib/view.js 74:13-25 关键依赖项：依赖项的请求是一个表达式。” - euføeni
如果您正在遵循React App Rewired文档，就无需直接更改Webpack配置 - 使用override配置即可。 - arfi720
这就是我想的，但无论如何我仍然得到相同的错误。 - euføeni
当我部署所有这些NPM包时，Heroku可能会讨厌我，但是我通过在nodemodules/react-scripts/config/webpack.config.js中添加以下行来解决了问题：externals: [{ 'express': { commonjs: 'express' } }] - euføeni
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接