Encountering difficulties including Bootstrap in React-app after attempting global installation

After using the command npm i -g bootstrap to install bootstrap, I attempted to include it in a React-app by adding 

import "bootstrap/dist/css/bootstrap.css";
.

Unfortunately, this resulted in an error being thrown.

Failed to compile.

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

However, upon installing it locally with npm i bootstrap and importing it as 

import "bootstrap/dist/css/bootstrap.css";
, it functioned correctly.

I'm wondering if there is a specific method for importing npm packages when they are installed either globally or locally, or if I am making a mistake somewhere?

cssreactjstwitter-bootstrapnpmnpm-install

Answer №1

If you want to install Bootstrap globally, you can use the command npm install -g bootstrap.

After installation, create a local link to the global package by using npm link <global-package>. In this case, it would be npm link bootstrap. Please make sure your operating system supports symlinks.

To view all your global packages and their locations, run:

npm list -g

To display only the path in truncated form, you can use npm list -g | head -n 1.

Note that the npm install command does not allow installing a module both globally and saving it to the package.json simultaneously.

One indirect method is to use the preinstall property in the package.json like this:

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

By adding this script, running npm install will automatically install Bootstrap globally. Ensure that your current user has the necessary permissions to write to the global node module directory.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve cookies using getinitial props in Next.js?

Is there a way to retrieve cookies in getInitialProps and use them to fetch data from an API on a page in Next.js? ...

reactjsnext.js

How can I incorporate a dropdown menu into my website's navigation using Bootstrap 4 alpha?

This content is based on the Bootstrap v4 Alpha blog theme. I integrated it into a project but encountered issues when trying to add a dropdown menu to the navigation bar. Despite my attempts, the dropdowns did not appear as expected. I included the code ...

htmlcssbootstrap-4

Tips on adding an image using Reactjs

I am currently working in Reactjs with the Next.js framework. I am attempting to upload images using Axios (POST method API) and will be utilizing an "api in PHP". Could someone please guide me on how to achieve this? I have tried the code below, but it&ap ...

javascriptreactjsnext.js

Use jQuery to set a Firebase image as the background of a div element

Is there a way to fetch an image from Firebase and use it as the background for a div element? I've tried several approaches without success. Could someone share some examples on how to achieve this? <div class="museBGSize rounded-corners grpelem" ...

javascriptjquerycssfirebasefirebase-realtime-database

What are the steps for integrating a CMS with my unique website design?

Currently, I am in the process of creating a unique website for a client using my own combination of html, css, and JavaScript. There is also a possibility that I may incorporate vueJS into the design. The client has expressed a desire to have the ability ...

javascriptcsswordpresshtmlcontent-management-system

What is the method for encoding an image file into a base64 format?

I am looking to save an image as base64 to an AWS S3 bucket. I have a lambda function that will decode the base64 string. My current state variables for handling images are 'selectedFile' which holds the selected image file and 'preview&apo ...

reactjs

Is there a way to use a React-Bootstrap-Glyphicon to access the dropdown with React-Select?

I was looking to implement a dropdown using React-Select, but instead of the typical appearance as shown here: https://i.stack.imgur.com/UNSgr.png My goal was for it to have a look similar to this: https://i.stack.imgur.com/OfX40.png The current code I& ...

reactjsreact-bootstrapreact-select

Find the dominant color within the project's style sheets

Is there a method to extract the main color from an angular material theme and apply it in the css files of an angular project? Within a project, we can specify the primary color in a *.scss document as shown below: @import '~@angular/material/themi ...

cssangularsassthemesangular-material

Get the npm distribution package without the need to actually install npm

Is there a way to obtain an npm package without the need for running npm view XXX ... or installing node/npm? Specifically, I am attempting this process on a Linux operating system. ~UPDATE~ I now understand that I should have provided more details about ...

javascriptnode.jsnpm

Adsense Responsive Ads by Google Are Not Displaying

Click on this link to see 3 different types of ads - Right, Left, and Header Ads. These ads are supposed to be responsive and have an "Active" status. However, the issue is that the Responsive ads are not displaying properly. After some research, it seems ...

htmlcssadsense

Retrieve the id for the chosen user name within a function that contains an array of objects

const userList = [ {name:"jonh" ,id:EAD1234}, {name:"peter" ,id:EAD1235}, {name:"matt" ,id:EAD1236}, {name:"henry" ,id:EAD1237}, ] In the array above, there are various users with their respective IDs. The goal is t ...

javascriptreactjsarraysecmascript-6

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

I want to create floating labels that resize dynamically when an input is clicked, similar to modern forms. I am using vanilla JS exclusively for this task. Currently, the setup works with the <input> tag. However, it does not work with the <text ...

javascripthtmlcssforms

Issue with child div exceeding 100% height within CSS Flexbox causing inconsistency in Firefox and Chrome browsers

I am facing a challenge trying to make a div resize to match its parent's height using flexbox. This issue seems to occur only in Chrome (48), as it displays correctly in Firefox (44). You can view the example on Fiddle: https://jsfiddle.net/jvilla/k ...

htmlcssflexbox

Struggling to figure out Visual Studio Code - Having trouble loading images and fonts into my CSS file

It seems like I'm missing something here (just so you know, I'm totally new at this). I attempted to use fonts that are loaded on my computer for my CSS stylesheet (font file in my VSC), but no luck. I also tried using images from my files as bac ...

cssimagefonts

What is the process for incorporating personalized variables into the Material Ui Theme?

In the process of developing a react app with TypeScript and Material UI, I encountered an issue while attempting to define custom types for my themes. The error message I received is as follows: TS2322: Type '{ mode: "dark"; background: { default: s ...

reactjstypescriptmaterial-ui

Avoiding the sudden appearance of unstyled content in Single-File Components

I am looking to update my HTML navigation <div id="header-wrapper"> <div id="header-logo-title"> <nav> <ul id='mainNav'> <li>Home</li> </ul> </nav> ...

javascriptcssvue.jsvuejs2

Tips for creating a tabbed form that easily glides between tabs

After coming across this form design, I am inspired to create something similar with a twist. Instead of having each tab display all content at once, I want the tabs to scroll from right to left, giving it a more animated effect. Can someone offer suggesti ...

javascripthtmlcss

Adjust Fabric js Canvas Size to Fill Entire Screen

Currently, I am working with version 4.3.1 of the Fabric js library and my goal is to adjust the canvas area to fit its parent div #contCanvasLogo. I have tried multiple approaches without success as the canvas continues to resize on its own. Below is the ...

javascriptjquerycsscanvasfabricjs

Unable to align text in the middle of the header

Seeking help with my design flaws, I have created a fiddle to showcase the issues that arise when attempting to make it responsive. The main problem is that the HEADING IN CENTER text is not aligned properly in the center. If I remove the position attribut ...

htmlcssresponsive-designsemantic-ui

Encountering a peculiar error while attempting to install firebase-tools

Currently in the process of deploying my application on Firebase by following a tutorial. I encountered an issue after executing the command npm install -g firebase-tools: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" d ...

javascriptreactjsfirebasenpmfirebase-tools