Signature_pad: build error with Vue+webpack

Created on 22 Aug 2018  ·  5Comments  ·  Source: szimek/signature_pad

Problem as title,
Vue version: 2.5.15
Webpack version: 3.11.0
When npm run build:sandbox, error as below:

ERROR in 98.145f98ef3cbd11bd2670.js from UglifyJs
Unexpected token: name (Point) [./node_modules/signature_pad/dist/signature_pad.m.js:6,0][98.145f98ef3cbd11bd2670.js:15,6]

  Build failed with errors.

Most helpful comment

@kevinchung1026 Yesterday I got the same problem. I made a walkover and fixed it by adding the additional rule to my webpack.

{
        test: /\.js?$/,
        include: [/node_modules\/signature_pad/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [['env', { 'modules': false, 'targets': { 'node': 4 } }]]
            }
          }
        ],
      },

Hope it will help you too 😄

All 5 comments

It looks like you're using an old version of UglifyJS, which only handles ES5 code. Code in signature_pad.m.js uses ES6+ features. Thus, if you want to minify it using your version of UglifyJS, you need first to compile it down to ES5 using e.g. Babel. You can also use signature_pad.umd.js, which is already compiled to ES5.

@kevinchung1026 Yesterday I got the same problem. I made a walkover and fixed it by adding the additional rule to my webpack.

{
        test: /\.js?$/,
        include: [/node_modules\/signature_pad/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: [['env', { 'modules': false, 'targets': { 'node': 4 } }]]
            }
          }
        ],
      },

Hope it will help you too 😄

it's ok now, thx all

According to https://github.com/rollup/rollup/wiki/pkg.module whatever is specified in module field of package.json file should use only ES2015 module syntax, but the rest of the code expected to follow syntax of the package's minimum required version of JS environment.

Currently it's not possible to use this module out of the box with webpack (because by default it prefers module to main) (see https://webpack.js.org/configuration/resolve/#resolve-mainfields) in the same was as other modules. Thus it requires some of these custom tweaks to the building system (as pointed above) to force babel to transpile this particular module from node_modules directory to project's targets.

I guess adding browser field into package.json might be a quick workaround.

Hello!

I'm using angular 2 and old version of UglifyJS and had the same ERROR with uglifyJS + signature_pad.

I solved the problem with the help of answers above, adding new webpack rule

{ test: /\.js?$/, include: [/node_modules\/signature_pad/], use: [ { loader: 'babel-loader' } ], }

AND i had to use older babel loader with webpack 2
package.json:

"devDependencies": {
....
"babel-core": "^5.4.7",
"babel-loader": "^5.1.3"
}

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Zuldra picture Zuldra  ·  4Comments

lowe493 picture lowe493  ·  5Comments

rmmackay picture rmmackay  ·  7Comments

siggifv picture siggifv  ·  3Comments

chitgoks picture chitgoks  ·  5Comments