0

I installed bootstrap using npm i -g bootstrap and trying to include bootstrap in a React-app as import "bootstrap/dist/css/bootstrap.css";.

However, it is throwing an error.

Failed to compile.

./src/index.js
Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.css' in '/home/username/nodeProjects/react-app/src'

But when I actually install it locally as npm i bootstrap and import it as import "bootstrap/dist/css/bootstrap.css";, it is working as expected.

Is there any different approach to import npm packages when they are installed globally and locally or am I doing something wrong?

Underoos
  • 4,708
  • 8
  • 42
  • 85
  • 1
    why you need bootstrap globally? its required dependency – Abdul Manan Jul 08 '19 at 07:11
  • I would assume that normally the import of a local package searches for a package inside of the local node_modules directory only (not proved). I am not sure that you are really need to install bootstrap globally, because it's better to keep your system clean and setup dependencies per project only – Egor Jul 08 '19 at 07:15
  • 1
    packages that are installed global not recorded in the package.json file so when you move to production and run npm i bootstrap will not be installed for you and will case problem – Abdul Manan Jul 08 '19 at 07:15
  • Ok. But don't you think that it should be working like all other `global` modules work when importing? – Underoos Jul 08 '19 at 07:20
  • 1
    global packages have a different location you need to include that path – Abdul Manan Jul 08 '19 at 07:21

1 Answers1

1

You need npm install -g bootstrap this will install bootstrap globally.

Then you can use npm link <global-package> so in your case npm link bootstrap to create a local link to a package already installed globally. (Caveat: The OS must support symlinks.)

To see you all global packages and its location:

npm list -g

Use npm list -g | head -n 1 for truncated output showing just the path.

The npm install command does not support installing a module both globally and save it to the package.json in one step.

There is, however, a way to install a module globally indirectly. The package.json supports a preinstall property like so:

"scripts": {
  "preinstall": "npm install -g bootstrap"
}

As soon as you execute npm install, bootstrap will be installed globally. Please note that your current user then needs permission to write to your global node module directory.

Abdul Manan
  • 2,255
  • 3
  • 27
  • 51