Vfrdtyky

I need your help! I'm trying to build app with custom aliases in react native with babel. I have tried all but nothing not work. I am getting this error after load @babel/preset-react:

Unexpected use of reserved word 'import' (http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:1365)



Unexpected use of reserved word 'import' (http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false:1365)

IMAGE WITH ERROR

REFERENCE PROJECT

Project data:

package.json

{

  "name": "ResolveModule",

  "version": "0.0.1",

  "private": true,

  "scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start",

    "test": "jest"

  },

  "dependencies": {

    "react": "16.0.0-alpha.6",

    "react-native": "0.57.4"

  },

  "devDependencies": {

    "@babel/preset-env": "^7.1.5",

    "@babel/preset-react": "^7.0.0",

    "babel-jest": "20.0.3",

    "babel-plugin-module-resolver": "^3.0.0-beta.0",

    "babel-preset-react-native": "1.9.2",

    "jest": "20.0.3",

    "metro-react-native-babel-preset": "0.49.0",

    "react-test-renderer": "16.0.0-alpha.6"

  },

  "jest": {

    "preset": "react-native"

  }

}

.balberc

{

  "presets": [

    "@babel/preset-env",

    "@babel/preset-react"

  ],

  "plugins": [

    [

      "module-resolver",

      {

        "cwd": "babelrc",

        "root": "./app",

        "alias": {

          "components": "./app/components/main"

        }

      }

    ]

  ]

}

App.js

/**

 * Sample React Native App

 * https://github.com/facebook/react-native

 *

 * @format

 * @flow

 */



import React, { Component } from 'react';

import { Platform, StyleSheet, Text, View } from 'react-native';

import Main from 'components/Main';



const instructions = Platform.select({

  ios: 'Press Cmd+R to reload,n' + 'Cmd+D or shake for dev menu',

  android:

    'Double tap R on your keyboard to reload,n' +

    'Shake or press menu button for dev menu',

});



export default class App extends Component {

  render() {

    return (

      <View style={styles.container}>

        <Text style={styles.welcome}>Welcome to React Native!</Text>

        <Text style={styles.instructions}>To get stsdfsdfsdfarted, edit App.js</Text>

        <Text style={styles.instructions}>{instructions}</Text>

        <Main />

      </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,

  },

});

Main.js

import React, { Component } from 'react';

import { Text, View } from 'react-native';





export default class Main extends Component {

    render() {

        return (

            <View>

                <Text>Tosdfsdfsdfsdfs</Text>

            </View>

        );

    }

}

Windows 10, VS Code, Android Studio -> AVD Manager

How are you going to solve this problem?