No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

Question

I try to start a brand new Vue project and want to add Bootstrap to it.

All is good, but when i try to launch it, i have this error :

node_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

i started with npm init vue@latest after that i done an npm install. To install bootstrap i made npm install bootstrap bootstrap-vue. If at this point i made an npm run all is good but when i try to import bootstrap in my project i get the error. Here is how i use it :

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { BootstrapVue } from 'bootstrap-vue'

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

Vue.use(BootstrapVue)

app.use(createPinia())
app.use(router)

app.mount('#app')

and here is the trace of the error :

 npm run dev

> test@0.0.0 dev C:\Users\ycolin\projet\test
> vite


  VITE v4.0.4  ready in 2204 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
X [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

    node_modules/bootstrap-vue/esm/vue.js:13:7:
      13 │ import Vue from 'vue';
         ╵        ~~~

X [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

    node_modules/bootstrap-vue/esm/vue.js:13:7:
      13 │ import Vue from 'vue';
         ╵        ~~~

X [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

    node_modules/bootstrap-vue/esm/vue.js:13:7:
      13 │ import Vue from 'vue';
         ╵        ~~~

X [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

    node_modules/bootstrap-vue/esm/vue.js:13:7:
      13 │ import Vue from 'vue';
         ╵        ~~~

X [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

    node_modules/bootstrap-vue/esm/vue.js:13:7:
      13 │ import Vue from 'vue';
         ╵        ~~~

X [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

    node_modules/bootstrap-vue/esm/vue.js:13:7:
      13 │ import Vue from 'vue';
         ╵        ~~~

X [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

    node_modules/portal-vue/dist/portal-vue.esm.js:13:7:
      13 │ import Vue from 'vue';
         ╵        ~~~

(node:28520) UnhandledPromiseRejectionWarning: Error: Build failed with 7 errors:
node_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"
node_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"
node_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"
node_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"
node_modules/bootstrap-vue/esm/vue.js:13:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"
...
    at failureErrorWithLog (C:\Users\ycolin\projet\test\node_modules\esbuild\lib\main.js:1604:15)
    at C:\Users\ycolin\projet\test\node_modules\esbuild\lib\main.js:1056:28
    at runOnEndCallbacks (C:\Users\ycolin\projet\test\node_modules\esbuild\lib\main.js:1476:61)
    at buildResponseToResult (C:\Users\ycolin\projet\test\node_modules\esbuild\lib\main.js:1054:7)
    at C:\Users\ycolin\projet\test\node_modules\esbuild\lib\main.js:1166:14
    at responseCallbacks.<computed> (C:\Users\ycolin\projet\test\node_modules\esbuild\lib\main.js:701:9)
    at handleIncomingPacket (C:\Users\ycolin\projet\test\node_modules\esbuild\lib\main.js:756:9)
    at Socket.readFromStdout (C:\Users\ycolin\projet\test\node_modules\esbuild\lib\main.js:677:7)
    at Socket.emit (events.js:400:28)
    at addChunk (internal/streams/readable.js:293:12)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:28520) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:28520) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Answer 1

BootstrapVue is now compatible with Vue 3 using @vue-compat. You can read more about it here: Vue.js 3.x initial support. Use this sandbox for reference.

Answer 2

Actually there is a workaround to use BootstrapVue with Vue 3. The only thing you need is to install https://www.npmjs.com/package/@vue/compat package as project dependency.

Answer 3

BootstrapVue is compatible with Vue 2.6.

"With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4.5 component and grid system available for Vue.js v2.6, complete with extensive and automated WAI-ARIA accessibility markup." source

You are using Vue 3. Moreover, it is still stuck in Bootstrap 4 and might be incompatible with Vite (which is most likely the case, since it loves to be incompatible with a lot of libraries). Use the bootstrap npm package instead.

( npm i bootstrap )