When I run my application, it didn't display nothing in the page and this is error is showed up in console:

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")
);

I saw already every topics about this problem and I didn't fix yet, I changed the method import or export few times and nothing happened, I'd appreciate any help, thanks.

Edit: My index.js from Routes

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;

CodePudding user response：

Did you try changing export in App.js to export default?

Edit:

I used create-react-app to make a minimal setup of react, this setup happens to put App.js in /src so that's where I'll start. I made these files:

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

in App.js (copied from question, but with default export):

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

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

in routes/index.js (copied from question):

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 (a minimal working helloworld):

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

The error thrown was that in routes/index.js there is no such export called Switch. So I removed it, and the entire code ran without errors.

CodePudding user response：

you can write this:

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

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

export default App;