How I got where I am(you can skip to next paragraph)
Recently I picked up react-native for mobile development and it was hell, spent 3 hours googling solutions why isn't my react-native init project even run, after downgrading a couple of packages I was able to run this blank app fine, but soon after, I was still receiving errors that didn't seem to be even from my code.. So 3 days into development and chill where I have seen nothing more, but various errors and I didn't progress with the app at all.
My latest issue I can't solve for quite some time:
So the error I am getting is "Attempted to assign to readonly property". Now the stack trace always points to node_modules/../ReactNativeRenderer-dev.js
this is my code that has almost nothing in it and still reproduces the issue
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import { createStackNavigator} from 'react-navigation';
// routes
//import HeaderComp from './src/components/headerComp';
//import NavigatorDiv from './src/router';
class Home extends React.Component{
render() {
return <Text> hello this is home </Text>
}
}
class List extends React.Component{
render() {
return <Text> hello this is List </Text>
}
}
const NavigatorDiv = createStackNavigator({
Home: {
screen: Home
},
MusicListView: {
screen: List
},
}, {
initialRouteName: 'Home',
});
type Props = {};
export default class App extends React.Component<Props> {
render() {
return <NavigatorDiv/>
}
}
EDIT
So it appears that the only way to fix something in react-native is to downgrade it even more, I started with 0.56, maybe by the end of this week I will reach the first alpha, anyways, the error is fixed, the code runs fine with this setup:
react-native-cli: 2.0.1
react-native: 0.50.0
In my case; I was using npm primarily in a project & accidentally executed a yarn command. By diving deep, I observed two lock files. Deleting yarn-lock.json did the trick for me.
Related
New to React JS, props validation practise as follows:
import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component {
render() {
return (
<div>
<h3>String : {this.props.propstring}</h3>
</div>
);
}
}
App.propTypes = {
propstring : PropTypes.string
}
App.defaultProps = {
propstring : "My Name"
}
export default App;
import React, { component } from 'react';
import ReactDOM from 'react-dom';
import App from './AppProp.js';
ReactDOM.render(<App />,document.getElementById('root'));
Getting an error as:
TypeError: Class extends value undefined is not a constructor or null.
What am I missing here and how can I resolve the above error?
There are 2 possible problems. Most probably you're importing { component }(like you do in your index file, which is wrong), instead of { Component } somewhere in your code and trying to extend component which doesn't exist.
The other reason is that you might be circularly importing classes, but I doubt it. Also, is your file called AppProp.js?
Post the stack trace and it would also help if you post all the components you're using. Post your package.json as well, as you might be using wrong absolute paths.
The code is perfectly fine. I executed it on my local machine and it ran fine.
The only issue you may be facing is to with
circularly importing classes, which is apparently a limitation
Know more from the resource:
https://esdiscuss.org/topic/how-to-solve-this-basic-es6-module-circular-dependency-problem
I want a directory selection dialog in my React App. I followed this SO thread that might work for some people but not for me.
Getting compile time error as
Property 'directory' does not exist on type 'DetailedHTMLProps<InputHTMLAttributes, HTMLInputElement>'.
I upgraded react to the latest RC-version 17.rc.1 thinking that there may be a bug fix for this but no success.
Edit
There is a hack to add this script at the end of file using tag for directory selection, suggested by #Scratch'N'Purr in comments.
declare module 'react' {
interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
// extends React's HTMLAttributes
directory?: string;
webkitdirectory?:string;
}
}
It works fine in Javascript but the problem is with Typescript. Guess, you are right about it being an issue.
You can set it manually using ref though.
import * as React from "react";
import "./styles.css";
export default function App() {
const ref = React.useRef<HTMLInputElement>(null);
React.useEffect(() => {
if (ref.current !== null) {
ref.current.setAttribute("directory", "");
ref.current.setAttribute("webkitdirectory", "");
}
}, [ref]);
return <input type="file" ref={ref} />;
}
Following Programming with Mosh's React tutorial and stuck on this very initial portion after installing everything, bootstrap, popper, etc. Deleted package json lock and double checked spelling. For whatever reason no matter what, it is failing to compile and I get the same error every time:
"Module not found: Can't resolve './components/counter.jsx'
Picture of my terminal and vscode
Picture of my errors in dev tools
I really am stuck on this portion and could use help figuring out what the issue is.
import React, { Component } from "react";
class Counter extends Component {
state = {};
render() {
return <h1>Hello World</h1>;
}
}
export default Counter;
In his tutorial he has changed the JSX file name from counter.jsx to counterComponent.jsx. Import as below:
import Counter from './components/counterComponent'
When importing components and other javascript modules, you shouldn't provide the file extension. Try and remove the .jsx from the import so it says:
import Counter from "./components/counter";
I am implementing 2 screens using react-navigation. But I got the warning below while navigating to the second page:
Warning: isMounted(...) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.
Versions:
react: 16.3.1
react-native: 0.55.2
react-navigation: 1.5.11
util: 0.10.3
Login.js
import React, { Component } from 'react';
import { Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
import styles from "./styles";
export default class Login extends Component {
constructor(props) {
super(props);
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<View style={styles.formContainer}>
<TouchableOpacity style={styles.button} onPress={()=> navigate('Home')} >
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
)
}
Home.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import styles from "./styles";
export default class Home extends Component {
constructor(props) {
super(props);
}
render() {
const { navigate } = this.props.navigation;
return(
<View style={styles.container}>
<Text>Home Screen</Text>
</View>
)
}
}
What am I missing here?
This is a problem with latest React Navigation and React Native. To silence it add:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
I expect it will be fixed in React Navigation within next few weeks.
Is is actually a React-Native issue
You can wait and check when a fix is available here:
https://github.com/facebook/react-native/issues/18868
Or in the meantime you can hide the warning like suggested.
Use this statement in index.js:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
The following solution works for me:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
react-navigation issue is now closed, you can look here
They are stating that it is a problem somewhere inside of react-native
This is not from react-navigation as i looked into the node_modules and react-navigation doesn't use isMounted, Its coming from somewhere within React-Native,
I have also done same hack used by #Romsun
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
Ignoring this message is the wrong way for a good developer
If we remove this problem then the memory leakage is decreased.
If you are using EXPO for RN development then this issue is now fixed in expo 27.0.2.
See https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/12
The answers above didn't work for me, but adding the following to index.js did the trick:
console.ignoreYellowBox = ['Warning: isMounted(...) is deprecated'];
Or upgrade to expo 27.0.2 which basically adds the above to Expo.js. See more information here: https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10
As some of the other answers stated, it's a react-native issue so hopefully it will be fixed soon there and then in the following version of Expo.
This is what i did for this problem for the time being:
step 1:Tap on the warning
step 2: In the yellow window click on the stack trace option in top right
step 3: Find the path where the warning has occured,ex:C:\Users\username\projectname\node_modules\react\cjs\react.development.js
step 4: Open the path in editor
step 5: Find the key word isMounted under the deprecated api's and delete the deprecated function and warning related under it.
step 6: Save and reload your app!!thats it
If you are using an expo client, update your version to expo#27.0.2 which fixes this warning. . .
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'));