Laravel Mix, Bootstrap Vue, difference between production and dev builds

I have a Vue application in Laravel using Mix to build.

My javascript includes a

import BootstrapVue from 'bootstrap-vue';

Vue.use(BootstrapVue);

My webpack.mix.js is minimally modified.

The application uses a b-dropdown with b-dropdown-items.

The drop down works correctly in all IE 11 and Microsoft Edge when I create the dev build (npm run dev). However, when I create a production build (npm run prod), Edge fails with a TypeError: Invalid Calling Object when a user clicks the drop down.

This doesn't happen in Firefox or Chrome. The internet suggests that it might have to do with use strict somewhere in Bootstrap Vue.

Does anyone have any suggestions?

jlrdw

6 years ago

Level 75

A little older but have a look: https://github.com/vuejs/vue/issues/4465

munazzil

6 years ago

Level 13

First are you check with below command in CMD and access the given url,

       php artisan serve

After Check with below Config in your app.js as like below,

      require('./bootstrap');

      window.Vue = require('vue');

wagramdeveloper

6 years ago

Level 1

Further research shows that this was a known bug in the terser-webpack-plugin that was fixed over a year ago.

The terser-webpack-plugin is now at version 2.1.3. However, laravel, probably through laravel-mix is pulling in version 1.4.1.

Please or to participate in this conversation.