ERROR in ...app.bundle.js from UglifyJs - Unexpected token: punc ())

[joepagan]

Do you want to request a feature, report a bug or ask a question?
Question/potential bug?

What is the current behavior?
Getting a build error on production mode during the build on CircleCI, this does not happen when I run the same task on MacOS, from what I can see they're using a node:10.15 docker container, it returns as follows:

ERROR in resources/javascript/app.bundle.js from UglifyJs
Unexpected token: punc ()) [./node_modules/svg-sprite-loader/lib/loader.js??ref--7-0!./node_modules/svgo-loader??ref--7-1!./frontend/svg-sprites/base-triangle.svg:7,6][resources/javascript/app.bundle.js:577,6]

It is as if UglifyJs is trying to parse my SVG files even though it specifically is not set to do that in my webpack common file (shown further down).

What is the expected behavior?
No build errors

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.
I know you want a test repo, though I cannot actually reproduce this locally, I can of course set one up if nothing comes to mind though I am not sure if my test repo will even break in this scenario...

The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code).
It you don't want to create a repository - create a gist with multiple files

Please tell us about your environment:

• Node.js version: ? 10.15
• webpack version: ? 4.28.3
• svg-sprite-loader version: 4.13
• OS type & version: MacOS Mojave 10.14.2

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
In my app entry point I have:

const svgFiles = require.context('../svg-sprites', false, /\.svg$/);
svgFiles.keys().forEach(svgFiles);

in the webpack config:

/*
      * SVG Sprite
      */
      {
        test: /\.svg$/,
        include: path.resolve('./frontend/svg-sprites'),
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              extract: true,
              spriteFilename: '../templates/_sprites/sprite.svg',
              symbolId: 'sprite-[name]',
            },
          },
          {
            loader: 'svgo-loader',
            options: svgoOptions,
          },
        ],
      },

I appreciate you may not want to fix this if you are working on the newer svg extraction tool though if anything comes to mind I would be very grateful.

Thanks for your hard work.

[ChrisCampbellCodes]

Hi @joepagan ,

I was having the same issue and found a solution mentioned in #337 , setting 'esModule: false,' seems to make the build work again. Seems like an ok workaround for now until the project gets updated with a proper fix.

Also to clarify the issue is that invalid JS is being generated in the build, and when terser / uglifyjs tries to minify the JS it then fails due to the invalid code.

[joepagan]

Thanks @ChrisCampbell88 !

[prosv]

I have the same issue and esModule:false help

[joepagan]

A bit late to testing this, but, it looks like esModule:false worked!

[mauricesnip]

Even today, explicitly setting esModule to false fixed the issue for me in a somewhat identical setup using require.context(). Thanks for the heads up @ChrisCampbellCodes!

FWIW, some of the versions used:

• "webpack": "^5.85.0"
• "@symfony/webpack-encore": "^4.3.0"
• "svg-sprite-loader": "^6.0.11"