question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bootstrap-Vue icons breaking hot reload despite not imported

See original GitHub issue

Describe the bug

Excuse me, I’m importing only the Alert plugin but this appears in my browser console during hot reload.

VM22232 log.js:26 [HMR] Cannot apply update. Need to do a full reload!
module.exports @ VM22232 log.js:26
eval @ VM22231 dev-server.js:39
Promise.catch (async)
check @ VM22231 dev-server.js:36
eval @ VM22231 dev-server.js:55
emit @ VM22234 events.js:152
reloadApp @ VM22222 reloadApp.js:23
ok @ VM22203 localhost:28080:120
eval @ VM22206 socket.js:48
sock.onmessage @ VM22207 SockJSClient.js:63
EventTarget.dispatchEvent @ VM22208 sockjs.js:170
eval @ VM22208 sockjs.js:888
SockJS._transportMessage @ VM22208 sockjs.js:886
EventEmitter.emit @ VM22208 sockjs.js:86
WebSocketTransport.ws.onmessage @ VM22208 sockjs.js:2962



VM22232 log.js:26 [HMR] Error: Aborted because ./node_modules/bootstrap-vue/esm/icons/index.js is not accepted
Update propagation: ./node_modules/bootstrap-vue/esm/icons/index.js -> ./node_modules/bootstrap-vue/esm/index.js -> ./client/js/vue-project.ts -> ./client/js/index.ts
    at https://localhost:28080/ipack.js:820:32
    at https://localhost:28080/ipack.js:540:21
    at Array.map (<anonymous>)
    at internalApply (https://localhost:28080/ipack.js:539:54)
    at https://localhost:28080/ipack.js:516:24
    at waitForBlockingPromises (https://localhost:28080/ipack.js:471:55)
    at https://localhost:28080/ipack.js:514:22

Steps to reproduce the bug

  1. Add this to the project:
import Vue from 'vue';
import { AlertPlugin } from 'bootstrap-vue';

// https://bootstrap-vue.org/docs/#component-groups-and-directives-as-vue-plugins
Vue.use(AlertPlugin);
  1. Run hot reload.

  2. Above error message gets displayed in browser console…

  3. Hot reload will suddenly work again if you change anything in the file which renders the vue Root component, but only while webpack-dev-server is running. (The next time WDS is run again, the warning message will appear again)

Expected behavior

Hot reload works and without warnings or errors.

Versions

Libraries:

  • BootstrapVue: 2.2.1
  • Bootstrap: 4.4.1
  • Vue: 2.6.11

Environment:

  • Device: ASUS GU502GV
  • OS: Microsoft Windows [Version 10.0.18363.535]
  • Browser: Chrome
  • Version: 80.0.3987.53

Demo link

TODO after finished speaking at my seminar

If applicable, add a minimal demo link to help explain your problem. Some options for that are CodePen, CodeSandbox, JS Bin or JSFiddle.

You can also export markup from the Online Playground to CodePen, CodeSandbox or JSFiddle.

Additional context

Am using Webpack versions:

    "webpack": "5.0.0-beta.11",
    "webpack-dev-server": "3.10.1",
    "vue-loader": "15.8.3",

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
stale[bot]commented, Apr 23, 2020

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

0reactions
stale[bot]commented, Apr 15, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Icons | BootstrapVue
Icons are opt-in, meaning that they explicitly need to be imported in order to be used. They are not installed by default. You...
Read more >
bootstrap vue custom sass compiles but does not change ...
So remove those two imports from your main.js and it should work. // remove these from main.js import 'bootstrap/dist/css/bootstrap ...
Read more >
Peter Ekene Eze, Author at LogRocket Blog
While they sound similar, they are not the same thing. ... App.vue"; import { BootstrapVue, IconsPlugin } from "bootstrap-vue"; import ".
Read more >
Quasar Framework - Seriously, what's the catch? : r/vuejs
Despite its size and richness, the hotReload works faster than Buefy + Nuxt for me. The common criticism I have heard is that...
Read more >
Web page for the search and reproduction of songs, through the use ...
< title > Novel Music < / title > < link rel = " shortcut icon " href ... install dependencies npm install...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found