从其他模块导入PropType值会导致未定义

免责声明:我是React和ES6新手,请耐心等待!

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

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 正在失败。

未捕获的TypeError:无法读取未定义的属性“isRequired”

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

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

有人能帮我理解为什么这会失败吗?这与评估的顺序有关吗?我很难像在普通JS中那样在浏览器中进行有效调试,因为它都是通过webpack和babel编译的。。。