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

我也遇到了同样的问题，并意识到我在JSX标记中提供了一个未定义的React组件。问题是要渲染的react组件是动态计算的，它最终没有定义!

错误说明:

不变性违反:元素类型无效:期望为字符串(对于内置组件)或类/函数(对于复合组件)，但得到:undefined。您可能忘记从定义组件的文件中导出组件。检查C.的渲染方法，

产生此错误的示例:

var componentA = require('./components/A'); var componentB = require('./components/B'); const templates = { a_type: componentA, b_type: componentB } class C extends React.Component { constructor(props) { super(props); } // ... render() { //Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C) const ComponentTemplate = templates[this.props.data.uiType]; return <ComponentTemplate></ComponentTemplate> } // ... }

问题是提供了一个无效的“uiType”，因此产生了未定义的结果:

模板['无效字符串']

当我在同一目录中有一个.jsx和.scss文件且根名称相同时，我遇到了这个错误。

举个例子，如果你有Component。jsx和Component。SCSS在同一个文件夹中，你试着这样做:

import Component from ./Component

Webpack显然混淆了，至少在我的情况下，当我真正想要.jsx文件时，它试图导入scss文件。

我可以通过重命名.scss文件并避免歧义来修复它。我还可以显式地导入Component.jsx

对我来说，我的样式组件是在我的功能组件定义之后定义的。它只发生在舞台上，对我来说不是局部的。一旦我把我的样式化组件移到组件定义的上方，错误就消失了。

就我而言，

//details.js 
import React from 'react'

const Details = (props) =>{
return <h1>Details</h1>
}

export default Details;


//main.js
import React from "react";
import { withRouter } from "react-router";
import {Route,BrowserRouter as Router,Redirect,Switch,Link} from "react-router-dom";
import Details from "./myAccount/details";

const Main = (props) => {
 return (
   <>
        <Switch>
          <Route path="/my-account/details" component={<Details />} />
        </Switch>
   </>

 );
};

export default withRouter(Main);

===========================

Replaced with below one, error got fixed
component={<Details />}  with  component={Details} 

我发现了这个错误的另一个原因。它与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>
  );
}