Why I can't get an object with react router dom?

Question

I have googled everything for this error, but I haven't figure out the reason:

invariant.js?409a:42 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of the Router.

Here is some partial code:

router

// router
import Sandbox from "../component/sandbox/index.jsx";
import BinaryTree from "../component/sandbox/binaryTree";
import RandomSelect from "../component/sandbox/randomSelect";

import Index from "../component/index.tsx";
import game from "../component/game/game.jsx";
import JetFighter from "../component/game/jetFighter/index";

class Root extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <div>
            <Route exact path="/" component={Index} />
            <Route path="/hello" component={Hello} />
            <Route path="/game" component={game} />
            <Route path="/jetfighter" component={JetFighter} />
            <Route path="/about" component={About} />
            <Route exact path="/sandbox" component={Sandbox} />
            <Route path="/sandbox/binaryTree" component={BinaryTree} />
            <Route path="/sandbox/randomSelect" component={RandomSelect} />
          </div>
        </Switch>
      </Router>
    );

  }
}

export default Root;

index.js

// index.js
// eslint-disable-next-line no-unused-vars
import React from "react";
import ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader";

import RootContainer from "../router/index.js";


const render = () => {
  ReactDOM.render((
    <AppContainer>
      <RootContainer />
    </AppContainer>
  ), document.getElementById("app")
  );
};

render();

if (module.hot) {
  const index = require("../router/index").default;
  module.hot.accept(index, () => {
    render();
  });
}

pageage.json

  "dependencies": {
    "@types/react": "^16.0.25",
    "@types/react-dom": "^16.0.4",
    "awesome-typescript-loader": "^5.0.0",
    "bootstrap": "^4.1.1",
    "bundle-loader": "^0.5.6",
    "canvas": "^1.6.10",
    "canvg": "0.0.8",
    "d3": "^4.10.2",
    "eslint-config-prettier": "^2.9.0",
    "file-loader": "^1.1.11",
    "gsap": "^1.20.2",
    "html-webpack-plugin": "^3.2.0",
    "inquirer": "^5.2.0",
    "ip": "^1.1.5",
    "jquery": "^3.2.1",
    "moment": "^2.19.2",
    "popper.js": "^1.14.3",
    "progress-bar-webpack-plugin": "^1.11.0",
    "react": "^16.8.2",
    "react-d3-library": "^1.1.8",
    "react-dom": "^16.1.1",
    "react-router-dom": "^5.0.0",
    "scrollmagic": "^2.0.5",
    "shelljs": "^0.7.8",
    "webpack": "^4.8.1"
  }
}

Answer 1

You cannot use div between switch and route component. Try below code:

class Root extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
            <Route exact path="/" component={Index} />
            <Route path="/hello" component={Hello} />
            <Route path="/game" component={game} />
            <Route path="/jetfighter" component={JetFighter} />
            <Route path="/about" component={About} />
            <Route exact path="/sandbox" component={Sandbox} />
            <Route path="/sandbox/binaryTree" component={BinaryTree} />
            <Route path="/sandbox/randomSelect" component={RandomSelect} />
        </Switch>
      </Router>
    );

  }
}

Answer 2

TL;DR capitalise the name for the game component to Game (plus update the exported name in /game.jsx)

...

It seems like a silly difference, but React components need to begin with a capital letter, here's a quote from the React docs

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.

To learn more about the reasoning behind this convention, please read JSX In Depth.

In your case, your error is saying:

invariant.js?409a :42 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

From this error, we can infer that some Element type is invalid, and it may be do with class/functional components. At the top, in your imports, it looks like you're importing a component called game, but it may need to instead called Game. Without the capital letter, React is not reading this component as a component, but as an object type instead.

Try switching import game from "../component/game/game.jsx"; to import Game from "../component/game/game.jsx"; (and update the game.jsx file to export the capitalised name of the component).