bootstrap-vue: Babel Errors in nuxt generate 2.14

Hi, in the docs it is said the icons shouldn’t be loaded by default, but I get that error the same, both if I set

bootstrapVue: {
    icons: false  
}

and if I set no bootstrapVue property and just load the module. Do you know why?

@amdp BootstrapVue

Usage BootstrapVue icons ARE not automatically installed when using BootstrapVue in your project, you must explicitly include them.

I use them like so: // nuxt.config.js

modules: [
    // Doc: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
]

// icons.js in plugin folder

import Vue from 'vue'
import { 
    BootstrapVue, 
    BIcon, 
    BIconInfoSquare, 
    BIconInfoSquareFill,
} from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.component('BIcon', BIcon)
Vue.component('BIconInfoSquare', BIconInfoSquare)
Vue.component('BIconInfoSquareFill', BIconInfoSquareFill),

And to avoid the above mentioned warning: // config.nuxt.js

build: {
    babel: {
      compact: true
    }
  }

Hope it helps

Same problem as @amdp. I haven’t enabled the icons at all, and I’m seeing the build error. All I did was add bootstrap-vue/nuxt to modules

Reopen, still an issue !

If you want to remove icons plugin from your nuxt app remove icons component and directive from global components in nuxt.config.js file and just add components you need, for example:

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    icons: false,
    components: ['BContainer', 'BRow', 'BCol', 'BFormInput', 'BButton', 'BTable', 'BModal'], // not include BootstrapVueIcons component
    directives: ['VBModal', 'VBPopover', 'VBTooltip', 'VBScrollspy']
  }
}

same here

Bump, still a big issue

any solution for this ?

Same problem as @amdp. I haven’t enabled the icons at all, and I’m seeing the build error. All I did was add bootstrap-vue/nuxt to modules

Same issue - nuxt.config.js

I believe the icons tree-shaking works most of the time, except under certain circumstances. For example, I found that if I include SkeletonPlugin, the icons tree-shaking would fail, so I import BSkeleton component only and it works.

The following is my configuration using Nuxt.

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    components: ['BSkeleton', 'BIconSearch'],
    componentPlugins: [
      'NavbarPlugin', 
      'LayoutPlugin', 
      'ButtonPlugin', 
      // 'SkeletonPlugin' 
    ]
  }
}

Source: https://code.luasoftware.com/tutorials/vuejs/bootstrapvue-icons-import-specific-icon-only/

I resolved this issue by patch icons.

The steps are download this repository, remove unused icons, generate icons.js, and copy icons.js to node_modules.

mkdir node_modules/_tmp
cd node_modules/_tmp
curl -L https://github.com/bootstrap-vue/bootstrap-vue/archive/refs/tags/v2.21.2.tar.gz -o bootstrap-vue.tar.gz
tar -xzf bootstrap-vue.tar.gz
cd bootstrap-vue-2.21.2
npm install --also=dev
mv node_modules/bootstrap-icons/icons node_modules/bootstrap-icons/icons_old
cd node_modules/bootstrap-icons/icons_old
mkdir -p ../icons
mv calendar.svg calendar-fill.svg chevron-bar-left.svg chevron-double-left.svg \
  chevron-up.svg chevron-down.svg chevron-left.svg chevron-right.svg circle-fill.svg \
  clock.svg clock-fill.svg dash.svg person-fill.svg plus.svg star.svg star-fill.svg \
  star-half.svg x.svg ./icons
cd ../../..
sh scripts/build.sh
cp src/icons/icons.js src/icons/plugin.js src/icons/icons.d.ts src/icons/package.json ../../bootstrap-vue/src/icons/

Icons listed in above are used by internal components of bootstrap-vue, if you need more icons include them to the command.

After optimize the bundle size is reduced about 500kb.

And I think this issue deserve to reopen, include 500kb unused resources in production app is really bad, even most frontend developers wont give a sh’t of performance.

The problem is in Bootstrap-Vue. I forced webpack 5 to explicitly not load the stuff I wasn’t using (I’m transpiling it explicitly):

  'bootstrap-vue$': 'bootstrap-vue/src/index.js',
 // #1173: Stub out large unused Bootstrap-Vue icons file.
 [path.resolve(__dirname, '../node_modules/bootstrap-vue/src/icons/icons.js')]: false,
 [path.resolve(__dirname, '../node_modules/bootstrap-vue/src/icons/plugin.js')]: false,

That leaves with no icons at all, however, even if you import those you want. However you can efficiently include just those same icons which you actually use without Boostrap Vue.

It seems we include a small part of icons.js when icons:false which is not a problem.

it IS problem.

@hassan-jahan I checked out your example project and it works as it should. As our documentation states here are icons only opt-in and not included by default.

Bundle size with no bootstrapVue Nuxt.js config:

Bundle size with icons: true in bootstrapVue Nuxt.js config:

See the tree shaking section to learn how to reduce the general bundle size.

This is not an error, it is just a note ([BABEL] Note: ...) from Babel’s compact option option.

Since the icons.js file is quite big (> 500KB), all optional newlines and whitespace will be omitted. When you wan’t to get rid of the note, set the compact option to either true or false.

@PixsaOJ the problem is the final bundle size is huge even if no icons are used. babel: compact just hides the warning. I removed bootstrap-vue and just linked in the bootstrap CSS and JS, and it shaves of ~500KB from the production build.

build: { babel: { compact: true } } and

modules: [
    [
     'bootstrap-vue/nuxt',
         {
             icons: false
         }
    ],
    ...

Seems to work. Just make sure you have the latest packages.

The problem is in Bootstrap-Vue. I forced webpack 5 to explicitly not load the stuff I wasn’t using (I’m transpiling it explicitly):

  'bootstrap-vue$': 'bootstrap-vue/src/index.js',
 // #1173: Stub out large unused Bootstrap-Vue icons file.
 [path.resolve(__dirname, '../node_modules/bootstrap-vue/src/icons/icons.js')]: false,
 [path.resolve(__dirname, '../node_modules/bootstrap-vue/src/icons/plugin.js')]: false,

That leaves with no icons at all, however, even if you import those you want. However you can efficiently include just those same icons which you actually use without Boostrap Vue.

Where I put this please ? I’m not so familiar with webpack.

This is still an issue. Just after including the Nuxt module without any usage.

 modules: [
    // https://go.nuxtjs.dev/bootstrap

    'bootstrap-vue/nuxt',
  ],
  bootstrapVue: {
    icons: false,
    componentPlugins: [],
    directivePlugins: [],
    components: [],
    directives: [],
  },

This is still an issue, please reopen it

The warning will show up independently wether you import/register all or just some of the icons. Relevant for the note is the source file (icons.js) and that stays the same.

Please take a look at the Nuxt.js documentation for the babel build property on how to configure it properly.