Develop Reference

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

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App.
The above error occurred in the <div> component:
at div
at App
App.js
import './App.css';
import LeftMenu from './components/LeftMenu';
import RightMenu from './components/RightMenu';
import MainContainer from './components/MainContainer';
function App() {
return (
<div className="App">
<LeftMenu/>
<MainContainer/>
<RightMenu/>
<div className='background'>Hello</div>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
The page is blank showing nothing I expected the background image to be displayed.

Component inside a component

I am working with React.js
I want to use a component x inside app component(app.js) that is inside index.js.
It does not work.
**
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.
Check the render method of `App`.
**
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
App.js
import "./styles.css";
import {SubComponent} from "./components/Subcomponent";
export default function App() {
return (
<SubComponent/>
);
}
Subcomponent
const HelloWorld = ()=>{ return(<p>Hello World !</p>)}
export default HelloWorld();
Subcomponent folder is :

Your subcomponent:
needs to export the same name as what's being imported in App - either use the same named import/export in both places, or use default import/export in both places. (You're currently importing a named SubComponent but default exporting)
needs to export a component, which is a function, so that it can be called with React.createElement inside App. Don't invoke the function yourself.
App.js
import {SubComponent} from "./components/Subcomponent";
Subcomponent
export const SubComponent = () => {
return(<p>Hello World !</p>)
};

First React component: Getting error if I name component as App

I am learning React and got weird error. If I name my component as "App" then get the following error:
expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
But if I rename it to Apps then it works fine. Below is code snippet:
function App(){
return <h1> hiiii</h1>;
}
export default App;
import ReactDom from "react-dom";
import Test from './Test';
import Apps from './Apps';
import App from './App';
import './index.css';
console.log (App);
console.log(Test);
ReactDom.render(
<App />,
document.getElementById("root")
);
Even console.log(App) also shows null object.
Can anyone tell me the reason for it?

NextJS Element type is invalid

I create one component in the widget folder and import it into my main homepage (index.js)
It showing error
Error: Element type is invalid: expected a string (for built-in components) or 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.
The main file code is
import { React, Component } from "react";
import axios from "axios";
import Style from "./widget-style/Notified.module.css";
import NotifiedModal from "../modals/NotifiedModal";
export default class GetNotified extends Component {}

You have to import React like this:
import React, { Component } from "react";
The first one is a default import, the second is a named import.

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

I've tried to find the answer via similar questions but haven't been able to get this resolved.
When I run a react app, I get the following error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of App.
My index.js file looks like this:
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { AppProvider } from './context'
ReactDOM.render(
<React.StrictMode>
<AppProvider>
<App />
</AppProvider>
</React.StrictMode>,
document.getElementById('root')
);
And my App.js file looks like this:
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// import pages
import Home from "./pages/Home";
import About from "./pages/About";
import SingleCocktail from "./pages/SingleCocktail";
import Error from "./pages/Error";
// import components
import Navbar from "./components/Navbar";
function App() {
return (
<Router>
<Navbar />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/cocktail/:id">
<SingleCocktail />
</Route>
<Route path="*">
<Error />
</Route>
</Switch>
</Router>
);
}
export default App;
I originally had issues with the imports which I was able to resolve but I'm lost.
Any points on what to look at would be great, thank you :)