Article directory
- background:
- Troubleshoot the error locally
-
- The local project package.json does not have UglifyJs dependencies installed.
- It is speculated that one of the dependencies of a plug-in itself contains UglifyJs
- UglifyJs errors can be solved by compiling with babel and converting es6 to es5.
- Change the configuration of babel-loader from exclude to include to troubleshoot errors.
- Use the VS Code global search function to find where the error code comes from
- Add the node_modules file that reported the error to the include of babel-loader
- In `include:[], add all the files that need to be converted from es6 to es5. You can use a directory or write a specific js file`
Background:
The company’s old project uses webpack 3.X to build the project. No plans to upgrade. When this project is built locally, it is packaged successfully. But when it comes to GitLab CI/CD or Docker, the build fails. The reason for failure is:
ERROR in main_25188b.js from UglifyJs Unexpected token: name (raf) [main_25188b.js:121200,4]
Troubleshoot the error locally
I don’t know why, but the local environment can build normally, but when it comes to the Linux environment, the build fails. I tried many methods, but I couldn’t get the code after GitLab or Docker build. I couldn’t get the main_25188b.js file, and I couldn’t see where the problem was in the code from this file.
The local project package.json does not have UglifyJs dependencies installed
The error report obviously indicates that there is a problem with UglifyJs. Because uglifyjs cannot handle es6 syntax, the error is reported, but UglifyJs is not installed in my project package.json. code> dependency package. The local package.json configuration is as follows:
{<!-- -->
// ... ... omit some code
"devDependencies": {<!-- -->
"autoprefixer": "^7.1.6",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.0.16",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-latest": "^6.24.1",
"babel-preset-stage-0": "^6.0.15",
"copy-webpack-plugin": "^4.6.0",
"copy-webpack-plugin-advanced": "^2.0.0",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^2.30.1",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"sass": "1.53.0",
"sass-loader": "^7.3.1",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue-loader": "^13.5.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.3",
"webpack": "^3.8.1",
"webpack-md5-hash": "^0.0.5"
},
"dependencies": {<!-- -->
"archiver": "^5.3.1",
"cross-env": "^7.0.3",
"echarts": "^4.1.0",
"js-base64": "^2.3.2",
"lodash.merge": "^4.6.2",
"qrcode": "^1.5.3",
"qs": "^6.11.2",
"ts-md5": "^1.2.7",
"vue": "^2.5.3",
"vue-echarts": "^4.0.1",
"vue-i18n": "^8.24.4",
"vue-resource": "^1.3.4",
"vue-router": "^3.0.1",
"vue-touch": "^2.0.0-beta.4"
}
}
It is speculated that a plug-in itself has UglifyJs in its dependencies
Through the global search of vscode, I found that UglifyJs is used in many dependency packages.
This situation cannot be solved by replacing UglifyJs with the babili-webpack-plugin plug-in.
UglifyJs reports errors, which can be solved by compiling with babel and converting es6 to es5.
Check the project’s webpack.config.js file to find the part handled by babel-loader.
//Omit a lot of code
var path = require('path');
function resolve (dir) {<!-- -->
return path.join(__dirname,dir);
}
module.exports={<!-- -->
module:{<!-- -->
rules:[
// Process .js files (escape ES6 syntax)
{<!-- -->
test:/\.js$/,
loader:'babel-loader',
exclude:__dirname + '/node_modules/',
query:{<!-- -->
presets:['es2015', "stage-0"]
},
},
],
}
}
Seeing this, I found that when babel-loader compiles the code, exclude:__dirname + '/node_modules/' excludes the compilation of the node_modules file. After I deleted this exclude, I used GitLab or Docker environment to build, and the build was successful.
It can be seen that a js file in node_modules uses es6 syntax and is not compiled into es5, causing UglifyJS compilation errors.
It is unrealistic to throw all the files of node_modules into babel-loader and compile them again, which will greatly waste compilation time. So which dependency package did we have the problem with?
You only need to find out which dependent package’s js file is not compiled into es5, and include this dependent package into babel-loader to solve this problem.
So how to find it?
Change the configuration of babel-loader from exclude to include to troubleshoot errors
We will exclude node_modules compilation and change include to include only xxx file compilation.
//Omit a lot of code
var path = require('path');
function resolve (dir) {<!-- -->
return path.join(__dirname,dir);
}
module.exports={<!-- -->
module:{<!-- -->
rules:[
// Process .js files (escape ES6 syntax)
{<!-- -->
test:/\.js$/,
loader:'babel-loader',
include:[
resolve('dist/'),
],
query:{<!-- -->
presets:['es2015', "stage-0"]
},
},
],
}
}
After executing npm run build, the error in build in GitLab CI/CD or Docker is reproduced.
With the help of VScode’s jump function, hold down Ctrl + mouse and move to the error location, and an underline will appear at the error location. While holding down Ctrl, mouse Left-click on the place where the error is reported to jump to the code where the error is reported.
Use the VS Code global search function to find where the error code comes from
VS Code search configuration:
The first line of search content: Cancel the filter of Aa ab .*
Files contained in the third line: Clear without any characters or spaces. If there is a clear error report, you can also write the name of the folder. If you are sure that the error is reported by node_modules, you can write ./node_modules
Line 4 Excluded files: Do not light up this exclude button and do not use “Exclude Settings and Ignore Files”
After completing the above configuration, search for the code that caused the error found in main_25188b.js:
The result of the search is: In node_modules\resize-detector, there is es6 code that has not been compiled into es5.
Note: If the code you are searching for is let name = null;, the kind of code that can be found everywhere, you can find it near the error code of main_25188b.js A unique code that looks like a variable name is searched for.
Add the node_modules file that reported the error to the include of babel-loader
//Omit a lot of code
var path = require('path');
function resolve (dir) {<!-- -->
return path.join(__dirname,dir);
}
module.exports={<!-- -->
module:{<!-- -->
rules:[
// Process .js files (escape ES6 syntax)
{<!-- -->
test:/\.js$/,
loader:'babel-loader',
include:[
resolve('dist/'),
resolve('node_modules/resize-detector/esm/')
],
query:{<!-- -->
presets:['es2015', "stage-0"]
},
},
],
}
}
ok, try npm run build again. oh! Oh my gosh! Another error!
UglifyJS still reports an error. OK, follow the above method to locate which node_modules is causing trouble again.
Oh, it’s the little devil node_modules/qrcode/lib/. Add it to include.
//Omit a lot of code
var path = require('path');
function resolve (dir) {<!-- -->
return path.join(__dirname,dir);
}
module.exports={<!-- -->
module:{<!-- -->
rules:[
// Process .js files (escape ES6 syntax)
{<!-- -->
test:/\.js$/,
loader:'babel-loader',
include:[
resolve('dist/'),
resolve('node_modules/resize-detector/esm/'),
resolve('node_modules/qrcode/lib/'),
],
query:{<!-- -->
presets:['es2015', "stage-0"]
},
},
],
}
}
Re-run npm run build, OK, this time finally the following error is not reported.
ERROR in main_96f20a.js from UglifyJs
Unexpected token: name (toSJISFunction) [main_96f20a.js:35061,4]
congratulations.
Include:[], add all the files that need to be converted from es6 to es5. You can use a directory or write a specific js file
Finally, it was discovered that the error was caused by the qrcode plug-in added in package.json.
If the project worked normally before npm run build, but after adding a certain dependency, npm run build failed. You can guess that there is a problem with the dependency itself, or there is a problem with the dependency of this dependency. Quickly locate the problem.