响应循环依赖项导入命名导出

Question

我有两个容器，这两个容器都导入了一个名为PageHeader的组件--这是一个功能组件，并且像这样导入/导出.

(这发生在我导入的任何组件中，而不仅仅是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;

在“组件”文件夹的根目录中.

components/index.js

......
export { default as PageHeader } from './PageHeader';
......

这允许我将组件导入到这样的容器中.

import { DelayedComponent, Loading, Page, PageHeader, ClientList, RecentlyViewed, ClientFilter } from '../../components';

当我只有一个容器的时候，这个很好，我现在介绍了第二个容器，这实际上是第二个页面。

我的集装箱如下..。

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;

这样做会导致Webpack崩溃，造成以下错误.

/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.

但是，如果我在EmployeeSearch.jsx中更改了导入，那么它看起来就像.

import PageHeader from '../../components/PageHeader';

它起作用了。

我完全不知所措，我希望得到一些关于为什么/如何发生这种情况的输入，以及如何在不为组件添加多个导入语句的情况下修复这个问题。

我的集装箱呈现如下..。

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

原来我在组件index.js文件中包含了应用程序。

我的路线包装在应用程序中，所以这是我的循环依赖。