Npm Build issue linked to Uglify-js

[hannah-wj-sky]

Describe the bug The app runs great, exports pdfs but when I try to run 'npm run build' I get errors that are linked to the Uglify-js plugin that is a dependency of plugins which are dependencies of vue-html2pdf. So I won't be able to use it in production which is a real shame.

To Reproduce Steps to reproduce the behavior:

1. Create app and running with Visual Studio - works fine, exports pdf.
2. npm run build give error attached:

Unexpected token name «of», expected punc «;» [17.bundle-v=2.0.14-0.js:1184,26]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! sma-mvc@2.0.14-0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the sma-mvc@2.0.14-0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\HWS05\AppData\Roaming\npm-cache\_logs\2020-11-03T12_14_00_333Z-debug.log

I then tried in a new app:

1. deleted node modules (using 'rimraf node_modules' command)
2. deleted my package-lock.json file
3. deleted all files from %temp% folder
4. Shut down laptop
5. Restart laptop
6. npm install
7. npm i vue-html2pdf
8. npm run dev (no error)
9. npm run build - same error

Package Version 1.8.0

[kempsteven]

What version of vue are you using? Did you use vue-cli or vite?

I tried replicating it on vue 2.6.11. project is generated by vue-cli 4.5.8, I was not having any problems. I'm guessing you're using vue 3? This package does not support vue 3 yet.

[hannah-wj-sky]

Hi, I found the solution here -

https://forum.vuejs.org/t/error-in-build-js-from-uglifyjs-unexpected-token-punc/33604/6

I had to install the 'uglifyjs-webpack-plugin' and then update the Uglify part of my webpack.config file.

npm i -D uglifyjs-webpack-plugin@1.3.0

Then:

Old code:

new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                dead_code: true,
                unused: true,
                drop_console: true,
                drop_debugger: true,
            },
            output: {
                beautify: false,
            }
        })

New code:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

....

new UglifyJsPlugin({
            "uglifyOptions":
            {
                compress: {
                    warnings: false,
                    dead_code: true,
                    unused: true,
                    drop_console: true,
                    drop_debugger: true
                },
                output: {
                    beautify: false,
                }
            }
        })```