How to connect native bootstrap 5 to nuxt.js?

Question

Bootstrap

Hello
, I am making a project on nuxt.js

, here is its 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: {},

}

in package.json like this

"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"
  }

accordingly, I have the commands from the box
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",

when I develop, I clean up "npm dev" and went to change files - everything works it
’s good for me to compile the project for sale - I see an error and it’s more likely to run it, it’s
going to nuxt build, it’s without errors,

but when I run nuxt start I see this

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

As I understand it, node.js crawls into the bootstrap.js file for some reason, it tries to initialize it, and inside there is a reference to the document variable, but node.js does not have such a value -

I can’t figure out how to fix the error and why in dev mode this error I do not see?

contents of plugins/bootstrap.js ps: from bootstrap, in addition to styles, I also use modal, collapse, tooltop.... I initialize them via JS (not data-attr) everything works as I need, but only in dev mode...
import bootstrap from 'bootstrap';

Answer 1

up