Not compatible with `strict mode` in IE

Not seeing a Contributing file or issue template so I’ll do my best to be thorough.

OS: Windows 10 Browser: IE 11 Error: SyntaxError: Multiple definitions of a property not allowed in strict mode

Stack Trace:

SyntaxError: Multiple definitions of a property not allowed in strict mode
   at ./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-svg-inline-loader/src/index.js?!./src/js/templates/component.vue?vue&type=template&id=1d640f16&scoped=true& (http://localhost:3000/components.min.js:71:1)
   at __webpack_require__ (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:838:12)
   at fn (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:130:13)
   at eval code (eval code:2:22)
   at ./src/js/templates/component.vue?vue&type=template&id=1d640f16&scoped=true& (http://localhost:3000/components.min.js:201:1)
   at __webpack_require__ (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:838:12)
   at fn (http://localhost:3000/app.min.js?0e8ad4e4b2f26f53c17b:130:13)
   at eval code (eval code:2:22)
   at ./src/js/templates/component.vue (http://localhost:3000/components.min.js:177:1)
   at __webpack_require__ (http://localhost:3000/app.min.js?0e8"

Steps to replicate:

1. Use svg-inline attribute on multiple tags in a single component or Webpack chunk file.
2. Set output chunks to use strict mode. In my case, I’m using babel and core-js which inject use strict automatically.
3. Open application with affected component in IE.

The affected component does not render, but others do. This issue is not present in any other browser, but occurs in IE anytime the plugin is used more than once per chunk in Webpack. When SVGs are embedded manually into components, the issue goes away. We need to support IE so I had to remove the plugin for now, but obviously embedding SVGs manually isn’t ideal so I’d appreciate if someone could look into this.

If I were to speculate this seems to create multiple instances (1 for each SVG) with the same identifier when compiled by Webpack, but I’m not 100% certain if I’m on the right track.

[funkybunch]

Thanks for the follow-up @oliverfindl, and sorry for the delay. We were able to resolve it on our end - all were issues with how Adobe Illustrator was exporting our SVGs. Some tweaks to the export settings got it all working properly.

If others run into this issue here is what we did to resolve it:

1. We found SVGs exported from Adobe Illustrator included XML definitions and IDs that cause issues when you try to embed them through an automated embed process, like this plugin. Specifically we had several SVGs with id="Layer_1" because Illustrator injects it automatically by default. This can be changed in Illustrator if you don’t want to manually remove it every time you use a new SVG in your code. (File->Export->Export for Screens->[Set Format to SVG in lower right]->[Click cog/gear icon above format section]->SVG->Change Object IDs: Unique)
2. Illustrator would also add a <style> tag to the SVG file which Webpack in particular doesn’t like. It can also inadvertently affect your other styles if there is any overlap in classes - so its best to avoid it altogether. You can also resolve this in Illustrator’s export settings. (File->Export->Export for Screens->[Set Format to SVG in lower right]->[Click cog/gear icon above format section]->SVG->Change Styling: Presentation Attributes)
3. Lastly, files exported using Illustrator’s default settings include XML definitions. You’ll get an error if XML definitions or comments are present. By default, Illustrator exports both. You’ll need to enable minification to prevent Illustrator from injecting these. (File->Export->Export for Screens->[Set Format to SVG in lower right]->[Click cog/gear icon above format section]->SVG->Check the “Minify” checkbox)

Hope others find this useful.

[oliverfindl]

Thanks for your feedback!

One more hint, maybe it could be solved with properly configuring SVGO in loader options.

Anyway, thanks for your contribution to this project.