0

I am converting an existing Vue project to vue-cli 3 and have run into an unexpected problem:
In a .js file, I get this error (when I run npm run serve) for the line import 'bootstrap/dist/css/bootstrap.css';

error: 'bootstrap' should be listed in the project's dependencies. Run 'npm i -S bootstrap' to add it (import/no-extraneous-dependencies) at src\main.js:19:1:

Which I don't understand, because my package.json already has bootstrap:

"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-vue": "^2.0.0-rc.11",
"jquery": "^3.3.1",
"popper": "^1.0.1",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"

},

The vue-cli doc mentions using a tilde to mean "import from a node module", so I also tried 

import '~bootstrap/dist/css/bootstrap.css';

-- and got the same error.

Mark L.
  • 493
  • 1
  • 4
  • 13
  • Your import looks fine. What else do you do in the `main.js` file? – Bennett Dams Sep 05 '18 at 16:52
  • In my previous setup (before trying to switch to vue-cli 3), my webpack config listed "main.js" as my application "entry:". – Mark L. Sep 05 '18 at 17:04
  • I wanted to answer Bennett's question by inserting the top lines of main.js here, but StackOverflow won't let me.... grrr. In summary, main.js imports a bunch of stuff: Vue, Vuex, VueRouter, and a half-dozen Vue components. It defines the Vuex store. And it does "new Vue()" to replace the "app" element (in index.html) with the router and to specify the store. – Mark L. Sep 05 '18 at 17:10
  • Did you try to delete the whole `node_modules` folder and run `npm install` afterwards? – Bennett Dams Sep 05 '18 at 17:21
  • Yes, that did solve the problem. Thanks! (And it's strange, because I previously did "npm install" and checked that that file existed.) – Mark L. Sep 05 '18 at 19:34

1 Answers1

0

Problem solved by deleting node_modules and running "npm install" again.

Mark L.
  • 493
  • 1
  • 4
  • 13