警告：React.createElement：类型无效——需要一个字符串（对于内置组件）（React Webpack Phaser）

Question

当我运行我的应用程序时，它没有在页面中显示任何内容，这是错误出现在控制台中：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (react-dom.development.js?61bb:23965)
    at createFiberFromElement (react-dom.development.js?61bb:23988)
    at reconcileSingleElement (react-dom.development.js?61bb:14233)
    at reconcileChildFibers (react-dom.development.js?61bb:14293)
    at reconcileChildren (react-dom.development.js?61bb:16769)
    at updateHostRoot (react-dom.development.js?61bb:17258)
    at beginWork (react-dom.development.js?61bb:18624)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)

App.js

import React from "react";
import Routes from './routes/index';

export class App extends React.Component {
    render() {
        return (
            <Routes />
        );
    }
}

Index.jsx

import Phaser from "phaser";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";
// import playGame from "./phaser/scene";
import Routes from './routes/index.js';

ReactDOM.render(
  <App />,
  document.getElementById("root") || document.createElement("div")
);

我已经看到了关于这个问题的所有主题，但我还没有解决，我更改了几次导入或导出方法，但没有任何反应，非常感谢任何帮助，谢谢。

编辑：我的 index.js 来自路线

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from '../pages/home/index.js';

class Routes extends React.Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/home" Component={Home} />
                </Switch>
            </Router>
            );
    };
}

export default Routes;

Answer 1

您是否尝试将 App.js 中的 export 更改为 export default？

编辑：

我用 create-react-app 做了一个最小的反应设置，这个设置恰好把 App.js 放在 /src 中，所以我将从这里开始。我制作了这些文件：

/src/App.js
/src/routes/index.js
/src/pages/home/index.js

in App.js（从问题中复制，但默认导出）：

import React from "react";
import Routes from './routes/index';

export default class App extends React.Component {
    render() {
        return (
            <Routes />
        );
    }
}

in routes/index.js（从问题中复制）：

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "../pages/home/index.js";

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/home" Component={Home} />
        </Switch>
      </Router>
    );
  }
}

export default Routes;

in pages/home/index.js（一个最小的工作地狱世界）：

export default function App() {
  return (
    <h1>Hello World</h1>
  )
}

抛出的错误是 routes/index.js 中没有名为 Switch 的导出。所以我删除了它，并且整个代码运行没有错误。

Answer 2

你可以这么写：

import React from "react";
import Routes from './routes/index';

class App extends React.Component {
    render() {
        return (
            <Routes />
        );
    }
}

export default App;

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）（React Webpack Phaser）

Warning: React.createElement: type is invalid -- expected a string (for built-in components) (React Webpack Phaser)

reactjs

phaser-framework

webpack