React与Bootstrap出错，编译失败，Babel加载器模块未找到。

Question

我是React的新手，尝试在一个新的React项目中集成Bootstrap。我使用create-react-app来设置我的应用程序，使用Yarn安装了Bootstrap和reactstrap。这是我的src/文件夹中的index.js文件：

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();

以下是我的app.js文件

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;

现在，当我保存并运行上面的代码时，出现以下错误：

• 未捕获的错误：无法找到模块'../../../css-loader/lib/css-base.js'

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

• 无法解析'C:\Users\moswi\Desktop\re-confusion\node_modules\babel-loader\lib\index.js'

是否有人知道可能是什么问题？ 谢谢。

- MoSwilam

Answer 1

我也曾遇到同样的问题，以下是解决方法：

1. 删除 package-lock.json 文件。
2. 运行 npm install，然后再次运行 npm start 命令。

希望这能帮助你解决问题。

- rehab hussien Ali