Error : Cannot use import statement outside a module in react native new project

Question

I am new to React Native. I created a new project using npx react-native init NewProject2. Then, I imported the project in VS Code. When I run my project on my Android device, it works fine but VS Code shows an error. This is my App.js :

/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, } from 'react-native'; import { Colors } from 'react-native/Libraries/NewAppScreen'; import Login from './src/pages/Login'; const App: () => React$Node = () => { return ( <View style={styles.container}> <StatusBar backgroundColor = "#e1ad01" ></StatusBar> <Text style={{color:"#e1ad01",fontSize:18}}>Just some text!!</Text> </View> ); }; const styles = StyleSheet.create({ container : { flex : 1, backgroundColor:'#000000', alignItems : "center", justifyContent : "center" } }); export default App;

And this is my index.js :

/** * @format */ import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App);

This is the error image :

My Login.js has the same error.

I didn't write this. When I create a new project, it by default comes written in this way. What should I replace it with? — Shashank Gupta
– Shashank Gupta, Commented Feb 23, 2020 at 17:37
Maybe the template is faulty? Can you ask the person who made it or supports it? — evolutionxbox
– evolutionxbox, Commented Feb 23, 2020 at 17:38
Actually I am using npx react-native init NewProject2 for creating a new project. Whom am I supposed to contact for this? — Shashank Gupta
– Shashank Gupta, Commented Feb 23, 2020 at 17:42
Sorry I misunderstood. I thought "NewProject2" was a template, but that's just your project name — evolutionxbox
– evolutionxbox, Commented Feb 23, 2020 at 17:48

user12551649 · Accepted Answer · 2020-02-23 19:10:29Z

Hey so you could just delete your app.js and make a new one like this below

App.js:

import React, { Component } from 'react'; import {View,Text,StyleSheet} from 'react-native'; class App extends Component { render(){ return( <View style={styles.container}> <StatusBar backgroundColor = "#e1ad01" ></StatusBar> <Text style={{color:"#e1ad01",fontSize:18}}>Just some text!!</Text> </View> ); } const styles = StyleSheet.create({ container : { flex : 1, backgroundColor:'#000000', alignItems : "center", justifyContent : "center" } }); export default App;

I would suggest making a new folder in your project as "src" and place all your code in it, so inside "src" place this App.js file and then import it into your "index.js" like this. I didn't run your code so I don't know if there is any issue with ur code but it seems fine to me.

index.js:

import {AppRegistry} from 'react-native'; import App from './src/App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App);

I used to the class component instead of functional cuz u might be dealing with states later on so it will be helpful.

Fell free to comment if you face any error again.

Yes this is working fine. I used export default class Login extends Component in place of the line which showed error and this is the same thing. Thank You.

Collectives™ on Stack Overflow

Error : Cannot use import statement outside a module in react native new project

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related