I am trying to import a React component dynamically, in order to render it inside an element. However, it doesn't work and throws an exception saying :
"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"
Do you have any idea?
This is how I have imported the component:
import('../assessment/assessmentContainer').then(x=>{
ReactDOM.render(<x.AssessmentContainer />, document.getElementById('root'));
});
} ```
And this is my component which is exported
import React, { Fragment } from 'react';
``` export default class AssessmentContainer extends React.Component{
render(){
return(
<Fragment>
{"Assessment!"}
</Fragment>
)
}
} ```
You are exporting a default from your component. You have the option of naming the export of your component or using the default in your import.
import('../assessment/assessmentContainer').then(x=> {
ReactDOM.render(<x.default/>, document.getElementById('root'));
});
Try this : https://codesandbox.io/s/pensive-darkness-vi3xe
import('../assessment/assessmentContainer').then(x=> {
ReactDOM.render(<x.default.AssessmentContainer/>,
document.getElementById('root'));
});
Related
This line of codE:
module.exports = import("./src/client/Hello.js");
Is giving this error:
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.
What am I doing wrong?
// Hello.js
import React, { Component } from 'react';
import Bye from './Bye';
import $ from 'jquery';
export default class Hello extends React.Component {
render() {
return (
<div>
Hello
<Bye/>
</div>
);
}
}
Also I am using webpack. Because of which Hello.js is transpiled.
You should import your component using import:
import Hello from "./Hello";
Read more about importing components here: https://create-react-app.dev/docs/importing-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>)
};
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?
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.
I am learning React.js and can not make my firt component to render. My project looks like this:
javascript
|
--components
| |
| ---- searchbar.jsx
|
|
--app.jsx
searchbar.jsx:
export default class SearchBar extends React.Component {
//some code
render(){
//some code
}
}
app.jsx looks like this.
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchBar } from './components/searchbar.jsx';
ReactDOM.render(
<App />
,
document.getElementById('content')
);
class App extends React.Component {
render() {
<div>
<SearchBar placeHolder='search bar text'/>
</div>
}
}
When compiled and packed there is no error. However when I run it, I am getting following error:
Warning: React.createElement: 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.
printWarning
warning
createElement
1../components/searchbar.jsx
When I put all code in app.jsx and use no import then everything is working as should and search bar is showing.. but I want to put components in different files. How do I do that then?
SearchBar module exports a default value, not a named export (by enclosing with curly braces braces you require a named export )
You should change import { SearchBar } to import SearchBar
Additionally, you should move the declaration of App towards the beginning of the file, it should be declared before it is used