CODEWITHSUNDEEP
reactjs
Stacey
Stacey

Reputation: 67

Import bootstrap CSS in React failed to compile

I am learning React js by following a tutorial and creating react app via create-react-app with my terminal.

The problem is occuring with importing bootstrap to my code, I can't figure it out. How I installed bootstrap is: 

npm install [email protected]


App.js code and importing bootstrap :

import React, { Component } from 'react';

import './App.css';
import "bootstrap/dist/css/bootstrap.min.css"


class App extends Component {
  render() {
    return (
      <div className="App">
        <h1 className="alert alert-warning">Welcome</h1>
      </div>
    );
  }
}

export default App;

On compiling I get error:

Failed to compile.

./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/bootstrap/dist/css/bootstrap.css)
Module not found: Can't resolve 'C:\Users\MyPc\Desktop\ReactAgile\reactxxx\node_modules\react-scripts\node_modules\babel-loader\lib\index.js' in 'C:\Users\MyPc\Desktop\ReactAgile\reactxxx'

What I tried is: Installing different versions of bootstrap and importing them in my App.js file but same error occurs.

Upvotes: 2

Views: 7253

Answers (6)

Moad Ghazi
Moad Ghazi

Reputation: 1

I tried adding babel and removing it like in the answer above : Add it using:

yarn add babel-loader @babel/core --dev

Remove it using:

yarn remove babel-loader @babel/core --dev

In case it didn't work, try importing bootstrap in the Index.js file:

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

Upvotes: 0

ggulgulia
ggulgulia

Reputation: 3080

I had the same issue. For me the following worked:

  1. deleting package-lock.json
  2. run npm install
  3. run npm start

Upvotes: 1

Andy
Andy

Reputation: 1

yarn add/remove babel-loader @babel/core --dev works, not sure why?

packages, dependencies and lockfile all gets removed during yarn remove. As of now it works, so analyzing how, will be after learning React. ;)

Upvotes: 0

Niloo Garavi
Niloo Garavi

Reputation: 91

Silly Solution and I'm not sure why it worked but adding babel-loader and then removing it worked for me.

Add by running the below command

yarn add babel-loader @babel/core --dev

Then, remove using

yarn remove babel-loader @babel/core --dev

Upvotes: 1

Christine Butler
Christine Butler

Reputation: 61

You need to configure loading CSS and other file types. This worked for me in the terminal:

yarn add babel-loader @babel/core --dev

Upvotes: 6

Dmitriy
Dmitriy

Reputation: 1241

You are installing the react-bootstrap library, add the CDN link in your HTML file, and import specific components as shown in the docs

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

React

import { Button } from 'react-bootstrap';

Upvotes: 1

Related Questions