错误呢?这肯定是一个导入或导出的问题，你引用了一个组件或容器，要么你没有从它的定义脚本导出，要么你在导入它时使用了错误的格式。

解决方案吗?

遍历所有的组件/容器定义，并确保在脚本的末尾导出了它们，例如“export default 'yourcomponentname';”或者在组件定义的开头，例如“export default 'yourcomponentname'; Export const 'yourcomponentname'=() =>{ …… ｝ 在导入语句中，确保没有根据相应的导出语句将命名导入和默认导入混为一谈

我通过import App from './ App /'获得;期望它导入。/app/index.js，但它却导入了。/app.json。

我发现了这个错误的另一个原因。它与CSS-in-JS向React组件中返回函数的顶层JSX返回空值有关。

例如:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

我会得到这样的警告:

警告:反应。createElement: type无效——期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到:null。

接着是这个错误:

未捕获错误:元素类型无效:期望为字符串(对于内置组件)或类/函数(对于复合组件)，但得到:null。

我发现这是因为我试图渲染的CSS-in- js组件没有CSS。我通过确保有CSS被返回而不是一个空值来修复它。

例如:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

在文件底部导出可以解决这个问题。

const IndicatorCloak = (props) => { ... }
export default IndicatorCloak;

在类似的情况下，我有同样严重的错误，我专注于代码，但以上似乎没有改善情况。我正在从Javascript转换到Typescript，但由于一些奇怪的原因，我同时拥有两个文件。删除JS版本解决了这个问题，这可能会节省一些人的时间。

作为一个快速的补充。我也遇到了同样的问题，当Webpack编译我的测试时，应用程序运行良好。当我将我的组件导入到测试文件中时，我在其中一个导入中使用了错误的大小写，这导致了同样的错误。

import myComponent from '../../src/components/myComponent'

应该是

import myComponent from '../../src/components/MyComponent'

注意，导入名称myComponent依赖于myComponent文件中导出的名称。