(Blank page) (SCRIPT1002: Syntax error vueapp.js) IN I.E 11 vueJS don't work


#1

Ambient:
Laravel 5 with vuejs

Package.json :

    {
      "private": true,
      "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
      },
      "devDependencies": {
        "axios": "^0.18",
        "babel-cli": "^6.26.0",
        "babel-preset-env": "^1.7.0",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "vue": "^2.5.17",
        "vue-analytics": "^5.16.4",
        "vue-carousel": "^0.18.0-alpha",
        "vue-router": "^3.0.2",
        "vue-tag-manager": "^0.1.2"
      },
      "dependencies": {
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-polyfill": "^6.26.0",
        "babel-preset-es2016": "^6.24.1",
        "es6-promise": "^4.2.6",
        "lodash": "^4.17.11",
        "vue-functional-calendar": "^1.3.2",
        "vue-resource": "^1.5.1",
        "vue-scrollto": "^2.13.0",
        "vue-simple-suggest": "^1.8.2",
        "vue2-google-maps": "^0.10.3"
      }
    }

Problem:

In I.E 11 VueJS not work

SCRIPT1002: Syntax error vueapp.js (33684,41)

Line with error

function fromPath(obj, path) {
    return path.split('.').reduce((o, i) => o === Object(o) ? o[i] : o, obj);
}

My .babelrc

{
  "presets": [
    ["env", {
      "useBuiltIns": true,
      "modules": false,
      "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}

My webpack.mix.js

mix.setPublicPath(’…/public_html’);

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                loader: 'babel-loader',
                options: {
                    presets: [['es2016']],
                    plugins: ["transform-vue-jsx", "transform-runtime"],
                }

            }
        ]
    }

});

mix.js('resources/js/app.js', './../public_html/js')
        .js('resources/js/vueapp.js', './../public_html/js')
        .sass('resources/sass/app.scss', './../public_html/css');

My vueapp.js

import 'babel-polyfill';
import 'es6-promise/auto';

import Vue from 'vue';
import VueRouter from 'vue-router';
import * as VueGoogleMaps from "vue2-google-maps";
import VueResource from 'vue-resource';
import VueCarousel from 'vue-carousel';
import VueScrollTo from 'vue-scrollto';
import VueAnalytics from 'vue-analytics';
import VueTagManager from "vue-tag-manager";

Vue.use(VueCarousel);
Vue.use(VueResource);
Vue.use(VueRouter);
Vue.use(VueScrollTo);
Vue.use(VueGoogleMaps, {
    load: {
        key: "xxxx"
    }
});

...

I have been looking for the solution for a long time and nothing has worked, thanks for any opinion.

In GitHub: https://github.com/vuejs/vue/issues/9758

Thanks!


IN I.E 11 vueJS don't work (Blank page) (SCRIPT1002: Syntax error vueapp.js)
#2

Where does the problematic code come from?

Is it your own or from a node_module?


#3

node module :confused: , vue-simple-suggest


#4

in your webpakc config for js files, change this:

exclude: [/node_modules/],

to this:

exclude: [/node_modules\/(?!vue-simple-suggest)/],

#5

Oh my god, thanks! I’ve been trying to fixed this out for days.

Really, thanks very much.

For the peoples with the same problem. My webpack.mix.js

const mix = require('laravel-mix');

mix.setPublicPath('../public_html');

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules\/(?!vue-simple-suggest|vue-functional-calendar)/],
                loader: 'babel-loader',
                options: {
                    presets: [['es2016']],
                    plugins: ["transform-vue-jsx", "transform-runtime"],
                }

            }
        ]
    }

});

mix.js('resources/js/app.js', './../public_html/js')
        .js('resources/js/vueapp.js', './../public_html/js')
        .sass('resources/sass/app.scss', './../public_html/css');