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?
Related
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.
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>)
};
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.
// Code in index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Here is the error message:
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.
So, I am very new to reactjs (currently using expo) and I've been looking at https://reactrouter.com/web/guides/primary-components and I tried just copying the first example to see what would happen:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
function App() {
return <h1>Hello React Router</h1>;
}
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
And I get this error
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 `ExpoRootComponent`.
So is there something I'm missing? Am I supposed to just use ReactDOM.render only on components? Any input would be appreciated, thanks.
As you are telling you are using Expo, Expo is used to build react-native app so you may have to tweak your code,
so you need to import registerRootComponent from the expo
import { registerRootComponent } from 'expo';//add this in beginning
registerRootComponent(App); //add this to bottom of your code instead of using react-dom
or
in the terminal just use npm start(Your code is fine according to react standards).
Make sure in package.json file in Scripts use have added the correct file path to start.