启动Expo开发服务器时遭遇Webpack配置验证错误

问题详情 #

执行npm run start后按w键打开Web端，触发以下Webpack错误：

Logs for your project will appear below. Press Ctrl+C to exit.
Starting Webpack on port 19006 in development mode.
ValidationError: 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 'dgram'. These properties are valid:
    object { __dirname?, __filename?, global? }
    -> Options object for node compatibility features.
  • configuration.node has an unknown property 'dns'. 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.
  • configuration.node has an unknown property 'http2'. 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 'tls'. These properties are valid:
    object { __dirname?, __filename?, global? }
    -> Options object for node compatibility features.
  • configuration.node has an unknown property 'child_process'. These properties are valid:
    object { __dirname?, __filename?, global? }
    -> Options object for node compatibility features.

成因 #

Webpack 5彻底重构了node配置项，移除了Webpack 4及更早版本中的module、dgram、dns等属性，仅保留__dirname、__filename、global三个可选属性，或直接将node设为false。你的项目配置（手动编写或依赖自动生成）仍在使用旧版本的配置格式，导致Webpack的Schema校验失败。

解决方案 #

1. 手动配置Webpack的情况 #

找到项目根目录下的webpack.config.js（或同类配置文件），修改node配置块：

• 不需要模拟任何Node.js特性时，直接设置：

module.exports = {
  // 其他配置保持不变
  node: false
};

• 需要保留__dirname/__filename/global特性时：

module.exports = {
  // 其他配置保持不变
  node: {
    __dirname: true, // 也可设为'mock'，按需选择
    __filename: true,
    global: true
  }
};

2. 框架自动生成Webpack配置的情况（如React Native、CRA、Expo） #

• 确认项目使用Webpack 5版本，若为框架自带Webpack，大概率是依赖/插件未适配Webpack 5：
  • 升级所有相关插件（如babel-loader、webpack-dev-server）至支持Webpack 5的版本
  • 无法升级时，安装webpack-node-polyfill-plugin替代旧的node配置：

    const NodePolyfillPlugin = require('webpack-node-polyfill-plugin');
    
    module.exports = {
      // 其他配置保持不变
      plugins: [
        new NodePolyfillPlugin()
      ]
    };
    

• 若使用React Native Expo，升级expo到适配Webpack 5的版本，或修改app.json中的web配置，禁用旧的Node.js模拟。

3. 第三方依赖导致配置冲突的情况 #

部分npm包会自动注入Webpack配置，若未适配Webpack 5会引发此问题：

• 临时移除最近安装的依赖，重新运行项目定位问题包
• 给该包提交issue反馈，或寻找替代包

内容的提问来源于stack exchange，提问作者Yash117