Cannot import single component with Nuxt

Operating system: Ubuntu Browser and version: Node v8.9.4 Bootstrap-Vue: 2.0.0-rc2 Nuxt: 1.4.0 Repo reproducing the issue: https://github.com/Okazari/bootstrap-vue-nuxt/tree/master/bootstrap-vue-nuxt

Hey, i’m runing into an issue when using Bootstrap-vue along with Nuxt : As some of my page are only using few components, i want to import them directly instead of importing the whole vue module to profit from nuxt automatic page chunks.

But when i do this in my component

import bButton from 'bootstrap-vue/es/components/button/button';

export default {
  components: {
    bButton,
  }
}

It works fine on the browser (if there is only hot-reload, or if i navigate to the concerned page through the browser) but i run into the following error when it run on the server (by refreshing the page that use the component) :

import { mergeData } from 'vue-functional-data-merge';
^^^^^^

SyntaxError: Unexpected token import

Providing a built file for each component would solve the issue but this is not the best idea (since importing multiple built components would duplicate common javascript). Any workaround ? Should i totally forgot about doing such optimization (i have the same issue with importing a component as a module btw) ?

Thanks in advance 😃 !

[rafaelmagalhaes]

has this been resolved having same problem how can i fix it ?

[saintech]

This worked for me:

// nuxt.config.js
module.exports = {
  mode: 'universal',
  '...',
  build: {
    '...',
    transpile: ['bootstrap-vue']
  }
}