CODEWITHSUNDEEP
reactjsbootstrap-4
MoSwilam
MoSwilam

Reputation: 944

React with bootstrap error failed to compile babel loader module not found

I am new to React, I am trying to integrate bootstrap with a new React project , Got my app setup using create-react-app, installed bootstrap and reactstrap using Yarn, this is my index.js file in the src/ folder

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

and here is my app.js file

import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="/">my-brand</NavbarBrand>
          </div>
        </Navbar>
      </div>
    );
  }
}

export default App;

Now, when I save and run the above code, I get the following errors :-

Does somebody know what could be the problem? thanks.

Upvotes: 3

Views: 1289

Answers (1)

rehab hussien Ali
rehab hussien Ali

Reputation: 89

I had the same issue and what worked for me is the following:

  1. Remove package-lock.json
  2. Run npm install and then npm start again

Hope this helps

Upvotes: 4

Related Questions