My Vue-cli 3 app breaks in IE and Edge

IE error: SCRIPT1028: SCRIPT1028: Expected identifier, string or number
[object Error]: {description: “Loading chunk group-site failed. (missing: http://localhost:8080/src/assets/js/group-site.95747bb1.js)”, message: “Loading chunk group-site failed. (missing: http://localhost:8080/src/assets/js/group-site.95747bb1.js)”, request: “http://localhost:8080/src/assets/js/group-site.95747bb1.js”, stack: “Error: Loading chunk group-site failed. (missing: http://localhost:8080/src/assets/js/group-site.95747bb1.js) at u (http://localhost:8080/src/assets/js/main.47f358d6.js:1:3666)”, type: “missing”}

When i trace this error, it links to the spread operator used in my ‘methods’ object.

   methods: {
        ...mapActions([
            'getProfile',
            'getEarnings'
        ])
}

My vue,config.js file looks like this:

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports ={
    runtimeCompiler: true,
    assetsDir: './src/assets',
    
    configureWebpack: {
        entry:['@babel/polyfill','./src/main.js'],
        plugins: [
          new BundleAnalyzerPlugin()
        ],
        optimization:{
          splitChunks: {
            chunks: 'all'
          }
        }
      }
}

my babel.config.js file looks like this:

module.exports = {
  presets: [
    ['@vue/app',{
      polyfills:[
        'es6.array.iterator'
      ],
      targets: {
        browsers: ["> 1%","last 2 versions","not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  plugins: ["transform-object-rest-spread"]
}

Don’t know if this helps you but IE has problems with trailing comma’s. Probably related:

I have done that , it doesnt work.

This or you’re using a reserved keywork as a property (you can pass it as a string if you don’t want to change it).

I can’t find any of those words in my object. And the error is traced to the object with the spread operator.

@pbaba maybe it is inside of your getters??

The getters are passed as strings, can they be the reason for the error?

@pbaba Not sure. But they get merged inside of your component methods, because of the spread operator. So if there are reserved properties inside this will probably cause a problem.

  methods: {
        ...mapActions([
            'getProfile',
            'getEarnings'
        ]),
        validateForm() {
            this.$validator.validateAll()
                .then((result) => {
                if (result) this.submit()
                })
                .catch(e=>{
                    this.toast.msg =  e.body.message || 'Oops! An error occured. Please try again'
                    this.toast.show = true
                })
         },
        submit() {
            this.snackbar.msg = 'preparing invoice...';
            this.snackbar.show = true;
            let form = this.form;
            this.$router.push({name:'withdrawal2' , params:{ form }})
        }
    },
    created() {
         if(this.$route.params.form){
                this.form.amount = this.$route.params.form.amount;
                this.form.pin = this.$route.params.form.pin;
            }
        this.$http.get('user/me/bank')
            .then(res=>{
                this.items = res.body.data;
            })
        this.getEarnings()
    },
    computed:{
        ...mapGetters([
            'account',
            'earnings'
        ])
    }

Even when i comment the methods out, the error moves to the computed object.

Don’t know for sure. But I think the error exists in the file where you’ve defined your getters and actions.

hmm, i really can’t find any. What kind of error am i looking for, that only stops it from working on IE

Not sure if this is correct, though it could be if your object rest spread polyfill isn’t installed correctly, but based on the error reported it is related to async components, specifically that the chunk it’s looking for doesn’t exist. I take it you’ve confirmed the file does exist? What does the related async code look like?

As a test, to see if it is the object spread operator, load up a simple page using it in IE/Edge and see if you get any errors.

Yes, the page does exist. I tried to load up another project, and then i found out when i bundle the file, it doesnt contain the spread operator in the bundled file,it is transpiled or something. It looks like this

({},a.i(o.b)(["getProfile","setPin"])

While on my code, it still looks like this,

{...Object(r["b"])(["getProfile","getEarnings"])

I think i need to add the ‘transform-object-spread’ babel plugin to the vue.config.js file

The default webpack config should take care of spread operator just fine. I suggest deleting your vue config file and seeing if it works without the manual webpack overrides.

@woodberry I tried that, no luck.

I think it has something to do with the code splitting import function, because it works ok, if i dont code split

What do your dynamic imports look like?

Actually, i still have the same issue. I think nothing gets transpiled, i tried the spread operators on a new project and they were transpiled without including anything extra.

I’ve figured it out. i actually just had to update all my dependencies.

$ npm install -g npm-check-updates
$ ncu -u
$ npm install 
1 Like