0

I have been having an odd issue in Vue.js for a bit now, my application works on all browsers in my local (including IE 11). When I compile my application with npm run build and push it over to my server (which is just a CDN serving content from an S3 bucket) I get this message on my chunk-vendors.js. I have pollyfills in place that are working on my local, any ideas why it would be different once compiled and minified?

The original problem that seemed to solve this in my local was adding transpileDependencies: ['vuex-persist'], to my vue.config.release. There are so many answers online I can't make heads or tails or what could be the problem.

enter image description here

UPDATE 1: Attempted to use https://babeljs.io/docs/en/babel-plugin-transform-destructuring and still no luck. Works on my local but not compiled.

845614720
  • 756
  • 1
  • 7
  • 22
  • 1
    IE11 does not support destructuring. – Pointy Feb 24 '21 at 13:55
  • @Pointy Is a `JSON.stringify` or a `JSON.Parse` essentially a destructuring call? Edit: If that's the case how does that explain local being ok, but when compiled breaking? – 845614720 Feb 24 '21 at 14:02
  • It's the `const` declaration syntax that's the problem. If you're transpiling with Babel or something like that, you have to make sure the target is compatible with IE11. – Pointy Feb 24 '21 at 14:04
  • @Pointy Thanks for the answer. A bit new to Babel and transpiling in general... could you explain a bit more here or link any relevant material. Alternatively, I wouldn't mind chatting ! – 845614720 Feb 24 '21 at 14:06
  • Sorry I don't know much about how to use those tools, but it's a basic part of the configuration. – Pointy Feb 24 '21 at 14:07
  • @Pointy Thank you again! I'll do some Googling. – 845614720 Feb 24 '21 at 14:08
  • Have you used @babel/polyfill? You can try the accepted answers of [this thread](https://stackoverflow.com/questions/54592534/vue-cli3-lib-with-ie11-support) and [this thread](https://stackoverflow.com/questions/52056358/vue-cli-3-project-not-working-on-ie-11). If possible, could you please provide [a minimal code snippet](https://stackoverflow.com/help/minimal-reproducible-example) which can reproduce the issue? It's hard to tell what to do with only the above description. – Yu Zhou Feb 25 '21 at 06:34
  • @YuZhou Hey thanks for those! I'll give them a try. Hard to give a snippet with the minified JS. I believe it's destructuring within the multiple different places where I do something like: `import store from {store}` Also it's a head scratcher since it works on my local, but not compiled. – 845614720 Feb 25 '21 at 13:54
  • How about the issue? Is @babel/polyfill helpful? You can update if you have any new progress. – Yu Zhou Mar 01 '21 at 01:50
  • The issue is still there, works perfectly in my local but not once built for production :/ – 845614720 Mar 01 '21 at 05:06
  • @YuZhou Does this being in chunk-vendors indicate an issue with a dependency and not my own code? – 845614720 Mar 02 '21 at 14:54

1 Answers1

0

I found the answer after a few days of digging. The issue was with vuex-presist. I needed to downgrade to version ^1.8.0.

The reason for this is that the 'newer' version of vuex-presist uses an underlying npm package (flatten something or other) that causes this issue.

845614720
  • 756
  • 1
  • 7
  • 22