React.js：元素类型无效：

Question

I am creating a sample react.js project in VS 2019

My Index.js

import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const history = createBrowserHistory({ basename: baseUrl });

// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = window.initialReduxState;
const store = configureStore(history, initialState);

const rootElement = document.getElementById('root');

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  rootElement);

registerServiceWorker();

My App.js

import React, { Component } from 'react'
import NavBar from './components/NavBar'
import CoursesList from './components/CourseList'


export default class App extends React.Component {

    render() {
        return (
            <div>
                <NavBar />
                <CoursesList />
            </div>
        )
    }
}

On running I am getting error:

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 NavBar .

I am using Material UI

NavBar.js

import React from 'react'
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'
import Typography from '@material-ui/core/Typography'
const NavBar = () => {
    return (
        <div>
            <AppBar position="static">
                <Toolbar>
                    <Typography variant="title" color="inherit">
                        React & Material-UI Sample Application
                </Typography>
                </Toolbar>
            </AppBar>
        </div>
    )
}
export default NavBar;

PAckage.json

"name": "React_Material_UI",
"version": "0.1.0",
"private": true,
"dependencies": {
  "bootstrap": "^4.3.1",
  "jquery": "3.3.1",
  "react": "^16.0.0",
  "react-dom": "^16.0.0",
  "react-redux": "^5.0.6",
  "react-router-bootstrap": "^0.24.4",
  "react-router-dom": "^4.2.2",
  "react-router-redux": "^5.0.0-alpha.8",
  "react-scripts": "^1.1.5",
  "reactstrap": "^6.3.0",
  "redux": "^3.7.2",
  "redux-thunk": "^2.2.0",
  "rimraf": "^2.6.2",
},
"devDependencies": {
  "ajv": "^6.0.0",
  "babel-eslint": "^7.2.3",
  "cross-env": "^5.2.0",
  "eslint": "^4.1.1",
  "eslint-config-react-app": "^2.1.0",
  "eslint-plugin-flowtype": "^2.50.3",
  "eslint-plugin-import": "^2.14.0",
  "eslint-plugin-jsx-a11y": "^5.1.1",
  "eslint-plugin-react": "^7.11.1"
},
"eslintConfig": {
  "extends": "react-app"
},
"scripts": {
  "start": "rimraf ./build && react-scripts start",
  "build": "react-scripts build",
  "test": "cross-env CI=true react-scripts test --env=jsdom",
  "eject": "react-scripts eject",
  "lint": "eslint ./src/"
}

Any clue?

Answer 1

Try to import NavBar like this in MyApp.js

import React, { Component } from 'react'
import { NavBar } from './components/NavBar'
import CoursesList from './components/CourseList'


export default class App extends React.Component {

    render() {
        return (
            <div>
                <NavBar />
                <CoursesList />
            </div>
        )
    }
}