Error using bootstrap-vue due to ERROR in .. from UglifyJs

Hi guys, I know there was similar issue around, but I still have this huge problem, when using individual components!

I made a fresh new Vue.js installation and installed bootstrap-vue. I want to use a very simple checkbox as an example. This is my .vue file:

<template>
  <div>
      <b-form-checkbox>checkbox</b-form-checkbox>
  </div>
</template>

<script>
  import { bFormCheckbox } from 'bootstrap-vue/lib/components';

  export default {
    name: 'app',
    components: {
      bFormCheckbox
    }
 }
</script>

Running npm run dev makes everything work like a charm. But when I try to run npm run build, I get this error:

ERROR in static/js/vendor.4461bff2d7e138e73c67.js from UglifyJs Unexpected token: punc (() [./~/bootstrap-vue/lib/mixins/form.js:3,0][static/js/vendor.4461bff2d7e138e73c67.js:210,18]

Inside my webpack.base.config.js I have the following:

 module: {
    rules: [
      // eslint-loader, vue-loader, and then
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      }

I’ve read that this error is because Babel does not transpile what’s inside node_modules. But if I add resolve('node_modules') to include array, I get tons of errors like:

ERROR in ./~/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./~/vue-style-loader!./~/css-loader?{"minimize":true,"sourceMap":true}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-1cff3f7a","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue
Module build failed: TypeError: __webpack_require__(...) is not a function

---

Now my question is - how to use bootstrap-vue as individual components? I cannot just dump the entire codebase inside, just because I need a few components. And it is already described in your documentation, that indeed you can use it as a separate module.

Well if so - how is this achievable? @pi0 @tmorehouse any help guys? Thanks in advance!

[fourpixels]

Hey @alexsasharegan thanks for the explanation! I was sure it was because of UglifyJS, as when I switched it off (comment it in webpack.prod.conf.js) - everything started working smoothly!

My main concern was that in the docs it’s stated that this is achievable and because there are no strict explanations about any problems, I thought I’m missing something.

And yes, using path.resolve(__dirname, 'node_modules/bootstrap-vue') did a great job! I somehow was foolish enough to try adding the whole node_modules (facepalm).

I saw the deprecation notice about uglify but wasn’t sure if I should change this. I’m actually writing in es2015 so it would be nice if I can make it work with harmony, but the good news is that since I can make this build and have it up and running, I can wait for it 😉 It would be nice if you can provide some ideas how this should work, but it’s not in a hurry by all means!

Lastly - it would be great if you just write some stuff to docs stating that “this isn’t going to work out of the box”. That’s the reason I said I added fresh Vue.js installation with all the boilerplate, just to be sure I’m not messing something up. Maybe even point people to here, I don’t know.

Thanks again for the explanation! Cheers!

[alexsasharegan]

Your problem here is with UglifyJS and your build system, not Bootstrap-Vue (BV). This one is a real pain right now (I’ve been dealing with it too). Sorry if I restate some of the things you’ve already mentioned, but let me give this a go:

The Problem

UglifyJS does not support es2015 yet.

Chances are, you’re minifying only on your production build, so Uglify doesn’t get used in your dev npm script. Another thing, if you’re transpiling your code using Babel (or something else), webpack is likely ignoring transpiling the contents of your node_modules directory. This means that you’re plucking components out of BV in raw es2015, but not transpiling them to es5 before they hit UglifyJS, thus creating the error you see.

Solutions

We can handle this in one of two ways:

• Get webpack and babel to transpile the BV source code
  • Pros: ship your app in es5
  • Cons: doesn’t fix the UglifyJS problem for the future
• Upgrade UglifyJS to a harmony version (supports es2015)
  • Pros: ship your app in es2015
  • Cons: unless your very progressive, es2015 is too high a target compilation; not stable yet

Webpack Config Solution

This is likely the best solution, as most people need to ship an es5 compatible app. Also, UglifyJS will eventually become es2015 compatible. I would wager this happens with plenty of time before developers start shipping es2015 target apps.

The key here is the include property. This is essentially a whitelist directive to the plugin.

const path = require("path")

{
  module: {
    rules: [
      {
         test: /\.js$/,
         include: [
           path.resolve(__dirname, "src") // your application source code root
           path.resolve(__dirname, 'node_modules/bootstrap-vue'),
         ],
         loader: "babel-loader"
       },
    ]
  }
}

UglifyJS Harmony Solution

Things appear to be moving fast in the uglifyjs plugin system. I believe the es2015 version has moved to the master version on npm: https://www.npmjs.com/package/uglify-js

Install the webpack uglifyjs plugin and the es2015 uglifyjs lib:

npm i -D uglifyjs-webpack-plugin && uglify-js

Now you can use the discrete uglify plugin (I failed when I used the plugin buried in webpack.optimize), and it will pick up the new version of uglifyjs you just installed.

const UglifyJSPlugin = require("uglifyjs-webpack-plugin")

{
  plugins: [
    UglifyJSPlugin(options)
  ]
}