Как подключить нативный bootstrap 5 к nuxt.js?

Question

Александр Панков @PankovAlxndr

Fullstack web developer

Как подключить нативный bootstrap 5 к nuxt.js?

Делаю проект на nuxt.js.

nuxt.config.js

export default {

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Проект',
    htmlAttrs: {
      lang: 'ru'
    },
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: ''}
    ],
    link: [
      {rel: 'icon', type: 'image/png', href: '/favicon.png'}
    ]
  },


  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    {src: '~/assets/css/common.scss', lang: 'sass'}
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    {src: '~/plugins/bootstrap.js', mode: 'client'}
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    '@nuxtjs/fontawesome',
  ],

  fontawesome: {
    icons: {
      solid: true,
      regular: true,
      brands: true
    }
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ['@nuxtjs/axios', '@nuxtjs/proxy', 'cookie-universal-nuxt'],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},

}

package.json

"dependencies": {
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/proxy": "^2.1.0",
    "@popperjs/core": "^2.9.2",
    "bootstrap": "^5.0.1",
    "cookie-universal-nuxt": "^2.1.5",
    "core-js": "^3.16.0",
    "moment": "^2.29.1",
    "nuxt": "^2.15.7",
    "popper.js": "^1.16.1",
    "reset-css": "^5.0.1",
    "vue-cool-lightbox": "^2.7.4",
    "vue-loading-skeleton": "^1.1.9",
    "vue-slick-carousel": "^1.0.6",
    "vue-yandex-maps": "^0.10.12"
  },
  "devDependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@nuxt/types": "~2.15.0",
    "@nuxtjs/fontawesome": "^1.1.2",
    "autoprefixer": "^10.3.1",
    "fibers": "^5.0.0",
    "postcss": "^8.3.6",
    "postcss-loader": "^4.2.0",
    "sass": "^1.36.0",
    "sass-loader": "^10.1.1"
  }

Соответственно у меня есть команды из коробки:

"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",

Когда я разрабатываю, т.е. набираю "npm dev" и пошел менять файлы - все работает хорошо.
Стоит мне собрать проект на прод - вижу ошибку и не могу запустить его.
Точнее собирается nuxt build он без ошибок.
Но когда запускаю nuxt start, то вижу такое:

ERROR  document is not defined 

  at node_modules/bootstrap/dist/js/bootstrap.js:912:19
  at node_modules/bootstrap/dist/js/bootstrap.js:7:83
  at Object.<anonymous> (node_modules/bootstrap/dist/js/bootstrap.js:10:2)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at n (node_modules/jiti/dist/v8cache.js:2:2472)
  at node_modules/vue-server-renderer/build.prod.js:1:77944

Как я понимаю, node.js лезет в файл bootstrap.js зачем-то его старается инициализировать, а там внутри есть обращение к переменной document, но у node.js такого значения нет - ошибка.

Не могу понять как исправить и почему в dev режиме данной ошибки я не вижу.

Содержимое plugins/bootstrap.js:

import bootstrap from 'bootstrap';

P.S.: из бутстрапа помимо стилей я использую еще и modal, collapse, tooltop...
Инициализирую их через JS (не data-attr), все работает как мне надо, но только в dev режиме...