umi webpack - configuration[0] has an unknown property 'experiments'

現象

umi項目啟動時報錯：

PS C:\xxx> yarn start:dev
yarn run v1.22.10
$ cross-env REACT_APP_ENV=local MOCK=none UMI_ENV=dev umi dev
Bundle with webpack 5...
Starting the development server...
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0] has an unknown property 'experiments'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0] has an unknown property 'experiments'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
    at Object.webpack (C:\xxx\node_modules\@umijs\deps\compiled\webpack\4\bundle4.js:138983:9)
    at Bundler.setupDevServerOpts (C:\xxx\node_modules\@umijs\bundler-webpack\lib\index.js:193:40)
    at C:\xxx\node_modules\@umijs\preset-built-in\lib\plugins\commands\dev\dev.js:300:30
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\xxx\node_modules\@umijs\preset-built-in\lib\plugins\commands\dev\dev.js:74:103)
    at _next (C:\xxx\node_modules\@umijs\preset-built-in\lib\plugins\commands\dev\dev.js:76:194)

原因

使用了webpack5的高版本umi(如3.5.7）的問題，

解決

方案一

感謝：react umi項目運行報錯 提供的幫助

降低版本后可行

項目中package.json中umi包版本如下：

"dependencies": {
  //```
  "umi": "^3.4.1",
  //···
}

去掉^
重新裝包yarn或yarn install
重新啟動項目

報錯Cannot find module 'webpack/lib/ModuleFilenameHelpers':

Error: Cannot find module 'webpack/lib/ModuleFilenameHelpers'
Require stack:
- C:\xxx\node_modules\esbuild-loader\dist\minify-plugin.js
- C:\xxx\node_modules\esbuild-loader\dist\index.js
- C:\xxx\node_modules\@umijs\plugin-esbuild\lib\index.js
- C:\xxx\node_modules\@umijs\core\lib\Service\utils\pluginUtils.js        
- C:\xxx\node_modules\@umijs\core\lib\Service\Service.js
- C:\xxx\node_modules\@umijs\core\lib\index.js
- C:\xxx\node_modules\umi\lib\ServiceWithBuiltIn.js
- C:\xxx\node_modules\umi\lib\forkedDev.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:941:15)
    at Function.mod._resolveFilename (C:\xxx\node_modules\@umijs\bundler-webpack\lib\requireHook.js:49:28)
    at Function.Module._load (node:internal/modules/cjs/loader:774:27)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
plugin.js:8:33)
    at Module._compile (node:internal/modules/cjs/loader:1109:14)
    at Module._compile (C:\xxx\node_modules\@umijs\deps\compiled\babel\bun    at Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at Object.newLoader [as .js] (C:\xxx\node_modules\@umijs\deps\compiled\babel\bundle.js:146843:7)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
    at Module.require (node:internal/modules/cjs/loader:1013:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at Object.<anonymous> (C:\xxx\node_modules\esbuild-loader\dist\index.js:10:41)

運行npm link webpack解決

方案二

全局搜索並去掉項目中的webpack5配置項

方案三

低版本umi的同學提交一下yarn.lock文件，新裝同學重新yarn install