Develop Reference

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 dynamic import doesn't load classes

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'));
});

When use curly brackets on react-native export

After create some components and export it in the logs show:
Invariant Violation: Element type is invalid: expected a string (for
built-in components) or a class/function (for composite components)
but got: object.
Some answers that i read about this topic complicated more about import and export on react-native.
so, doubt is:
if the component is not dynamic export with curly brackets?
and if dynamic export without curly brackets and with default?

here is the answer
Exporting without default means it's a "named export". You can have multiple named exports in a single file. So if you do this,
export class Template {}
export class AnotherTemplate {}
then you have to import these exports using their exact names. So to use these components in another file you'd have to do,
import {Template, AnotherTemplate} from './components/templates'
Alternatively if you export as the default export like this,
export default class Template {}
Then in another file you import the default export without using the {}, like this,
import Template from './components/templates'
There can only be one default export per file. In React it's a convention to export one component from a file, and to export it is as the default export.
You're free to rename the default export as you import it,
import TheTemplate from './components/templates'
And you can import default and named exports at the same time,
import Template,{AnotherTemplate} from './components/templates'

You should use the curly braces for import a module only if the module is just exported, and if the module is exported as default exported module, you should import it without curly braces.
Exported module example 1:
...
export SomeModule;
then you should import it as below:
import { SomeModule } from 'someWhere'
...
Exported module example 2:
...
export default SomeModule;
then you should import it as below:
import SomeModule from 'someWhere'
...

Using single entry file for react native app

I am attempting to use a single entry file for android and iOS in a React Native app.
I have followed a few tutorials and have ended up with the following:
index.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and Android</Text>
);
}
}
index.ios.js
import React from 'react';
import { AppRegistry } from 'react-native';
import {Main} from './index';
AppRegistry.registerComponent('Main', () => Main);
I end up with the following 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.
If I remove the curly braces from Main in the import statement it says '...but got: object' so I feel like it's something to do with my exporting/importing but nothing seems to work. Any help would be appreciated.

You are exporting your Main component as:
export default class Main extends Component {
but importing as:
import {Main} from './index';
The default export should be imported as:
import Main from './index';
If you use default export, you must import like this. If this doesn't work, there must be another problem in your code.

React Native tries to import based on platform. For example, if you have index.ios.js and index.android.js in the same folder, React Native will bundle index.ios.js only if it is bundling for ios. It is possible that when you import from ./index, React Native is revolving the path with index.ios.js instead of index.js because you are bundling for ios.
If you are curious enough, you can try to console.log the content of the imported module, e.g. console.log(Main) to see what is actually getting imported.

React.js with browserify imports not working

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