Webpack error 之 TypeError: Cannot read property 'properties' of undefined

老项目重新 npm install 的坑,问题原因比较隐蔽,记录一下。

操作背景

  • 去年建的项目,webpack4.4.1,webpack-cli2.0.12。
  • 今天在另一台电脑,把项目clone下来,然后npm install, 执行build打包的时候,立即报错。
  • 两台电脑node环境相同。
    完整报错如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /node_modules/webpack-cli/bin/config-yargs.js:89
    describe: optionsSchema.definitions.output.properties.path.description,
    ^

    TypeError: Cannot read property 'properties' of undefined
    at module.exports (/Users/yinchuan/Documents/学习/学习笔记/test/code-lib/webpack-library-example/node_modules/webpack-cli/bin/config-yargs.js:89:48)
    at /Users/yinchuan/Documents/学习/学习笔记/test/code-lib/webpack-library-example/node_modules/webpack-cli/bin/webpack.js:60:27
    at Object.<anonymous> (/Users/yinchuan/Documents/学习/学习笔记/test/code-lib/webpack-library-example/node_modules/webpack-cli/bin/webpack.js:515:3)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)

问题分析

  1. 看提示,是webpack-cli报错,于是进webpack-cli相应目录查看
    webpack-cli-config-yargs.js-line89.jpg

    不知为啥没有获得 webapack 配置参数的 output 属性。

  2. 简单百度了一下,有人说是webpack和webpack-cli版本不对应导致,安装一下最新的webpack-cli即可解决。
    也没太注意,就直接重新安装了webpack-cli,为了webpack也跟它匹配,连webpack一起重装了:

    1
    npm i --save-dev webpack webpack-cli

安装完就直接build了,但是还是报同样的错。

于是开始各种尝试,直接npx webpack用默认配置打包、用配置文件webpack.config.js打包、把工程简化到就一句console.log、把webpack配置精简到就entry和output… 排除了文件路径,代码逻辑问题,webpack和webpack-cli也都是最新的,还是没用。

最后再次百度,发现有人提到他把 webpack-cli 从2.x升级到3.x就好了,原因是 webpack 在 4.20.0 之后,需要 webpack-cli3.1.1 搭配使用。。。
webapck-release-v4.20.0.jpg

https://github.com/webpack/webpack/releases/tag/v4.20.0

我突然想到 npm package 的版本前面的那个符号有限制版本的作用,可能我以为我的webpack-cli是最新的,但其实并没有呢?

赶紧去检查了下我的本地webpack和webpack-cli版本,OHG!果然!

1
2
"webpack": "^4.41.2",
"webpack-cli": "^2.1.5"

刚才的重新安装后,webpack-cli并没有更新到3.x。

问题原因

所以问题原因终于找到:
webpack4.20.0之后,需要 webpack-cli3.1.1 搭配使用,而现在是webpack4.41.2 + webpack-cli2.1.5,所以开始报开头贴出来的错。

而我以为我装了最新的实际却没有给我装最新的cli,原因是:
坑爹的 ^ ,这个符号会限制你在不指定package版本的install时,安装的是不超过当前大版本的最新版本。
所以"webpack-cli": "^2.0.12"这句,限制了我直接install的webpack-cli版本不会超过3.0.0 。

更多npm包版本的语意可以到官网 https://docs.npmjs.com/misc/semver 查阅。

解决

强制安装:
npm i -D webpack-cli@latest
或者在 package.json 删除"webpack-cli": "^2.0.12"这句后,再使用普通安装:
npm i -D webpack-cli

再运行npm run build 打包,OK了~

总结

  1. 不要以为重新安装一下就一定是安装最新的包。
  2. 不要忽视 npm package 的版本号前缀,它的语意很重要。
  3. 一定要关注webpack这些打包工具的release动态和特性变化,这对你的项目中如果改变了webpack的版本导致的问题很有帮助。
  4. webpack 4.20.0 以上,需要 webpack-cli3.1.1 搭配使用。