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, Feb 23 '20 at 17:37
Maybe the template is faulty? Can you ask the person who made it or supports it? — evolutionxbox, Feb 23 '20 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, Feb 23 '20 at 17:42
Sorry I misunderstood. I thought "NewProject2" was a template, but that's just your project name — evolutionxbox, Feb 23 '20 at 17:48
I see you're debugging using `node --inspect-brk ...` this is probably by-passing babel causing the error. — evolutionxbox, Feb 23 '20 at 17:50

score 1 · Accepted Answer · answered Feb 23 '20 at 19:10

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. — Shashank Gupta, Feb 24 '20 at 05:12

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

1 Answers1

Linked