IE11: SCRIPT1003: Expected ':'

[keithbrinks]

Hello,

I'm having a few issues getting this component working in my app. Historically, I've never been able to include it via NPM (I've had to download the .zip release and import via the source files). It would seem as of version 1.7.0, I can't do either.

My app is based on Laravel + Vue and I am using Laravel Mix 4.0.0.

Here are my issues:

Installing via npm (npm install vuejs-datatable), I import the component:

import DatatableFactory from 'vuejs-datatable'

Then add it to Vue:

Vue.use(DatatableFactory);

By default, I get a "Cannot read property 'use' of undefined" error in Google Chrome. I also get this if I import vuejs-datatable from the source files (i.e.: import DatatableFactory from './vendor/vue-datatable').

Per issue #50, I added the following to my webpack.mix.js file:

mix.webpackConfig({
    resolve: {
        alias: {
            'vuejs-datatable': 'vuejs-datatable/dist/vuejs-datatable.esm.js'
        }
    }
})

After recompiling the JavaScript, everything works in Google Chrome. However, Internet Explorer throws the following error:

SCRIPT1003: Expected ':'
File: app.js, Line: 118095, Column: 719

Here's a screenshot of that line #:

Any thoughts if I'm doing something wrong, or if it's a bug?

Thanks

[pstephan1187]

Are you importing Vue?

import Vue from 'vue'
import DatatableFactory from 'vuejs-datatable'

[keithbrinks]

Yes -- Vue is one of the first things I import in my main JS file:

import '@babel/polyfill';
import Vue from 'vue'
...
<other packages>
...
import DatatableFactory from 'vuejs-datatable'

Further down, I'm then making Vue a global variable:

window.Vue = Vue

Then further down yet is when I have this:

Vue.use(DatatableFactory)

I am importing/using other packages the same way as Datatable (such as Vuex) without any issues.

[GerkinDev]

Hey there!
Well, IE11 is a bulky piece of garbage, nothing new by saying that. To answer your question, your error is due to the shorthand method definition feature available partially since ES5.1, and fully in ES6. IE11 does not support ES6, but vuejs-datatable is using that version of the specification.
To resolve your problem, you should transcript your output for a more backward-compatible version of the spec. The most well-known tool for this is Babel. You can find plenty of resources to see how to set it up with webpack on the web.

Keep me updated ;) cheers!

---

Footnote: Really you do NOT need to use global Vue. And you should not either. If this is not working without a global, then your problem is somewhere else. It's not because it works that it is good.

[GerkinDev]

Hey there, wassup about your problem ? Have you found a way to transcript your code to ES5 ? Did that worked correctly ?

[SerGioPicconti]

Try import without vendor folder:

import DatatableFactory from 'vuejs-datatable/dist/vuejs-datatable.esm.js';
Vue.use(DatatableFactory);

[GerkinDev]

Closing the issue because of inactivity.

[GerkinDev]

BTW, duplicate of #57