user image

Joseph Morgan
Published in : 2022-01-31

[solved] Error: Element type is invalid: expected a string (for built-in components)

React js

Hello Everyone,
I am facing this error in my Reactjs App when I try to install react-snap updated the index.js this error came suddenly 

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

The used code in index.js is 

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'react-perfect-scrollbar/dist/css/styles.css';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import 'react-quill/dist/quill.snow.css';
import 'prismjs/prism';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-jsx';
import 'nprogress/nprogress.css';
import 'src/__mocks__';
import 'src/assets/css/prism.css';
import 'src/mixins/chartjs';
import React from 'react';
import { hydrate, render } from "react-dom";
// import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { enableES5 } from 'immer';
import * as serviceWorker from 'src/serviceWorker';
import store from 'src/store';
import { SettingsProvider } from 'src/contexts/SettingsContext';
import App from 'src/App';

enableES5();

const APP = (  
<Provider store={store}>
  <SettingsProvider>
    <App />
  </SettingsProvider>
</Provider>
);

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(<APP />, rootElement);
} else {
  render(<APP />, rootElement);
}

serviceWorker.register();

What should I do? 

web-brackets.com

Comments

Mohamed Atef Date : 2022-01-31

Best answers

46

Best answers

46

Hello,
There is a problem in using the const which called APP, you used it like component and exported from somewhere but the truth is it's regular constant so you just need to call it's name using APP not <APP />

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(APP, rootElement);
} else {
  render(APP, rootElement);
}

Good luck

Joseph Morgan Date : 2022-01-31

Thank you so much :)
it's beginners mistakes

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

React Redux : Connect is not called
Publish date: 2022-03-02 | Comments: 1

Tag: React js

Could not be processed as an image because it has an invalid content type
Publish date: 2021-12-08 | Comments: 0

Tag: React js

[Solved] Cannot read properties of null (reading 'getBoundingClientRect')
Publish date: 2021-12-02 | Comments: 2

Tag: React js

[solved] Expected a conditional expression and instead saw an assignment
Publish date: 2021-11-29 | Comments: 0

Tag: React js

[solved] useEffect is repeating the request Reactjs
Publish date: 2022-04-07 | Comments: 2

Tag: React js

How to use SetFieldValue from outside render function? Formik
Publish date: 2021-07-03 | Comments: 2

Tag: React js