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.
Related
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.
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.
For context, let me try to explain a little more.
In my project I have a folder, as example, for components.
Inside that folder I have my components files, and an index.js file where I import all the components and export than in the same line as follows:
export { default as Button } from './button'
export { default as Loader } from './loader'
export { default as ImageBackground } from './image-background'
So than I can import these components in Screen Component like that:
import { Button, Loader, ImageBackground } from 'src/components'
If I edit the components file, save and reload the project, everything works fine.
The problem is that when I edit any of these components with the Hot Module Replacement (Hot Reloading) actived, when it is triggered after an edit, it throws the following error:
Unhandled JS Exception: Requiring module "src/components/index.js", which threw an exception: TypeError: Cannot redefine property: Button
Has anyone have any idea why this is happening?
Thanks in advance!
Obs: When I import the component direct without using the index.js or if inside the index.js, I first import the component, than I assign the component to a variable and than I export this variable, it works fine.
my problem was solved when I changed render = () => (...) to render(){ return (...)} in react component
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
I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?
To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));