ValidationError：无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 Next.js

Posted 2023-03-08

技术标签:

【中文标题】ValidationError：无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 Next.js【英文标题】：ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. Next.js 【发布时间】：2021-09-03 09:20:14 【问题描述】：

我使用create-next-app 创建了我的 next.js 项目样板。但是一旦我运行npm run dev 我就会得到错误：

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].node should be one of these:
   false | object  __dirname?, __filename?, global? 
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration[0].node has an unknown property 'fs'. These properties are valid:
      object  __dirname?, __filename?, global? 
      -> Options object for node compatibility features.
    * configuration[0].node has an unknown property 'devServer'. These properties are valid:
      object  __dirname?, __filename?, global? 
      -> Options object for node compatibility features.
 - configuration[1].node should be one of these:
   false | object  __dirname?, __filename?, global? 
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration[1].node has an unknown property 'fs'. These properties are valid:
      object  __dirname?, __filename?, global? 
      -> Options object for node compatibility features.
    * configuration[1].node has an unknown property 'devServer'. These properties are valid:
      object  __dirname?, __filename?, global? 
      -> Options object for node compatibility features.
    at validate (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\schema-utils3\index.js:1:153657)
    at validateSchema (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\webpack\bundle5.js:137945:2)
    at create (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\webpack\bundle5.js:141384:24)
    at webpack (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\webpack\bundle5.js:141426:32)
    at f (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\compiled\webpack\bundle5.js:98978:16)
    at HotReloader.start (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\server\hot-reloader.js:18:415)
    at async DevServer.prepare (C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\server\next-dev-server.js:16:453)
    at async C:\Users\crisp\OneDrive\Documents\Next.js\next-startup\nextflix\node_modules\next\dist\cli\next-dev.js:22:1 
  errors: [
    
      keyword: 'anyOf',
      dataPath: '[0].node',
      schemaPath: '#/anyOf',
      params: ,
      message: 'should match some schema in anyOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
.....

我的next.config.js 如下所示。

module.exports = 
  webpack: (config) => 
    config.node = 
      fs: 'empty'
    
    return config
  
;

什么都没有改变。这是默认设置。请您解释一下为什么会出现此错误。

任何帮助输入将不胜感激。

【问题讨论】：

【参考方案1】：

您正在运行 webpack 5、which only supports__dirname、__filename 和 global。

您的配置假定使用 webpack 4，它支持更多属性 including Node core libraries。

您需要选择要运行的 webpack 版本并确保您的配置匹配。

【讨论】：

感谢您的回答，它给了我明确的提示。但是我找不到配置 webpack 5 的方法，如果你可以请发布与 webpack 5 一起使用的next.config.js。【参考方案2】：

在JDB 的回答之后，我有了明确的提示。在阅读了this 之后，我将我的next.js 应用程序配置为使用webpack4。这是我的新next.cofig.js：

module.exports = 
  webpack5: false,
  webpack: (config) => 
    config.node = 
      dns: "mock",
      fs: "empty",
      path: true,
      url: false,
    ;
    return config;
  ,
;

【讨论】：

【参考方案3】：

Next.js has now webpack-5 enabled by default.

如果您不想切换回webpack-4（对于obvious reasons），您的配置应如下所示：

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

我看到你发布的答案，你也在配置path 和url。但是您实际上不需要手动配置它们，因为 Next.js 会为您处理。

对于dns，你可以这样做：

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

      fallback.dns = function () 
        if (!arguments.length) return;
        const callback = arguments[arguments.length - 1];
        if (callback && typeof callback === 'function') callback(null, '0.0.0.0');
      ;
      // or after installing `node-libs-browser`
      // fallback.dns = require.resolve('node-libs-browser/dns');
    
    return config;
  ,
;

参考：

To v5 from v4 | webpack

Automatic Node.js Polyfills Removed

resolve.fallback

next/build/webpack-config.ts

Webpack 5 Adoption

【讨论】：

它没有用。不过谢谢你的回答【参考方案4】：

您能否检查 Nextjs 11 上的任何依赖项是否需要更新。在我的情况下，将next-transpile-modules 更新为版本：^8.0.0 解决了这个问题。

【讨论】：

【参考方案5】：

只需更新节点版本。当我尝试创建一个新的 next.js 应用程序时，我也收到了这个错误。我安装了节点版本 14.16，但 Next 似乎需要 ^14.17.0。更新到 14.18.0 后，我创建了一个新的下一个应用程序，它使用默认的 next.config 文件运行良好。