title: React failed to compile reactLifecyclesCompat error
body: <p>I'm having problem in react. Its compilation error says:</p>
  <blockquote>
  <p><strong>Failed to compile</strong></p>
  <pre class="lang-none prettyprint-override"><code>./node_modules/reactstrap/dist/reactstrap.es.js
  Attempted import error: 'react-lifecycles-compat' does not contain a default export (imported as 'reactLifecyclesCompat').
  </code></pre>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/NkCkH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NkCkH.png" alt="Error screenshot" /></a></p>
  <p>I have the following dependencies</p>
  <pre class="lang-json prettyprint-override"><code>&quot;dependencies&quot;: {
    &quot;bootstrap&quot;: &quot;^4.1.1&quot;,
    &quot;react&quot;: &quot;^16.7.0&quot;,
    &quot;react-dom&quot;: &quot;^16.7.0&quot;,
    &quot;react-lifecycles-compat&quot;: &quot;^3.0.4&quot;,
    &quot;react-scripts&quot;: &quot;2.1.2&quot;,
    &quot;react-transition-group&quot;: &quot;^2.5.2&quot;,
    &quot;reactstrap&quot;: &quot;^7.0.0&quot;,
    &quot;uuid&quot;: &quot;^3.3.2&quot;
  }
  </code></pre>
  <p>Then I created one <code>AppNavbar</code> component, which is just a simple navbar, at location &quot;src/components/&quot; and below is my <code>AppNavbar</code> component code, it exports at the end of file.</p>
  <pre class="lang-jsx prettyprint-override"><code>import React, { Component } from 'react';
  import {
      Collapse,
      Navbar,
      NavbarToggler,
      NavbarBrand,
      Nav,
      NavItem,
      NavLink,
      Container
  } from 'reactstrap';
  
  class AppNavbar extends Component {
      state = {
          isOpen: false
      }
  
      toggle = () =&gt; {
          this.setState({
              isOpen: !this.state.isOpen
          })
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Navbar color=&quot;dark&quot; dark expand=&quot;sm&quot; className=&quot;mb-5&quot;&gt;
                      &lt;Container&gt;
                          &lt;NavbarBrand href=&quot;/&quot;&gt;Shopping List!&lt;/NavbarBrand&gt;
                          &lt;NavbarToggler onClick={this.toggle} /&gt;
                          &lt;Collapse isOpen={this.state.isOpen} navbar&gt;
                              &lt;Nav className=&quot;ml-auto&quot; navbar&gt;
                                  &lt;NavItem&gt;
                                      &lt;NavLink href=&quot;https://about.me&quot;&gt;About&lt;/NavLink&gt;
                                  &lt;/NavItem&gt;
                              &lt;/Nav&gt;
                          &lt;/Collapse&gt;
                      &lt;/Container&gt;
                  &lt;/Navbar&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default AppNavbar;
  </code></pre>
  <p>Then to show it on the page, I import that <code>AppNavbar</code> into App.js like this:</p>
  <pre class="lang-jsx prettyprint-override"><code>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 (
        &lt;div className=&quot;App&quot;&gt;
          &lt;AppNavbar /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>