Webpack错误 - 配置项'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

我正在尝试使用一个解析器生成器库（antlr4），该库既可以在Node.js环境中工作，也可以在浏览器中工作。看起来该库的代码需要全局对象，如fs，并且如果为空，则假定它处于浏览器环境中。根据Antlr4的文档和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的新配置。

- redab

---

看起来你正在尝试在浏览器中使用“fs”和“net”模块，这是不可能的。 - slebetman

你是正确的-这个库正在尝试require那些模块。如果它接收到一个空对象，那么它就会认为它在浏览器环境中。这是该库能够在Node.js环境和浏览器环境中同时运行的原因。看起来其他人已经能够在较旧版本的Webpack中使其正常工作。 - redab

更好的解决方案是检查window或document是否已定义：if (typeof window !== 'undefined') ... 如果没有，则您在node.js中。 - slebetman

同意这不是最好的行为。然而，这并不在我的控制范围之内。这种行为已经在 antlr4 库包中实现。我只是一个试图使用它的可怜人。如果这是一种被支持的配置，我的希望是 Webpack 可以修复这个问题。 - redab

Answer 1

在 Webpack 团队的帮助下，我成功让它工作了。使用 antlr4 文档中推荐的以下 Webpack 配置已不再支持。

无法工作

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

工作配置

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

有了这个，我能够让我的JavaScript解析器工作。

请注意，正在进行更新antlr4以生成基于ES6的代码的工作。将来可能不需要此配置。

- redab

---

这是一个潜在影响巨大的重大问题，在文档和v4到v5迁移文档中都没有提及... https://webpack.js.org/configuration/node/#node - Tchakabam

请注意，您在此处的示例中使用的"empty"应改为false，这也适用于v4。 - Tchakabam

@tchakabam，我正在尝试提交一个 PR 来更新文档。你能确认文档中的配置在 Webpack 4 中也不起作用吗？ - redab

实际上，这在 Webpack 4 中是可行的。随着我们升级到 v5，出现了这个问题。 - Tchakabam

尝试在Next.js v10.2中使用webpack 5时遇到了相同的问题，类似的配置在webpack 4上可以正常工作。 - Vadorequest

resolve.fallback.fs: false 的问题在于运行时 fs 是 {}。 - Mateja Petrovic

Answer 2

Next.js的用户：

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

来源

- ZenVentzi

Answer 3

对于 Rails Webpacker，如果您正在使用它，则解决方案应为：

在使用纯定制配置的任何 config/webpack/*.js 文件中（有关更多信息，请参见https://github.com/rails/webpacker#webpack-configuration），只需添加解析和删除 node 属性的代码即可。

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

- Малъ Скрылевъ

---

这是我在使用 Rails 6.1 应用程序和 Webpacker 5.4.4 中唯一有效的解决方案。 - Richi González

这还行吗，还是需要更新一下？我也不得不在Rails 7中做这个来使其工作，但我看到一些关于废弃警告的警告。 "(node:7497) [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest已被弃用（请使用Compilation.hooks.renderManifest代替）"等等。 - undefined

@Doddlin 如果 Rails 7 项目使用 webpack 和 webpacker，你需要将代码应用到 webpack 配置文件中的开发和测试环境。如果你使用纯 webpack，只需使用纯共享配置。 - undefined

你能告诉我，你是如何将它添加到测试环境文件中的吗？ test.js中导出了environment.toWebpackConfig()。你也删除了它吗？ - undefined

@samul5 任何结果环境的键都应该被移除 :) - undefined

Answer 4

我在使用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'代码。

- Haris Ahmad

---

非常感谢！[webpack-cli] 配置对象无效。Webpack 已经使用不符合 API 模式的配置对象进行初始化。 - 配置项 node 具有未知属性 'fs'。这些属性是有效的： object { __dirname?, __filename?, global? } -> 用于节点兼容性功能的选项对象 - Lê Văn Chiến

Answer 5

如果有人在Next JS中遇到这个错误，我发现通过禁用默认设置的webpack 5来解决问题。

在next.config.js中通过webpack5: false进行禁用。

- haidar

---

更改默认设置以不使用webpack5会有任何副作用吗？ - ZenVentzi

Answer 6

有趣的是，对于 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。

- Tchakabam