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

如何解决Webpack错误-configuration.node具有未知属性'fs'

使用最新版本的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?,global? }
      -> Options object for node compatibility features.
    * configuration.node has an unkNown property 'net'. These properties are valid:
      object { __dirname?,global? }
      -> Options object for node compatibility features.
    * configuration.node has an unkNown property 'fs'. These properties are valid:
      object { __dirname?,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这样的全局对象，并且如果为空，则假定它在浏览器环境中。根据{{3}}和documentation of Antlr4，这是受支持的配置文件。但这是行不通的。请帮忙。

版本

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的新配置进行了更新

解决方法

在Webpack团队的帮助下，我设法使它起作用。不再支持使用antlr4文档建议的以下webpack配置。

不起作用

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

工作配置

resolve: {
  fallback: {
    fs: false
  }
}

有了这个，我得以使我的JavaScript解析器正常工作。

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

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

在任何使用普通自定义配置的 config/webpack/*.js 中（更多信息请参见 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

Next.js 用户：

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

Source

足够有趣的是，我得到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

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

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