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

Posted on | In | Visitors:
Words : 917 | Reading ≈ 3 min

老项目重新 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 搭配使用。