laravel-mix: IE 11 -- Invalid Character -- Bootstrap Vue -- Popover

Laravel Mix Version: 2.1.11
Node Version: 8.10.0
NPM Version: 3.5.2
OS: laravel homestead running off ubuntu 18.04

Hello.

We are having a very difficult time getting past a particular IE 11 specific error.

.babelrc

{
  "plugins": [
    "transform-es2015-template-literals"
  ],
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 2%"],
        "uglify": true
      }
    }]
  ]
}

webpack.ix.js

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

mix.js('resources/assets/js/app.js', 'public/js')
    .extract(['vue'])
    .sass('resources/assets/sass/app.scss', 'public/css')
    .sourceMaps();

app.js entry has the following at the top:

import "babel-polyfill";

window.bootstrap = require('bootstrap')
window.axios = require('axios')
window.moment = require('moment')
...

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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js  --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "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 --watch --watch-poll --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.17",
    "bootstrap": "^4.0.0",
    "bootstrap-vue": "^2.0.0-rc.1",
    "cross-env": "^5.1",
    "es6-promise": "^4.2.4",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2",
    "laravel-mix": "^2.1",
    "lodash": "^4.17.4",
    "popper.js": "^1.12",
    "vue": "^2.5.7"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-plugin-transform-es2015-template-literals": "^6.22.0",
    "moment": "^2.22.1",
    "typeahead.js": "^0.11.1"
  }
}

The following lines in a js file loaded by app.js is causing issues, and if commented out, IE11 compilation works OK

import Popover from '../directives/popover';
Vue.directive('popover', Popover);

With those Popover enabled, the following error:

SCRIPT1014: Invalid character
app.js (5235,1)

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (8 by maintainers)

Most upvoted comments

@ankurk91 thanks so much for your help.

based on what you wrote, i figured out i can do this:

import popover from '../../../../node_modules/bootstrap-vue/es/directives/popover/popover'
import Popper from 'popper.js'
import PopOver from '../../../../node_modules/bootstrap-vue/es/utils/popover.class'
import { assign, keys } from '../../../../node_modules/bootstrap-vue/es/utils/object'
import warn from '../../../../node_modules/bootstrap-vue/es/utils/warn'

bootstrap-vue provides es compiled src. seems to be working for now

jhchnc on Jul 11, 2018

You should never import from src folder. If you ever do then whitelist that module in Babel loader. This is mentioned in bootstrap Vue docs already. https://bootstrap-vue.js.org/docs

rules: [
            {
                test: /\.js$/,
                include: [ // use `include` vs `exclude` to white-list vs black-list
                    path.resolve(__dirname, "src"), // white-list your app source files
                    require.resolve("bootstrap-vue"), // white-list bootstrap-vue
                ],
                loader: "babel-loader"
            }
        ]

ankurk91 on Jul 11, 2018

@ankurk91 thanks for your comment. i’m trying to figure out the invalid character issue I’m seeing. It might simply be isolated to popper.js. thanks again.

jhchnc on Jul 11, 2018