Syntax error on build with docker

[Mighty683]

Do you want to request a feature, report a bug or ask a question? Bug What is the current behavior? Outputed JS file from webpack build contains error in toString function

 __webpack_exports__["default"] = ({
      id: "user-usage",
      viewBox: "0 0 38 37",
      url: __webpack_require__.p + "sprite55a0357bc55085e0ec6fce02d56198ee.svg#user-usage",
      toString: function () {
        return t);his.url;
      }
    }

What is the expected behavior?

Proper JS output file.

Please tell us about your environment:

• Node.js version: 10.13
• webpack version: 4
• svg-sprite-loader version: 4.1.6
• OS type & version: Docker image node:10.13

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

This bug is present only when I try to build app inside docker container, on plain linux machine it works fine.

Workaround: Set esModule config option to false.

[deadstar2011]

Do you want to request a feature, report a bug or ask a question? Bug What is the current behavior? Outputed JS file from webpack build contains error in toString function

 __webpack_exports__["default"] = ({
      id: "user-usage",
      viewBox: "0 0 38 37",
      url: __webpack_require__.p + "sprite55a0357bc55085e0ec6fce02d56198ee.svg#user-usage",
      toString: function () {
        return t);his.url;
      }
    }

What is the expected behavior?

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. 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

If this is a feature request, what is motivation or use case for changing the behavior?

Please tell us about your environment:

• Node.js version: 10.13
• webpack version: 4
• svg-sprite-loader version: 4.1.6
• OS type & version: Docker image node:10.13

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

This bug is present only when I try to build app inside docker container, on plain linux machine it works fine.

Hi. did u find the way to fix it? i have similar problem:

ERROR in chunk common [initial] js/common.min.js /data/node_modules/babel-loader/lib/index.js??ref--5!/data/src/modules/header/index/index.js 2ae6a7272a7e141c17cf5ce51a84b06e Unexpected token (8:2) | return this.url; | } | ); } SyntaxError: /data/node_modules/babel-loader/lib/index.js??ref--5!/data/src/modules/header/index/index.js 2ae6a7272a7e141c17cf5ce51a84b06e Unexpected token (8:2) | return this.url; | } | ); } at Parser.pp$4.raise (/data/node_modules/acorn/dist/acorn.js:2825:15) at Parser.pp.unexpected (/data/node_modules/acorn/dist/acorn.js:689:10) at Parser.pp.expect (/data/node_modules/acorn/dist/acorn.js:683:28) at Parser.pp$3.parseObj (/data/node_modules/acorn/dist/acorn.js:2459:14) at Parser.pp$3.parseExprAtom (/data/node_modules/acorn/dist/acorn.js:2246:19) at Parser.pp$3.parseExprSubscripts (/data/node_modules/acorn/dist/acorn.js:2089:21) at Parser.pp$3.parseMaybeUnary (/data/node_modules/acorn/dist/acorn.js:2066:19) at Parser.pp$3.parseExprOps (/data/node_modules/acorn/dist/acorn.js:2010:21) at Parser.pp$3.parseMaybeConditional (/data/node_modules/acorn/dist/acorn.js:1993:21) at Parser.pp$3.parseMaybeAssign (/data/node_modules/acorn/dist/acorn.js:1968:21) at Parser.pp$3.parseParenAndDistinguishExpression (/data/node_modules/acorn/dist/acorn.js:2321:30) at Parser.pp$3.parseExprAtom (/data/node_modules/acorn/dist/acorn.js:2230:43) at Parser.pp$3.parseExprSubscripts (/data/node_modules/acorn/dist/acorn.js:2089:21) at Parser.pp$3.parseMaybeUnary (/data/node_modules/acorn/dist/acorn.js:2066:19) at Parser.pp$3.parseExprOps (/data/node_modules/acorn/dist/acorn.js:2010:21) at Parser.pp$3.parseMaybeConditional (/data/node_modules/acorn/dist/acorn.js:1993:21) at Parser.pp$3.parseMaybeAssign (/data/node_modules/acorn/dist/acorn.js:1968:21) at Parser.pp$1.parseVar (/data/node_modules/acorn/dist/acorn.js:1228:26) at Parser.pp$1.parseVarStatement (/data/node_modules/acorn/dist/acorn.js:1092:10) at Parser.pp$1.parseStatement (/data/node_modules/acorn/dist/acorn.js:842:19) at Parser.pp$1.parseTopLevel (/data/node_modules/acorn/dist/acorn.js:746:23) at Parser.parse (/data/node_modules/acorn/dist/acorn.js:553:17) at Function.parse (/data/node_modules/acorn/dist/acorn.js:576:37) at Function.parse (/data/node_modules/webpack/lib/Parser.js:2396:22) at ConcatenatedModule.source (/data/node_modules/webpack/lib/optimize/ConcatenatedModule.js:670:19) at ModuleTemplate.render (/data/node_modules/webpack/lib/ModuleTemplate.js:54:32) at /data/node_modules/webpack/lib/Template.js:233:28 at Array.map (<anonymous>) at Function.renderChunkModules (/data/node_modules/webpack/lib/Template.js:230:30) at JavascriptModulesPlugin.renderJavascript (/data/node_modules/webpack/lib/JavascriptModulesPlugin.js:159:34) at Object.render (/data/node_modules/webpack/lib/JavascriptModulesPlugin.js:107:14) at Compilation.createChunkAssets (/data/node_modules/webpack/lib/Compilation.js:2172:29) at /data/node_modules/webpack/lib/Compilation.js:1397:10 at AsyncSeriesHook.eval [as callAsync] (eval at create (/data/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1) at AsyncSeriesHook.lazyCompileHook (/data/node_modules/tapable/lib/Hook.js:154:20) at Compilation.seal (/data/node_modules/webpack/lib/Compilation.js:1342:27) Unexpected ); then im using: new SpriteLoaderPlugin()

with new SpriteLoaderPlugin({plainSprite: true}) its build fine inside docker container.

npm run build at host system work perfectly

I use node 12.13.0 npm 6.9.0 alpine linux 3.9 webpack 4.41.2 svg-sprite-loader 4.1.6 @yaegor @joearasin @geshido @vaclav @denofevil @kisenka

[Mighty683]

@deadstar2011 Try also setting esModule: false in config.

https://github.com/JetBrains/svg-sprite-loader#es-module

[deadstar2011]

@Mighty683 thx very much! its save my day

[Ariane-B]

Very similar issue here, also using Docker, though with node 14.15 and Buster in my Docker image.

My error looks like this:

error in js/app.573b1387.js

/app/node_modules/cache-loader/dist/cjs.js??ref--12-0!/app/node_modules/thread-loader/dist/cjs.js!/app/node_modules/babel-loader/lib/index.js!/app/node_modules/eslint-loader/index.js??ref--13-0!/app/src/components/IconSprite/spriteIcons.js 1eff572b8317330ccf76577a1f8fe70e
Unexpected token (6:5)
|        url: "/img/" + "icon-sprite.svg?hash=fa27d68e11a8f1dcd9be9e7fe9cc2ab1#sprite-icon-account",
|        toString: function () {
|       );   return this.url;
|        }
|    }

I'm not entirely sure of the process behind the issue, but I suspect it may be related to how the plugin exports strings as code to be evaluated. The code being written on Windows; being run in Docker; through WSL; with Babel; inside another Linux distro that's run in Docker... I've got a strong feeling there's a step in there that evaluates the code wrong in some conditions because it's actually a string.

That seems a little irresonsible, and not very logical, to me. Why would you "generate an export" if you can just... export the right thing, and let code interpreters do their job? I don't think I've ever seen another module do this.

An example of a string exported as code can be found here:

https://github.com/JetBrains/svg-sprite-loader/blob/3f5882336b6e42cf4d20a4f38a1135f74d6a6350/lib/runtime-generator.js#L27

That said, using esModule: false seems to solve the issue... but it sure seems to me that we're going around the bug with our eyes closed rather than fixing the root issue.

[skrivanos]

Experiencing something very similar in Docker (image: node:14-slim) when using extract mode and building via NextJS:

#23 310.6 static/chunks/92d03943bc988bacafb51dd19a33cbae4f138d8e.e7a3c039c10eb1c73c6d.js from Terser
#23 310.6 Unexpected token: punc ()) [static/chunks/92d03943bc988bacafb51dd19a33cbae4f138d8e.e7a3c039c10eb1c73c6d.js:1840,23]

I can confirm that esModule: false also solves this case but I am worried about the implications of what @Ariane-B said.

[Ariane-B]

@skrivanos I ended up using external-svg-sprite-loader. It might be an option for you, regardless of whether JetBrains ever fixes this. It works almost the same as this one, but it's written in a very clear way that doesn't worry me at all. Options are also much less confusing.

Keep in mind though that the latest version only works with the latest Webpack. If you're stuck with Webpack 4, you'll have to use version 6.

[jslag]

I'm seeing the same problem, with a project locally on MacOS. The esModule: false workaround addresses it, thankfully.