Webpack 错误 - configuration.node 具有未知属性“fs”

Question

我在使用最新版本的 Webpack (5.1.0) 时遇到错误。看起来配置正在引发错误，因为验证模式过于严格。这是我的 webpack 配置文件，以及我看到的错误消息。

Webpack.config.js

https://gist.github.com/adarshbhat/3ec5950b66b78102da0cf46e51a3d633

错误

[webpack-cli] 
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration.node has an unknown property 'module'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    * configuration.node has an unknown property 'net'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    * configuration.node has an unknown property 'fs'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! jstest@1.0.0 start: `webpack serve`
npm ERR! Exit status 2

我正在尝试使用可在 Node.js 环境和浏览器中运行的解析器生成器库 (antlr4)。看起来库代码需要像 fs 这样的全局对象，如果它是空的，则假定它在浏览器环境中。根据 documentation of Antlr4 和 that of Webpack ，这是一个受支持的配置文件。但它不起作用。请帮忙。

版本

• webpack：5.1.0
• webpack-cli: 4.0.0
• webpack-dev-middleware: 3.7.2
• webpack-dev-server: 3.11.0

更新（2020 年 10 月 29 日）

Antlr JavaScript 文档现已更新为 Webpack 5 的新配置

Answer 1

在 Webpack 团队的帮助下，我成功地完成了这项工作。不再支持使用 antlr4 文档推荐的以下 webpack 配置。

不起作用

{
  node: {
    fs: 'empty',
    module: 'empty',
    net: 'empty'
  }
}

工作配置

{
  resolve: {
    fallback: {
      fs: false
    }
  }
}

有了这个，我的 JavaScript 解析器就可以工作了。

请注意，我们正在努力更新 antlr4 以生成基于 ES6 的代码。将来可能不需要此配置。

Answer 2

有趣的是，如果是path（但不是file），我会收到以下消息，更清楚的是webpack CLI：

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }

但在我看来，这个信息也应该在这里找到，并删除了任何内置模块都可以用作属性的声明：https://webpack.js.org/configuration/node/#node

Answer 3

正好适用于rails webpacker，如果你正在使用它，解决方案应该是：

在任何使用普通自定义配置的 config/webpack/*.j​​s 中（请参阅https://github.com/rails/webpacker#webpack-configuration 了解更多信息），只需添加解析和删除节点属性的代码。

const { environment } = require('@rails/webpacker')

const customConfig = {
  resolve: {
    fallback: {
      dgram: false,
      fs: false,
      net: false,
      tls: false,
      child_process: false
    }
  }
};

environment.config.delete('node.dgram')
environment.config.delete('node.fs')
environment.config.delete('node.net')
environment.config.delete('node.tls')
environment.config.delete('node.child_process')

environment.config.merge(customConfig);

module.exports = environment

Answer 4

如果有人在 Next JS 中遇到此错误，我通过禁用默认设置的 webpack 5 找到了解决方案。

在 next.config.js 中通过webpack5: false 禁用它

Answer 5

Next.js 用户：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
}

Source

Answer 6

我在使用 Next js 时遇到了同样的问题，我搜索了不同的解决方案，例如 webpack5: false 或 fs: false，但这对我不起作用。

config.node = {
  // fs: 'empty'
  global: true,
  __filename: true,
  __dirname: true,
}

这确实对我有用，因为在 webpack 3.0.0 中，node 选项可能设置为 false 以完全关闭 NodeStuffPlugin，因为我们在 JS 中工作，特别是在需要 Node-JS 的 Next-JS 中，所以我们不必完全关闭它，因为当 'false' 时，Webpack 不会触及你的 '__filename' 代码和你的 '__dirname' 代码。

任何更正或指导将不胜感激，谢谢