从另一个模块导入 PropType 值导致未定义

Question

免责声明：我是 React 和 ES6 的新手，所以请耐心等待！

在 FacetGroups.js 中，我定义了一些模式，用于使用在各种模块中跨应用程序使用的 PropTypes 进行比较。它在这个文件中工作得很好

import React from 'react'
import PropTypes from 'prop-types'
import FacetGroup from './FacetGroup';

/* ... */
const FacetGroups = ({ facets }) => (
    <div>
        {Object.keys(facets).map( facetName => {
            const facet = facets[facetName];

            return (
                <section key={facetName}>
                    <header>{facet.displayName}</header>
                    <FacetGroup group={facet} groupName={facetName} />
                </section>
            );
        })}
    </div>
);

const GROUP_PROP_TYPE = PropTypes.shape({
  displayName: PropTypes.string.isRequired,
  /* ... */
  isOpen: PropTypes.bool,
  isShowingAll: PropTypes.bool
});

FacetGroups.propTypes = {
    facets: PropTypes.objectOf( GROUP_PROP_TYPE ).isRequired /* This works fine */
}

/* ... */

export { GROUP_PROP_TYPE, /* ... */ };

然后，在 FacetGroup.js（同级文件）中，我导入变量，并在 FacetGroup proptype 定义中使用它：

import React from 'react'
import PropTypes from 'prop-types'

import { GROUP_PROP_TYPE, /* ... */ } from './FacetGroups';

const FacetGroup = ({ group, groupName }) => (
    <span>I am a Facet Group</span>
);

FacetGroup.propTypes = {
    group: GROUP_PROP_TYPE.isRequired,
    groupName: PropTypes.string.isRequired
}

这让我在浏览器控制台中出现运行时错误，其中 GROUP_PROP_TYPE 未定义（因此 isRequired 失败。

Uncaught TypeError: Cannot read property 'isRequired' of undefined

我运行这个 JS 文件通过 gulp 使用 webpackStream 和 webpack - 这是我的配置：

module: {
    loaders: [
        { 
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react'],
                plugins: ['transform-object-rest-spread']
            }
        }
   ]
}

有人可以帮我理解为什么会失败吗？这与评估顺序有关吗？我无法像在普通 JS 中那样在浏览器中有效调试，因为它都是通过 webpack 和 babel 编译的...

Answer 1

在 FacetGroup.js 中正确定义 FacetGroup

import React from 'react'
import PropTypes from 'prop-types'

import { GROUP_PROP_TYPE, /* ... */ } from './FacetGroups';

/* ... */

const FacetGroups = {
  facets: PropTypes.objectOf(GROUP_PROP_TYPE).isRequired /* This works fine */
}

Answer 2

你应该避免循环依赖。尝试在单独的文件中定义 GROUP_PROP_TYPE

从另一个模块导入 PropType 值导致未定义

Importing PropType value from another module results in undefined

javascript

reactjs

webpack

es6-modules

react-proptypes