Vue-svg-loader: loader version 0.12.0 doesn't work in Edge and ie11

[strukove]

Hi guys,
I had problems with latest version crashing in ie11 and Edge.
Errors were:
ie11 - "Expected ':' error"
Edge - "Expected identifier, string or number"
I switched to version 0.11.0 and it works now.

P.S.
I use vue cli 3 setup. I wrote "import SearchIcon from '...path'" and it broke ie. When I removed this code issue disappeared.

[honzabilek4]

Confirming issue also on Safari 9.3.

[honzabilek4]

Basically, the problem is that the generated component code contains const keywords even after the build process. I believe that the problem is actually in the underlying repository which is not being transpiled. For example here https://github.com/visualfanatic/svg-to-vue/blob/master/index.js#L6 the const keyword remains in the output code.

[terrymun]

You just need to chain babel-loader to vue-svg-loader: this fix proposed in a separate issue worked perfectly fine for me: https://github.com/visualfanatic/vue-svg-loader/issues/63#issuecomment-463114598

[aegorx]

@honzabilek4

I think you need this

vue-cli 3
https://cli.vuejs.org/config/#transpiledependencies

[cvn]

Thanks @terrymun, the solution you linked to worked for me.

The error I was seeing was SCRIPT1003: Expected ':'

Does anyone know if this was an intentional change in 0.12.0? If so, I'd be happy to make a PR to add the fix to the readme.

[strukove]

You just need to chain babel-loader to vue-svg-loader: this fix proposed in a separate issue worked perfectly fine for me: #63 (comment)

Good one @terrymun, thanks) But know there is one question to developers:
Why there is no 0.12.0 release documentation but it's the latest version of npm package? Is it unstable/broken/rare?

[honzabilek4]

I believe it's still not a good idea to distribute non-transpiled code as npm dependency these days.

[mohamedhamad]

anyone have a working webpack setup for this. I'm trying to get babel-loader with svg-vue-loader + options to run
I keep getting
```Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (13:12)

11 | staticStyle,
12 | attrs = {},

13 | ...rest
| ^
```

here is my config
{ test: /\.svg$/, use:[ { loader:'babel-loader', }, { loader:'vue-svg-loader', options: { svgo: { plugins: [{ removeDimensions: false }, { removeViewBox: false }, {cleanupIDs: false}] } } }, ], },

[u12206050]

Why is this closed and what is the solution for this? We are also experiencing this problem now.

[cvn]

@u12206050 The solution is to add babel-loader to your configuration. The README has been updated, and this is now included in the examples.