title: React Cyclic dependency importing named export
body: <p>I have 2 containers, both import a component called <code>PageHeader</code> this is a functional component and is imported / exported as like so....</p>
  
  <p>( this happens with any component I import, not just PageHeader )</p>
  
  <p><strong>components/PageHeader/PageHeader.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  import './PageHeader.sass';
  
  const PageHeader = ({ title, description, image }) =&gt; (
    &lt;div className="section is-paddingless is-hidden-touch"&gt;
      &lt;div className="header header__desktop" style={{ backgroundImage: `url('${image}')` }}&gt;
        &lt;h3 className="is-size-3 has-text-weight-semibold"&gt;{title}&lt;/h3&gt;
        &lt;h5&gt;{description}&lt;/h5&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  
  PageHeader.propTypes = {
    title: PropTypes.string.isRequired,
    description: PropTypes.string.isRequired,
    image: PropTypes.string.isRequired,
  };
  
  export default PageHeader;
  </code></pre>
  
  <p><strong>components/PageHeader/index.js</strong></p>
  
  <pre><code>import PageHeader from './PageHeader';
  export default PageHeader;
  </code></pre>
  
  <p>In the root of my components folder I then have....</p>
  
  <p><strong>components/index.js</strong></p>
  
  <pre><code>......
  export { default as PageHeader } from './PageHeader';
  ......
  </code></pre>
  
  <p>This allows me to import components into a container like so....</p>
  
  <pre><code>import { DelayedComponent, Loading, Page, PageHeader, ClientList, RecentlyViewed, ClientFilter } from '../../components';
  </code></pre>
  
  <p>When I only had 1 container, this was working fine, I have now introduced a second container, this is essentially a second page. </p>
  
  <p>My Containers are as follows....</p>
  
  <p><strong>containers/Clients/Clients.jsx</strong></p>
  
  <pre><code>import React, { Component, Fragment } from 'react';
  import PropTypes from 'prop-types';
  
  import { DelayedComponent, Loading, Page, PageHeader, ClientList, RecentlyViewed, ClientFilter } from '../../components';
  
  import headerImage from '../../assets/images/client-search-banner.jpg';
  
  class Clients extends Component {
    state = { selector: 'ALL' };
  
    static propTypes = {
      fetchClientListAction: PropTypes.func.isRequired,
      selectClientAction: PropTypes.func.isRequired,
      isLoading: PropTypes.bool.isRequired,
      clients: PropTypes.array.isRequired,
    };
  
    componentDidMount() {
      this.props.fetchClientListAction();
    }
  
    onClientSelect = client =&gt; this.props.selectClientAction(client);
  
    onFilterTenantList = selector =&gt; this.setState({ selector });
  
    render() {
      const { isLoading, clients } = this.props;
      const { selector } = this.state;
  
      if (isLoading)
        return (
          &lt;DelayedComponent&gt;
            &lt;Loading /&gt;
          &lt;/DelayedComponent&gt;
        );
  
      return (
        &lt;Fragment&gt;
          &lt;PageHeader
            title="Choose a client"
            description="Bacon ipsum dolor amet ribeye biltong tongue, pig brisket venison fatback pork bacon kielbasa burgdoggen salami strip steak."
            image={headerImage}
          /&gt;
          &lt;Page&gt;
            &lt;Page.Columns&gt;
              &lt;Page.Column modifiers="is-paddingless"&gt;
                &lt;ClientFilter clients={clients} selector={selector} filterByLetter={this.onFilterTenantList} /&gt;
              &lt;/Page.Column&gt;
            &lt;/Page.Columns&gt;
            &lt;Page.Columns modifiers="is-multiline"&gt;
              &lt;Page.Column modifiers="is-two-thirds"&gt;
                &lt;ClientList clients={clients} selector={selector} onClientSelect={this.onClientSelect} /&gt;
              &lt;/Page.Column&gt;
              &lt;Page.Column modifiers="is-one-third"&gt;
                &lt;RecentlyViewed /&gt;
              &lt;/Page.Column&gt;
            &lt;/Page.Columns&gt;
          &lt;/Page&gt;
        &lt;/Fragment&gt;
      );
    }
  }
  
  export default Clients;
  </code></pre>
  
  <p><strong>containers/EmployeeSearch/EmployeeSearch.jsx</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  import { PageHeader } from '../../components';
  
  import headerImage from '../../assets/images/client-search-banner.jpg';
  
  class EmployeeSearch extends Component {
    render() {
      return (
               &lt;PageHeader
            title="Search"
            description="Bacon ipsum dolor amet ribeye biltong tongue, pig brisket venison fatback pork bacon kielbasa burgdoggen salami strip steak."
            image={headerImage}
          /&gt;
      );
    }
  }
  
  export default EmployeeSearch;
  </code></pre>
  
  <p>Doing this causes Webpack crash with the following error...</p>
  
  <pre><code>/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:29
        throw new Error('Cyclic dependency: '+JSON.stringify(node))
                                                   ^
  
  TypeError: Converting circular structure to JSON
      at JSON.stringify (&lt;anonymous&gt;)
      at visit (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:29:50)
      at visit (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:47:9)
      at visit (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:47:9)
      at Function.toposort [as array] (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/toposort/index.js:22:22)
      at Object.module.exports.dependency (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/html-webpack-plugin/lib/chunksorter.js:50:35)
      at HtmlWebpackPlugin.sortChunks (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/html-webpack-plugin/index.js:364:35)
      at /Users/xxxxx/Code/xxxxx/search-webapp/node_modules/html-webpack-plugin/index.js:113:21
      at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/tapable/lib/HookCodeFactory.js:24:12), &lt;anonymous&gt;:7:1)
      at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/xxxxx/Code/xxxxx/search-webapp/node_modules/tapable/lib/Hook.js:35:21)
  error An unexpected error occurred: "Command failed.
  </code></pre>
  
  <p>However, if I change the import in <code>EmployeeSearch.jsx</code> so it looks like this....</p>
  
  <pre><code>import PageHeader from '../../components/PageHeader';
  </code></pre>
  
  <p>It works.</p>
  
  <p>I am at a complete loss and would love some input as to why / how this happening and how I can fix this without adding multiple import statements for components.</p>
  
  <p>My Containers are rendered as follows....</p>
  
  <pre><code>import React from 'react';
  import Loadable from 'react-loadable';
  import { Switch, Route } from 'react-router-dom';
  
  import Loading from './components/Loading';
  
  const AsyncRoute = loader =&gt;
    Loadable({
      loader,
      loading: Loading,
      delay: 300,
    });
  
  const Clients = AsyncRoute(() =&gt; import(/* webpackChunkName: "clients" */ './containers/Clients'));
  const EmployeeSearch = AsyncRoute(() =&gt; import(/* webpackChunkName: "employee-search" */ './containers/EmployeeSearch'));
  
  const Routes = () =&gt; (
    &lt;Switch&gt;
      &lt;Route exact path="/" component={Clients} /&gt;
      &lt;Route path="/employee-search/:client" component={EmployeeSearch} /&gt;
    &lt;/Switch&gt;
  );
  
  export default Routes;
  </code></pre>