React Cyclic dependency importing named export - reactjs

Question

I have 2 containers, both import a component called PageHeader this is a functional component and is imported / exported as like so....
( this happens with any component I import, not just PageHeader )
components/PageHeader/PageHeader.jsx
import React from 'react';
import PropTypes from 'prop-types';
import './PageHeader.sass';
const PageHeader = ({ title, description, image }) => (
<div className="section is-paddingless is-hidden-touch">
<div className="header header__desktop" style={{ backgroundImage: `url('${image}')` }}>
<h3 className="is-size-3 has-text-weight-semibold">{title}</h3>
<h5>{description}</h5>
</div>
</div>
);
PageHeader.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
image: PropTypes.string.isRequired,
};
export default PageHeader;
components/PageHeader/index.js
import PageHeader from './PageHeader';
export default PageHeader;
In the root of my components folder I then have....
components/index.js
......
export { default as PageHeader } from './PageHeader';
......
This allows me to import components into a container like so....
import { DelayedComponent, Loading, Page, PageHeader, ClientList, RecentlyViewed, ClientFilter } from '../../components';
When I only had 1 container, this was working fine, I have now introduced a second container, this is essentially a second page.
My Containers are as follows....
containers/Clients/Clients.jsx
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 => this.props.selectClientAction(client);
onFilterTenantList = selector => this.setState({ selector });
render() {
const { isLoading, clients } = this.props;
const { selector } = this.state;
if (isLoading)
return (
<DelayedComponent>
<Loading />
</DelayedComponent>
);
return (
<Fragment>
<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}
/>
<Page>
<Page.Columns>
<Page.Column modifiers="is-paddingless">
<ClientFilter clients={clients} selector={selector} filterByLetter={this.onFilterTenantList} />
</Page.Column>
</Page.Columns>
<Page.Columns modifiers="is-multiline">
<Page.Column modifiers="is-two-thirds">
<ClientList clients={clients} selector={selector} onClientSelect={this.onClientSelect} />
</Page.Column>
<Page.Column modifiers="is-one-third">
<RecentlyViewed />
</Page.Column>
</Page.Columns>
</Page>
</Fragment>
);
}
}
export default Clients;
containers/EmployeeSearch/EmployeeSearch.jsx
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 (
<PageHeader
title="Search"
description="Bacon ipsum dolor amet ribeye biltong tongue, pig brisket venison fatback pork bacon kielbasa burgdoggen salami strip steak."
image={headerImage}
/>
);
}
}
export default EmployeeSearch;
Doing this causes Webpack crash with the following error...
/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 (<anonymous>)
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), <anonymous>: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.
However, if I change the import in EmployeeSearch.jsx so it looks like this....
import PageHeader from '../../components/PageHeader';
It works.
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.
My Containers are rendered as follows....
import React from 'react';
import Loadable from 'react-loadable';
import { Switch, Route } from 'react-router-dom';
import Loading from './components/Loading';
const AsyncRoute = loader =>
Loadable({
loader,
loading: Loading,
delay: 300,
});
const Clients = AsyncRoute(() => import(/* webpackChunkName: "clients" */ './containers/Clients'));
const EmployeeSearch = AsyncRoute(() => import(/* webpackChunkName: "employee-search" */ './containers/EmployeeSearch'));
const Routes = () => (
<Switch>
<Route exact path="/" component={Clients} />
<Route path="/employee-search/:client" component={EmployeeSearch} />
</Switch>
);
export default Routes;

Answer 1

It turns out I had included App within my components index.js file.
My routes are wrapped in App, so that was my circular dependancy.