Develop Reference

use module.export with import

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/

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?

React Native -- Error in multiple class import via index.js

I am getting an error
Invariant Violation: 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
I have both CustomButton and InputLabel classes
import React, {Component} from 'react';
import { anycomps... } from 'react-native';
export default class CustomButton extends Component{}
and
import React, {Component} from 'react';
import { anycomps... } from 'react-native';
export default class InputLabel extends Component{}
and in my index.js
import CustomButton from './CustomButton';
import InputLabel from './InputLabel';
export { CustomButton, InputLabel };
and in my app.js
import React, {Component} from 'react';
import { anycomps... } from 'react-native';
import { CustomButton, InputLabel } from './components';
export default class MyMain extends Component{
... code renders here
}
my folder structure is:
> components
>CustomButton.js
>InputLabel.js
>index.js
> app.js
What did I miss or do wrong?
I tried it this way Vue Apps and it worked. Is react native having different implementation for this?

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.