Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error - [webpack] 'dist': web-part.js from UglifyJs Unexpected token: name #2782

Closed
joshburnssp opened this issue Oct 17, 2018 · 10 comments

Comments

Projects
None yet
8 participants
@joshburnssp
Copy link

commented Oct 17, 2018

Category

  • [x ] Question
  • Typo
  • [ x] Bug
  • Additional article idea

Expected or Desired Behavior

run gulp bundle --ship and gulp package-solution --ship to package the webpart ready for deployment

Observed Behavior

The build always fails at step 3 with following error

Error - [webpack] 'dist':
hl-personalised-links-web-part.js from UglifyJs
Unexpected token: name (HlPersonalisedLinksWebPart_HlPersonalisedLinksWebPart) [hl-personalised-links-web-part.js:13725,6]

when checking the hl-personalised-links-web-part.js in the Dist folder, it is duplicating the HlPersonalisedLinksWebPart class name

class HlPersonalisedLinksWebPart_HlPersonalisedLinksWebPart extends sp_webpart_base_["BaseClientSideWebPart"]

the tsconfig.json file looks like this

"compilerOptions": {
"target": "es2016",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"outDir": "lib",
"typeRoots": [
"./node_modules/@types",
"./node_modules/@microsoft"
],
"types": [
"es6-promise",
"webpack-env"
],
"lib": [
"es2017",
"dom",
"scripthost"
]
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"lib"
]

Steps to Reproduce

run gulp bundle --ship and package-solution --ship

Thanks for your contribution! Sharing is caring.

@patmill

This comment has been minimized.

Copy link
Contributor

commented Oct 17, 2018

Is this repro-ing with a new webpart? What version of the framework are you using? Does it happen with debug?

@joshburnssp

This comment has been minimized.

Copy link
Author

commented Oct 18, 2018

I am using the latest version (1.6.0) and not with a new web part. If i were to create a new project i think it would use a different target possibly ES5.

@joshburnssp

This comment has been minimized.

Copy link
Author

commented Oct 18, 2018

so my initial reasoning for this was i have an array and needed to use array.includes to get a couple of values. Read somewhere that updating the compiler target would allow me to use .includes.

Just changed the compiler target back to ES5 and run gulp bundle --ship etc and ran without any errors...

@nsoeth

This comment has been minimized.

Copy link

commented Mar 22, 2019

I know this is old and you solved your issue, but I ran into the same issue after upgrading to 1.8.0 and wanted to share my solution.

The problem was, that I had npm packages, that uses ES6 code. And UglifyJS wasn't able to compile ES6. I basically swapped UglifyJS for the TerserPlugin and it worked.

  1. add these two packages to your devDependencies in package.json:
"terser-webpack-plugin-legacy": "1.2.3",
"webpack-merge": "4.2.1"
  1. in your gulpfile.js, add the following two imports:
const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin-legacy');
  1. in your gulpfile.js, insert the following custom configuration above build.initialize(gulp);:
build.configureWebpack.setConfig({
  additionalConfiguration: function (config) {
    let newConfig = config;
    config.plugins.forEach((plugin, i) => {
      if (plugin.options && plugin.options.mangle) {
        config.plugins.splice(i, 1);
        newConfig = merge(config, {
          plugins: [
            new TerserPlugin()
          ]
        });
      }
    });

    return newConfig;
  }
});

This way, webpack uses the terser plugin, which is compatible with ES6 and removes the UglifyJs plugin from the build chain.

@joshburnssp

This comment has been minimized.

Copy link
Author

commented Mar 22, 2019

Great, thanks nsoeth :)

@marcDeSantis

This comment has been minimized.

Copy link

commented Apr 3, 2019

@nsoeth your comment helped save the day for me as I was working on an Application Customizer. It worked locally, and then puked on Uglify when I tried to build for deployment.

I am using VueJS in my SPFx app, so I had to take a slightly different approach so that I didn't blow away other gulp configurations I already had in the file:

    // 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
        })
      }
    })
@BlueBird67

This comment has been minimized.

Copy link

commented May 1, 2019

@marcDeSantis Hello, could you please explain more where you put your code for Vuejs to work on shipping? Thanks.

@jlochan

This comment has been minimized.

Copy link

commented May 10, 2019

many thanks, this was driving me crazy after updating to latest

I know this is old and you solved your issue, but I ran into the same issue after upgrading to 1.8.0 and wanted to share my solution.

The problem was, that I had npm packages, that uses ES6 code. And UglifyJS wasn't able to compile ES6. I basically swapped UglifyJS for the TerserPlugin and it worked.

1. add these two packages to your devDependencies in package.json:
"terser-webpack-plugin-legacy": "1.2.3",
"webpack-merge": "4.2.1"
1. in your gulpfile.js, add the following two imports:
const merge = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin-legacy');
1. in your gulpfile.js, insert the following custom configuration above `build.initialize(gulp);`:
build.configureWebpack.setConfig({
  additionalConfiguration: function (config) {
    let newConfig = config;
    config.plugins.forEach((plugin, i) => {
      if (plugin.options && plugin.options.mangle) {
        config.plugins.splice(i, 1);
        newConfig = merge(config, {
          plugins: [
            new TerserPlugin()
          ]
        });
      }
    });

    return newConfig;
  }
});

This way, webpack uses the terser plugin, which is compatible with ES6 and removes the UglifyJs plugin from the build chain.

@markyroden

This comment has been minimized.

Copy link

commented Jun 12, 2019

@nsoeth - THANK YOU - this also solved an unrelated issue we were having which was causing an uglify issue

[15:03:34] Starting subtask 'webpack'...
[15:03:49] Error - [webpack] 'dist':
list-view-demo-webpart-web-part.js from UglifyJs
Unexpected token: punc (() [list-view-demo-webpart-web-part.js:962,7]

As far as I can tell this should not be happening with the current version of webpack and the uglify plugin, but it was. Your solution solved the problem and allowed us to move past it.

@marcDeSantis

This comment has been minimized.

Copy link

commented Jun 13, 2019

Hello, could you please explain more where you put your code for Vuejs to work on shipping? Thanks.

@BlueBird67 sorry - I just saw this. Here is the gulpfile: https://gist.github.com/marcDeSantis/ac0493f92cea8aac74aa256ffbda9eea

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.