Ad
Element Type Is Invalid: Expected A String (for Built-in Components) Or A Class/function (for Composite Components) But Got: Symbol
I'm trying to use lazy Loading
for my app.
index.js
import React, { Suspense , lazy , Component } from 'react';
import ReactDOM from 'react-dom';
import 'index.scss';
import SomeComponent from './someComponent.js';
import * as serviceWorker from 'serviceWorker';
ReactDOM.render(<SomeComponent />, document.getElementById('root'));
serviceWorker.unregister();
some component index.js file
import React, { Suspense , lazy , Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = lazy(() => import('./_header'));
class SomeComponent extends Component {
render() {
return (
<BrowserRouter>
<React.Fragment>
<Suspense>
<Header />
</Suspense>
</React.Fragment>
</BrowserRouter>
);
}
}
export default SomeComponent;
header index.js file
import React, { Component } from 'react';
import './index.scss';
class Header extends Component {
render() {
return (
<h1>Header</h1>
);
}
}
export default Header;
But I've got this error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: symbol.
My react version is v16.6.3.
Ad
Answer
Suspense and lazy
are reachable in the following versions :
"react": "^16.6.3"
"react-dom": "^16.6.3"
This error relates to the react-dom
which was not upgraded correctly!
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad