App.js module not found; Can't resolve, Failed to compile - javascript

I am new to javaScript and am having an interesting problem. Here is some context; I am running windows 10, node v15, I have downloaded expo and am using visual studio. The command I am using to run my code is npm start.
The problem happens when I add the code to line 4 of app.js. I am trying to import a file that is simply just a button. The code compiles and loads fine until I add line 4.
The error I get looks like this;
"C:/Windows/System32/pleasework/App.js
Module not found: Can't resolve 'C:WindowsSystem32pleasework"
Thank you for any insight at all!
App.js CODE
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import buttonWelcome from 'C:\Windows\System32\pleasework\node_modules\sweet.js';
export default class App extends Component() {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Welcome</Text>
<buttonWelcome text='Login' color='red' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 32,
textAlign: 'center',
margin: 10,
},
});
button CODE, name of file is sweet.js
import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity } from 'react-native';
const buttonWelcome = props => {
const content = (
<View style={[style.button, {backgroundColor: props.color}]}>
<Text style={styles.text}>{props.text}</Text>
</View>
)
return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
padding: 16,
width: 200,
borderRadius: 24,
alignItems: 'center'
},
text: {
color: 'white',
fontSize: 20
}
})
export default buttonWelcome;

try a relative url with forward slashes:
import buttonWelcome from '../sweet.js';
btw you should never put source files in node_modules - that's only for node_modules code..

The import statement is wrong.
It should be
import buttonWelcome from './sweet.js';
As you can see it is using linux style file path which is important. This will work on both linux and windows.

Related

Expo React Native Loads Custom Font Only Once

everyone. I'm new around here. I'm using Expo for building a react native app. I want to implement the custom fonts in my project. So I've gone through the docs, https://docs.expo.io/guides/using-custom-fonts
But the problem is only one components gets custom fonts, None of other components don't loads the custom fonts.
Here is my code,
App.js
import React from "react";
import {
StyleSheet,
SafeAreaView,
Image,
StatusBar,
Platform,
Text
} from "react-native";
import WelcomeScreen from "./app/screen/WelcomeScreen";
//import ViewImageScreen from "./app/screen/ViewImageScreen";
import {
useFonts,
Poppins_300Light,
Poppins_400Regular,
Poppins_400Regular_Italic,
Poppins_500Medium,
Poppins_700Bold,
Poppins_900Black,
} from "#expo-google-fonts/poppins";
import { AppLoading } from "expo";
export default function App() {
let [fontsLoaded] = useFonts({
"Shamim-Bn": require(
'./app/assets/Shamim-Font-Bn.ttf'
),
"Poppins-Light": Poppins_300Light,
"Poppins-Regular": Poppins_400Regular,
"Poppins-Regular-Italic": Poppins_400Regular_Italic,
"Poppins-Medium": Poppins_500Medium,
"Poppins-Bold": Poppins_700Bold,
"Poppins-Black": Poppins_900Black,
});
if(fontsLoaded){
return (
<SafeAreaView style={styles.container}>
// Only this components gets Custom font
<Text style={styles.custom}>পছন্দের ঘর এখন এখানেই...</Text>
<WelcomeScreen />
</SafeAreaView>
)
} else{
return(
<AppLoading />
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
justifyContent: "center",
alignItems: "center",
},
custom:{
fontFamily: 'Shamim-Bn',
fontSize: 20,
}
});
WelcomeScreen.js
import React from 'react';
import {StyleSheet, ImageBackground, View, Image, Text} from 'react-native';
import colors from '../config/colors';
function WelcomeScreen(){
return(
<ImageBackground
style={styles.background}
source={require('../assets/welcome-bg.png')}>
<View style={styles.logoBox}>
<Image style={styles.logo} source={require('../assets/logo.png')} />
<Text style={styles.tagline}>পছন্দের ঘর এখন এখানেই...</Text>
</View>
<View style={styles.loginBtn}></View>
<View style={styles.signupBtn}></View>
</ImageBackground>
)
}
//
const styles = StyleSheet.create({
background: {
flex: 1,
alignItems: "center",
justifyContent: "flex-end"
},
logoBox: {
position: "absolute",
top: 80,
alignItems: "center"
},
logo: {
width: 240,
height: 120,
},
tagline:{
marginTop: 10,
fontSize: 19,
fontWeight: "700",
color: colors.sub,
fontFamily: 'Shamim-Bn',
},
loginBtn:{
backgroundColor: colors.main,
width: "100%",
height: 70
},
signupBtn:{
backgroundColor: colors.sub,
width: "100%",
height: 70
}
});
export default WelcomeScreen;
Edit:
More preciously, The view only declared in to App.js gets the custom font. The view like WelcomeScreen.js, I import to App.js doesn't get custom fonts.
Please help.
I've solve this problem. If you set fontWeight property along with custom font in the styles declaration, the <Text> components rendered the default fonts available on the device. The only way you can use different variants of the fonts by importing and declaring the font variants like this:
let [fontsLoaded] = useFonts({
"Shamim-Bn": require(
'./app/assets/Shamim-Font-Bn.ttf'
),
"Poppins-Light": Poppins_300Light,
"Poppins-Regular": Poppins_400Regular,
"Poppins-Regular-Italic": Poppins_400Regular_Italic,
"Poppins-Medium": Poppins_500Medium,
"Poppins-Bold": Poppins_700Bold,
"Poppins-Black": Poppins_900Black,
});
Later set the fonFamily property to Poppins-Regular or Poppins-Bold.
Again, don't use the fontWeight property with it.

undefined is not an object (evaluating '_this.props.navigator.push') react native , when i am trying to navigate from one page to another

Here is the sample code , i am trying react-native-navigation
i used react-native init navigate to start the project
and afterwards i installed
yarn add react-native-navigation#latest
the code run perfect for first screen , but as i am making a call to showNextScreen function it throws the error
undefined is not an object (evaluating 'this.props.navigator.push') react native
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import firstPage from './app/components/firstPage';
export default class navigate extends Component {
//function to move to next screen
showNextScreen = () =>{
this.props.navigator.push({
screen: 'firstPage',
title: 'firstScreen'
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text onPress={this.showNextScreen.bind(this)}
style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('navigate', () => navigate);
Using React Native Navigation, you have to bootstrap your app differently than how it's done originally. Native Navigation doesn't use the registerComponent setup since it's a native navigator.
The steps to fully setting up are listed in their docs https://wix.github.io/react-native-navigation/#/usage

React-Native: propTypes and createClass deprecated

I'm beginning in React Native. I followed the instruction as recommended:
react-native init myProject. So to test the running application, I used the remote JS debugging to check if everything is ok.
Then I saw that propTypes and createClass are deprecated.
I don't know how to migrate this to the new version. (The instructions are for React and not React Native, I didn't use createClass but extends Component for example)
Here are my dependencies :
"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
Here is my code :
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class myProject extends Component {
render() {
return (
<View >
<Text >
Welcome to React Native!
</Text>
<Text >
To get started, edit index.android.js
</Text>
<Text >
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('myProject', () => myProject);
For prop types you should now use the prop-types package:
https://github.com/facebook/prop-types
For createClass you should now use the create-react-class package:
https://www.npmjs.com/package/create-react-class
Read more about it here.

Can't find variable: React

I am trying to make a simple iOS page with a button that triggers an action.
I have followed the tutorial on how to get started and this is my index code:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Component,
AlertIOS // Thanks Kent!
} = React;
class myProj extends Component {
render() {
return (
<View style={styles.container}>
<Text>
Welcome to React Native!
</Text>
<TouchableHighlight style={styles.button}
onPress={this.showAlert}>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
</View>
);
}
showAlert() {
AlertIOS.alert('Awesome Alert', 'This is my first React Native alert.', [{text: 'Thanks'}] )
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 44,
flexDirection: 'row',
backgroundColor: '#48BBEC',
alignSelf: 'stretch',
justifyContent: 'center'
}
});
AppRegistry.registerComponent('myProj', () => myProj);
The problem is that when I run it from Xcode on my device I get
Can't find variable: React
render
main.jsbundle:1509:6
mountComponent
mountChildren
Any idea what might be the problem here?
In the latest version of React Native you must import React from 'react' package
import React, {Component} from 'react';
import {
View,
...
} from 'react-native';
import * as React from 'react';
Add the constructor to before render
constructor(props) {
super(props);
}
Adding import React from 'react'; in all the jsx/tsx file resolved my issue

I just added var React = require('react-native'); and my whole build failed

I just added
var React = require('react-native');
to my index.ios.js file but when I reload my React Native application, this
comes up:
It says React is read-only?!
So I tried to change the permissions on the react-native module by doing
sudo chmod -R 777 ExampleProject
sudo chmod -R 777 ExampleProject/node_modules/react-native
but it still doesn't work. What did I do wrong?
This is the full source code of my index.ios.js file:
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
class Logbook extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Logbook', () => Logbook);
You actually import react-native two times. The second time around it complains. Just get rid of
var React = require('react-native');
This does the same thing but with the ES6 module syntax
import React from 'react-native';

Categories