• umi webpack


    现象

    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
    ode_modules@umijsdepscompiledwebpack4undle4.js:138983:9)
        at Bundler.setupDevServerOpts (C:xxx
    ode_modules@umijsundler-webpacklibindex.js:193:40)
        at C:xxx
    ode_modules@umijspreset-built-inlibpluginscommandsdevdev.js:300:30
        at Generator.next (<anonymous>)
        at asyncGeneratorStep (C:xxx
    ode_modules@umijspreset-built-inlibpluginscommandsdevdev.js:74:103)
        at _next (C:xxx
    ode_modules@umijspreset-built-inlibpluginscommandsdevdev.js:76:194)
    

    原因

    使用了webpack5的高版本umi(如3.5.7)的问题,

    解决

    方案一

    感谢:react umi项目运行报错 提供的帮助

    降低版本后可行

    项目中package.json中umi包版本如下:

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

    去掉^
    重新装包yarnyarn install
    重新启动项目

    报错Cannot find module 'webpack/lib/ModuleFilenameHelpers':

    Error: Cannot find module 'webpack/lib/ModuleFilenameHelpers'
    Require stack:
    - C:xxx
    ode_modulesesbuild-loaderdistminify-plugin.js
    - C:xxx
    ode_modulesesbuild-loaderdistindex.js
    - C:xxx
    ode_modules@umijsplugin-esbuildlibindex.js
    - C:xxx
    ode_modules@umijscorelibServiceutilspluginUtils.js        
    - C:xxx
    ode_modules@umijscorelibServiceService.js
    - C:xxx
    ode_modules@umijscorelibindex.js
    - C:xxx
    ode_modulesumilibServiceWithBuiltIn.js
    - C:xxx
    ode_modulesumilibforkedDev.js
        at Function.Module._resolveFilename (node:internal/modules/cjs/loader:941:15)
        at Function.mod._resolveFilename (C:xxx
    ode_modules@umijsundler-webpacklib
    equireHook.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
    ode_modules@umijsdepscompiledabelun    at Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
        at Object.newLoader [as .js] (C:xxx
    ode_modules@umijsdepscompiledabelundle.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
    ode_modulesesbuild-loaderdistindex.js:10:41)
    

    运行npm link webpack解决

    方案二

    全局搜索并去掉项目中的webpack5配置项

    方案三

    低版本umi的同学提交一下yarn.lock文件,新装同学重新yarn install

  • 相关阅读:
    使用poi读写excel文件
    视频云全球创新挑战赛 — 视频目标分割经典算法解析
    阿里云 RTC QoS 弱网对抗之变分辨率编码
    用 WebRTC 打造一个音乐教育 App,要解决哪些音质难题?
    “蚂蚁呀嘿” 刷屏的背后:算法工程师带你理性解构神曲
    白话解读 WebRTC 音频 NetEQ 及优化实践
    未来直播 “神器”,像素级视频分割是如何实现的 | CVPR 冠军技术解读
    「 视频云大赛 — 大咖驾到 」驱动下一代技术浪潮,我们更专注价值落地
    「 视频云大赛 — 大咖驾到 」下一代技术新浪潮,正由视频云驱动
    视频云大赛|视频目标分割,下一个视频算法技术爆发点?
  • 原文地址:https://www.cnblogs.com/yanjiez/p/15118258.html
Copyright © 2020-2023  润新知