看完本文,确保你在系统Node.js晋级过程中一往无前!
node晋级问题
- 本人HB实习,最近的使命是把web端的node从10晋级到16版别,三周期间遇到各种问题,几乎把该踩的坑都踩过了。记录下来,期望给后来的小伙伴带来一些帮助。
方针
晋级至node16.15.0
履行npm run build
履行npm run start
页面成功显示
道路
根本道路图:node晋级 —-> 依靠包适配 —-> python环境适配 —-> 依靠包适配 —-> gulp晋级适配 —-> 依靠包适配 —-> babel晋级适配 —-> 依靠包适配 —-> webpack晋级适配 —-> xxx.loader适配 —-> 依靠包适配
问题汇总
问题一
- ReferenceError: primordials is not defined
原因
当NodeJS版别是12.0.0以上 和 gulp版别是3.9.x以下时,此两个版别之间存在抵触。
gulp:4.0.2
CLI:2.3.0
处理:
办法一:node降级(舍去)
办法二:晋级gulp -> sudo npm install -g gulp
办法三:项目根目录新建npm-shrinkwrap.json,
- 然后重新履行npm install,这时候再去履行gulp相关操作就不会报错了。注意:这个文件在履行过一次npm install以后,就失效了,下次再履行就没有效果了。
写入: { "dependencies": { "graceful-fs": { "version": "4.2.2" } } }
问题二
- ERESOLVE unable to resolve dependency tree(无法解析依靠关系树)
原因
- 由于本地的npm版别太高了
处理
- sudo npm i –legacy-peer-deps
问题三
- Module build failed: Error: Cannot find module ‘node-sass’ 原因
- node版别不匹配的问题
处理
- sudo npm uninstall –save node-sass
- npm install –save node-sass
问题四
- ERESOLVE could not resolve
原因
- package.json里面包的版别发生了改变,或许新添的包与本来的不匹配,运用npm install 无法下载相应版别的包
处理
- 装置rimraf: cnpm(或许npm) install rimraf
- 删去node_modules文件夹:rimraf node_modules
- 清空缓存:npm cache clean –force
- 重新装置淘宝镜像: npm install -g cnpm –registry=regisry.npm.taobao.org
- 再次履行命令进行相关包的装置: cnpm i
问题五
- npm install 是显示需要python环境并且版别>3.6.0
原因
- (mac自带的是2.7.x)
处理
- 装置python3.x( > 3.6.0)
- 配置环境变量
清除npm缓存
- sudo npm cache clean –force
问题六
- code ERESOLVE
- npm ERR! ERESOLVE unable to resolve dependency tree
- npm ERR!
- npm ERR! While resolving:xxx
- npm ERR! Found: eslint@8.0.0
- node_modules/eslint
- npm ERR! dev eslint@”8.0.0″ from the root project
- npm ERR! Could not resolve dependency:
- npm ERR! peer eslint@”4.19.1″ from dev-hook-utils@1.1.5
- node_modules/dev-hook-utils
- npm ERR! dev-hook-utils@”^1.1.5″ from the root project
原因:
- 上游依靠抵触
处理
- 无脑改成peer后面的版别
- 这儿要十分慎重,各种版别依靠,还有可能闭环,呜呜呜~~~~
问题七
- npm ERR! code 1
- npm ERR! …..
- npm ERR! command failed
原因
- npm版别抵触
处理
- …
- 1.替换至node版别对应的npm版别(nodejs.org/zh-cn/downl…)
问题八
- npm ERR! gyp: No Xcode or CLT version detected!
原因
- 缺少了XCODE的CLI(command-line tools )工具
处理:删了重装
- sudo rm -rf $(xcode-select -p)
- sudo rm -rf /Library/Developer/CommandLineTools
- sudo xcode-select –install
问题九
- AssertionError [ERR_ASSERTION]: Task never defined: clean
原因
- Node.js v12+ 不支持 Gulp v3。
处理:
- v4的语法有些许改动
本来: gulp.task("less",()) => { }; gulp.task("default",["webpack","clean"]); -------------------------- 修改为: gulp.task("less",gulp.series(()) => { }); gulp.task("default",gulp.series("webpack","clean"));
问题十
- AssertionError [ERR_ASSERTION]: Task never defined: clean 原因:
- gulpfile.js是从上到下加载
处理:
- 把clean函数放在前面
问题十一
- [14:18:15] The following tasks did not complete: build,
- [14:18:15] Did you forget to signal async completion?
原因:
- gulp4都是异步函数,没有同步函数了。
- 每个 gulp 使命(task)都是一个异步的 JavaScript 函数,此函数是一个可以接收 callback 作为参数的函数,或许是一个返回 stream、promise、event emitter、child process 或 observable类型值的函数
处理:
- 官方发布办法
gulp.task('default',done =>){ done(); }
问题十二
- npm ERR! gyp ERR! cwd /Users/xxx/node_modules/node-sass
原因:
- 版别不匹配
处理
- 把用不到的库删去
问题十三
ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
- options has an unknown property ‘quiet’. These properties are valid: object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, stats?, serverSideRender?, outputFileSystem?, index? }
原因: webpack 2 => 4
处理: 注释掉 quiet=true
问题十四
- Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/xxx/node_modules/babel-preset-stage-2/lib/index.js
原因:
- bable版别不匹配
处理
- bable-x 全部最新版别
npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react webpack
问题十五
- TypeError: Cannot read properties of undefined (reading ‘vue’)
原因:
- vue-loader版别
处理
- 升至15.x
问题十六
- Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css] 原因:
- webPack 晋级到 4.x导致
- 在之前版别中咱们运用extract-text-webpack-plugin来提取CSS文件,不过在webpack 4.x中则应该运用mini-css-extract-plugin来提取CSS到单独文件中
处理:
- contenthash 改成 md5:contenthash:hex:20
webpack.xxx.conf.js中 ---------------------- const utils = require('./utils') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { //... new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash:7].css') }) } -------------------------- webpack.base.conf.js -------------------- test: /.(css|less)$/, use: [ { loader:MiniCssExtractPlugin.loader, }
问题十七
- Module build failed: Unknown word
原因:
- 抵触
处理:
- 多余的注释掉
问题十八
- Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
原因:
- 由于 sass 新版别现在弃用“/”的用法,sass自定义element theme时会报warnning
处理:
- npm install -g sass-migrator
- 进入项目node_modules文件
- 履行sass-migrator division */ .scss
问题十九
- Warning: Accessing non-existent property ‘which’ of module exports inside circular dependency
原因
- shelljs版别不兼容
处理
- 可切换node至v10.版别
- 晋级shelljs到 v0.8.4 即可处理;晋级shelljs:npm install shelljs@0.8.4 –save (然后在npm rebuild node-sass)
问题二十
- Module parse failed: Unexpected token (915:0)
原因
- webpack默认是不能处理vue文件,所以只能咱们自己添加一些额定的插件进行处理它。
处理:
- npm install vue-loader vue-template-compiler –save-dev
- 在webpack.conf.js配置
module:{ rules:{ test:"/.vue$/", use:{ loader:"vue-loader"} } }
问题二十一
- ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
原因:
- css-loader版别只要 > 1.0.0,minimize失效
处理:
- 删去minimize
问题二十二
- DeprecationWarning: Tapable.plugin is deprecated. Use new API on
.hooks
instead (Usenode --trace-deprecation ...
to show where the warning was created)原因:
- extract-text-webpack-plugin不兼容webpack4.x版别
处理:
- npm install extract-text-webpack-plugin@next
问题二十三
- CssSyntaxError:xxx: Unknown word
原因:
- css-loader问题
问题二十四
- RangeError: Invalid string length
原因:
- vue-loader问题
问题二十五
- /deep/编译过错
原因
- /deep/ 已弃用
处理
- 修改为 ::v-deep
问题二十六
- The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.
原因:
- 晋级至webpack4后未指定mode
处理:
- webpack.base.conf,js中:
module.exports = { ... mode: 'development', ... }
问题二十七
- TypeError: MiniCssExtractPlugin.extract is not a function
原因:
- webpack(2–>4),[extract-text-webpack-plugin]不再被支持,需要替换为[mini-css-extract-plugin],对应代码也需更改。
处理
return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) -----修改为以下--------- return [MiniCssExtractPlugin.loader].concat(loaders)
问题二十八
- Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
原因:
- webpack.optimize.UglifyJsPlugin在webpack4.x已弃用
处理
- webpack.conf.js在output同级目录下新增optimization
- new webpack.optimize.UglifyJsPlugin({...}) ----------------------------- + optimization: { minimizer:[new UglifyJsPlugin() }
问题二十九
- Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead
原因:
- webpack4不支持webpack.optimize.CommonsChunkPlugin
- webpack4删去了CommonsChunkPlugin插件,需要运用内置API optimization.splitChunks 和 optimization.runtimeChunk代替
处理
- new webpack.optimize.CommonsChunkPlugin({...}) -------------------------------- + optimization: { runtimeChunk: { name: 'manifest', }, splitChunks: { chunks: 'async', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, } } } }
问题三十
- TypeError: fsevents.watch is not a function
原因
- 版别问题
处理
- 处理办法:npm install watchman
- 仍是不可:brew install gcc
问题三十一
- dev-hook-utils > pre-commit
- Start to lint staged files
Start eslintError: Failed to load config “eslint-config-airbnb/base” to extend from.原因:
- 依靠缺失
处理:
- npm i eslint-config-airbnb@[版别号] eslint-plugin-import@[版别号] -D
- 注:二者版别有依靠,记得要版别兼容不然报错
写在最终
说实话,一路走来,遇到林林总总的问题,好多次想的:把问题抛出去得了,横竖我一个实习生搞不定这么大的问题。可是三个礼拜下来,终于是成功的build、start、显示成功了。收获满满!
星光不负赶路人,韶光不负有心人!!!
共勉!!!