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

3
votes

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 :-

  • Uncaught Error: Cannot find module '../../../css-loader/lib/css-base.js'

  • ./node_modules/reactstrap/dist/reactstrap.es.js

  • Can't resolve 'C:\Users\moswi\Desktop\re-confusion\node_modules\babel-loader\lib\index.js

Does somebody know what could be the problem? thanks.

1
reactjsbootstrap-4

1 Answers

4
votes

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