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

Posted 2023-03-07

【中文标题】Webpack 错误 - configuration.node 具有未知属性“fs”

【英文标题】：Webpack Error - configuration.node has an unknown property 'fs'

【发布时间】：2021-01-29 08:51:42

【问题描述】：

我在使用最新版本的 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 的新配置

【问题讨论】：

看起来您正在尝试在浏览器中使用 fs 和 net 模块，这是不可能的

你是对的——图书馆正在尝试require这些模块。如果它接收到一个空对象，那么它假定它在浏览器环境中。这就是该库能够在 Node.js 环境和浏览器环境中运行的方式。看起来其他人已经能够让它在旧版本的 Webpack 中工作。

更好的解决方案是检查window 或document 是否被定义：if (typeof window !== 'undefined') ... 如果没有，那么你在node.js 中

同意这不是最好的行为。不过，这不是我能控制的。此行为已在 antlr4 库包中实现。我只是试图使用它的可怜的家伙。如果这是受支持的配置，我希望 Webpack 能解决这个问题。

【参考方案1】：

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

不起作用

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

工作配置

  resolve: 
    fallback: 
      fs: false
    
  

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

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

【讨论】：

这是一个具有潜在影响的巨大问题，文档中也没有关于此的消息，也没有 v4 到 v5 迁移文档...webpack.js.org/configuration/node/#node

请注意，这里的示例中的 false 而不是 "empty" 也曾用于 v4

@tchakabam 我正在尝试提交 PR 以更新文档。您能否确认记录的配置在 Webpack 4 中也不起作用？

否定的，事实上它确实适用于 Webpack 4。这个问题在我们迁移到 v5 时出现。

尝试将 webpack 5 与 Next.js v10.2 一起使用时出现同样的问题，类似的配置曾经在 webpack 4 上工作。

【参考方案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

【参考方案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

【参考方案4】：

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

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

【讨论】：

将默认值改为非 webpack5 有什么副作用吗？

【参考方案5】：

Next.js 用户：

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

Source

【参考方案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' 代码。

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

【讨论】：

非常感谢！ ``` [webpack-cli] 配置对象无效。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 - configuration.node 具有未知属性“fs”。这些属性是有效的：object __dirname?, __filename?, global? -> 节点兼容性功能的选项对象```