title: error Unexpected identifier "import React from 'react';" in react-native
body: <p>I try to implement <strong>Preloading</strong> <strong>module</strong> concept in react native. I follow the react-native documentation. <a href="https://facebook.github.io/react-native/docs/performance#configure-preloading-and-inline-requires" rel="nofollow noreferrer">Configure Preloading and Inline Requires
  </a>. I run this command "<code>react-native start --verbose</code>" and getting error. </p>
  
  <p><strong>Error::</strong> </p>
  
  <pre><code>error Unexpected identifier
  debug /home/iron/Documents/React-native/16-05-2019/LazyLoading/index.js:1
  import React from 'react';
         ^^^^^
  
  SyntaxError: Unexpected identifier
      at Module._compile (internal/modules/cjs/loader.js:721:23)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Module.require (internal/modules/cjs/loader.js:690:17)
      at require (internal/modules/cjs/helpers.js:25:18)
      at Object.&lt;anonymous&gt; (/home/iron/Documents/React-native/16-05-2019/LazyLoading/packager/modulePaths.js:2:20)
      at Module._compile (internal/modules/cjs/loader.js:776:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
  </code></pre>
  
  <p><strong>metro.config.js</strong></p>
  
  <pre><code>/**
   * Metro configuration for React Native
   * https://github.com/facebook/react-native
   *
   * @format
   */
  
  const modulePaths = require('./packager/modulePaths');
  const resolve = require('path').resolve;
  const fs = require('fs');
  
  // Update the following line if the root folder of your app is somewhere else.
  const ROOT_FOLDER = path.resolve(__dirname, '..');
  
  const config = {
    transformer: {
      getTransformOptions: () =&gt; {
        const moduleMap = {};
        modulePaths.forEach(path =&gt; {
          if (fs.existsSync(path)) {
            moduleMap[resolve(path)] = true;
          }
        });
        return {
          preloadedModules: moduleMap,
          transform: { inlineRequires: { blacklist: moduleMap } },
        };
      },
    },
  };
  module.exports = config;
  </code></pre>
  
  <p><strong>index.js::</strong></p>
  
  <pre><code>import React from 'react';
  const modules = require.getModules();
  const moduleIds = Object.keys(modules);
  const loadedModuleNames = moduleIds
     .filter(moduleId =&gt; modules[moduleId].isInitialized)
     .map(moduleId =&gt; modules[moduleId].verboseName);
  
  const waitingModuleNames = moduleIds
     .filter(moduleId =&gt; !modules[moduleId].isInitialized)
     .map(moduleId =&gt; modules[moduleId].verboseName);
  
  console.log(
     'loaded:',
     loadedModuleNames.length,
     'waiting:',
     waitingModuleNames.length
  );
  
  // grab this text blob, and put it in a file named packager/modulePaths.js
  console.log(`module.exports = ${JSON.stringify(loadedModuleNames.sort())};`);
  import App from './src/App';
  const app = new App();
  </code></pre>
  
  <p><strong>packager/modulePaths.js::</strong></p>
  
  <pre><code>const loadedName = require('../index');
  module.exports = loadedName.loadedModuleNames;
  </code></pre>
  
  <p><strong>Package.json</strong></p>
  
  <pre><code>{
    "name": "LazyLoading",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
      "test": "jest"
    },
    "dependencies": {
      "native-base": "^2.12.1",
      "react": "^16.8.6",
      "react-loadable": "^5.5.0",
      "react-native": "^0.59.9",
      "react-native-navigation": "^2.21.0",
      "react-redux": "^7.0.3",
      "redux": "^4.0.1",
      "redux-form": "^8.2.3",
      "redux-thunk": "^2.3.0"
    },
    "devDependencies": {
      "@babel/core": "7.4.5",
      "@babel/runtime": "7.4.5",
      "babel-jest": "24.8.0",
      "jest": "24.8.0",
      "metro-react-native-babel-preset": "0.54.1",
      "react-test-renderer": "^16.8.6"
    },
    "jest": {
      "preset": "react-native"
    }
  }
  </code></pre>
  
  <p>I provide a code above, please tell me how to solve this issue. Also how to implement error loadable module concept in react-native. I have never found any article for this. </p>
  
  <p>Thanks!</p>