React无法编译reactLifecyclesCompat错误

Question

我的反应有问题。其编译错误为：

  

编译失败

     

./node_modules/reactstrap/dist/reactstrap.es.js
Attempted import error: 'react-lifecycles-compat' does not contain a default export (imported as 'reactLifecyclesCompat').

我具有以下依赖性

"dependencies": {
  "bootstrap": "^4.1.1",
  "react": "^16.7.0",
  "react-dom": "^16.7.0",
  "react-lifecycles-compat": "^3.0.4",
  "react-scripts": "2.1.2",
  "react-transition-group": "^2.5.2",
  "reactstrap": "^7.0.0",
  "uuid": "^3.3.2"
}

然后，我在位置“ src / components /”处创建了一个AppNavbar组件，它只是一个简单的导航栏，下面是我的AppNavbar组件代码，它在文件末尾导出。 / p>

import React, { Component } from 'react';
import {
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    Container
} from 'reactstrap';

class AppNavbar extends Component {
    state = {
        isOpen: false
    }

    toggle = () => {
        this.setState({
            isOpen: !this.state.isOpen
        })
    }

    render() {
        return (
            <div>
                <Navbar color="dark" dark expand="sm" className="mb-5">
                    <Container>
                        <NavbarBrand href="/">Shopping List!</NavbarBrand>
                        <NavbarToggler onClick={this.toggle} />
                        <Collapse isOpen={this.state.isOpen} navbar>
                            <Nav className="ml-auto" navbar>
                                <NavItem>
                                    <NavLink href="https://about.me">About</NavLink>
                                </NavItem>
                            </Nav>
                        </Collapse>
                    </Container>
                </Navbar>
            </div>
        );
    }
}

export default AppNavbar;

然后将其显示在页面上，我像这样将AppNavbar导入App.js：

import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <AppNavbar />
      </div>
    );
  }
}

export default App;

Answer 1

这不是代码中的错误，而是通过reactstrap导入所需的依赖项的方式。看看：https://github.com/reactstrap/reactstrap/issues/1343。