1. Problems
I recently encountered a wonderful problem, which has troubled me for two months.
There is a front-end project, the packaging is normal on the colleague’s computer, but the packaging error is always reported on my computer:
Error: Command failed: npm run build
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `cross-env NODE_DEV=production SERVER_DEV=testing BUILD_MODE=cdn webpack --config ./build/webpack.prod.js`
npm ERR! Exit status 2
npm ERR!
It seems that cross-env is reporting an error and cannot be executed normally.
I tried all kinds of Baidu, such as searching cross-env报错, npm ERR! Exit status 2... and I couldn't solve it. Basically, I couldn't find the command on the Internet: cross-env and the like, which was completely different from this error.
I tried various methods, such as using the same node version, using the same registry, deleting the project and re-downloading and repackaging, but none of them solved the problem.
There is an error log, but the content in the log is similar to the above, and it is of no use.
2. Analysis process
1. This front-end project is composed of 4 sub-projects. The packaging command is configured by itself npm test, and the 4 sub-projects will be typed together.
2. The current phenomenon is that when using this command to package together, cross-envthis sentence reports an error. (not a command not found error)
3. Try to package these 4 projects separately, use npm run buildthe command to type one by one, and found that 3 projects are packaged normally, and 1 project reports an error
Type 'C' does not satisfy the constraint 'ElementType<any>'.
4. The error message reported is an error of a certain dependency in node_modules, but no solution can be found by searching for this error. Delete this dependency and reuse the npm installdownload dependency, but there is no solution.
5. It is further found that the dependency location of the error is D:\node_modulesthat this location is not the dependency location of the front-end project:D:\web_project\mytest3\node_modules
6. So far, the problem has been found. It is obviously executed in the front-end project directory npm run build, but I don’t know why, this project does not use its own node_modules, and it insists on using it, which D:\node_modulesleads to an error.
3. Solutions
1. The investigation found that D:\node_modulesthe folder was not used, so this folder was deleted, and node_modulesall redundant folders on the disk were deleted. (Because I am not very familiar with front-end projects, I am afraid that there are other interferences, so I deleted them all)
2. Uninstall nodejs first, then continue to search the disk with everything, and delete all redundant npm, npm-cache, nodejs, yarnand other folders to prevent interference.
3. Reinstall nodejs, use npm config set registry http://xxx.comthe correct download source, and then use npm config get registryto check whether it is successful.
4. Re-download the front-end project, re-use npm installthe download dependency, and re-use npm test(the packaging command configured by the project) to package the project. This time, the packaging is finally successful. (Without D:\node_modulesinterference, the front-end project finally successfully packaged with its own node_modules.)
4. Summary of front-end project packaging considerations
1. If a cross-env error occurs, you can check whether the front-end project uses the wrong node_modules.
2. To install the correct nodejs version, too high or too low will not work.
3. To set the correct registry, the setting method is npm config set registry http://xxx.comand the viewing method isnpm config get registry
4. You need to use npm installthe download dependency in the path where the front-end project is located, and npm run buildthen package it into the dist folder.