Problem
If you are using some third party libraries on SPFX 2019 there can be a problem with your typescript language set. Everything works fine in development, but on production build you get an error message like this one:
SyntaxError: Unexpected token: name (xxxxxx) from Uglify plugin
The problem ist, that third party library uses ES6 code and UglifyJS ist not able to compile ES6.
Solution
UglifyJS does not support this compile, so we can go for TerserPlugin. (Source) In latest SPFX 1.12.1, Microsoft also don’t use UglifyJS anymore, it is @Microsoft/Rush-Stack-Compiler-x-x.
First add this package to your devDependencies in package.json:
"terser-webpack-plugin-legacy": "1.2.3"
Second is to change your build configuration in gulpfile.js.
const TerserPlugin = require('terser-webpack-plugin-legacy');
...
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
// Replace the UglifyJS plugin with Terser, so that this will work with ES6
generatedConfiguration.plugins.forEach((plugin, i) => {
if (plugin.options && plugin.options.mangle) {
generatedConfiguration.plugins[i] = new TerserPlugin({
test: /\.(js|vue)(\?.*)?$/i
})
}
})
return generatedConfiguration;
}
});
build.initialize(require('gulp'));
For us everything worked fine afterwards.
