react-native: error: bundling failed: index.js: "" is not a valid identifer name

Error starting a new project with react-native init ProjectName command, it always starts with this error,

Loading dependency graph, done.
error: bundling failed: index.js: "" is not a valid identifer name
 BUNDLE [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

:: ffff: 127.0.0.1 - - [Nov 05, 2019: 12: 21: 47 +0000] "GET /index.bundle?platform=android&dev=true&minify=false HTTP / 1.1" 500
- "-" "okhttp / 3.12.1

Already tried to create a new project and gives the same error, tried to run the command react-native start --reset-cache and the error persists, tried to move the folder App.js to a src but the error persists, because no files have been modified, just try starting a new project,I do not know what do.

React Native version Windows:

  info Fetching system and libraries information...
System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
    Memory: 1.12 GB / 7.91 GB
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
      API Levels: 22, 23, 25, 28, 29
      Build Tools: 23.0.1, 25.0.3, 28.0.3, 29.0.1, 29.0.2
      System Images: android-22 | ARM EABI v7a, android-22 | Google APIs ARM EABI v7a, android-22 | Google APIs Intel x86 
Atom, android-22 | Google APIs Intel x86 Atom_64, android-23 | ARM EABI v7a, android-23 | Google APIs ARM EABI v7a, android-25 | Google APIs ARM 64 v8a, android-25 | Google APIs ARM EABI v7a, android-27 | Google APIs Intel x86 Atom, android-27 
| Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5791312
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.4 => 0.61.4

React-Native Version iOs

System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-2675QM CPU @ 2.20GHz
    Memory: 23.43 MB / 4.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    Android SDK:
      API Levels: 29
      Build Tools: 29.0.2
      System Images: android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.2 AI-181.5540.7.32.5056338
    Xcode: 10.1/10B61 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.4 => 0.61.4 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

1.react-native init nameProject 2.react-native run-android

that worked, it was normal within two days

Snack, code example, screenshot, or link to a repository: https://github.com/Andersonfrfilho/teste03.git

image the problem in windows. https://ibb.co/rvDjQz9

image the new project with comando react-native init teste01 using in iOs. https://ibb.co/xCd2v3k

Repository reproduce the project in Windows.

https://github.com/Andersonfrfilho/teste03.git

Repository reproduce the project in iOs.

https://github.com/Andersonfrfilho/teste01

Code archive

index.js

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

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 {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 33
  • Comments: 84 (1 by maintainers)

Commits related to this issue

Most upvoted comments

Hey sorry y’all! We have just published @babel/types 7.7.1 which reverts the regression

yesterday was working fine , i will be fired from work if they don’t fix it :v

For every “same issue”, the bug will last a hour longer 😈

imagen

Remove all ^ and works fine! 😄

imagen

Thanks @nicolo-ribaudo for the fast update, after deleting node_modules and yarn.lock and running yarn again, all is working again now 👍

imagen

Remove all ^ and works fine! 😄

imagen

WORK

Can you explain me how to use yarn ?

I guess it’s the same for npm if you delete node_modules and package-lock.json, and run npm install

I changed the version in package.json of @babel/core and @babel/runtime from 7.7.0 to 7.5.0 and for now is working fine.

drinking a coffee worked for me. tnx JoeLeung32

Babel 7.7.0 was released today

I suspect it’s because Babel is updated

Probably it is the @babel/core and @babel/runtime packages. There is a new publish 2 hours ago…

Delete node_modules and yarn.lock then run yarn install with below configuration

“devDependencies”: { “@babel/core”: “7.7.0”, “@babel/runtime”: “7.7.0”, “@react-native-community/eslint-config”: “0.0.5”, “babel-jest”: “24.9.0”, “eslint”: “6.6.0”, “jest”: “24.9.0”, “metro-react-native-babel-preset”: “0.57.0”, “react-test-renderer”: “16.9.0” },

Works !!!

Can you explain me how to use yarn ?

I guess it’s the same for npm if you delete node_modules and package-lock.json, and run npm install

not working

Take a coffee break, I got success after this reverts (https://github.com/facebook/react-native/issues/27120#issuecomment-549830783) around 8 mins.

Thanks @nicolo-ribaudo for the fast update, after deleting node_modules and yarn.lock and running yarn again, all is working again now 👍

Can you explain me how to use yarn ?

remove node_modules and run npm install if you are using npm

Noticed babel and babel runtime outdated

  1. Did a yarn upgrade
  2. Closed the metro terminal and react-native run-ios
  3. The error above happened.

Reverted the yarn.lock file, yarn install, close the metro terminal window, did run-ios again and the error was gone. Bear in mind a few different babel dependencies are upgraded along with the core package.

Hope this helps.

Can you explain me how to use yarn ?

I guess it’s the same for npm if you delete node_modules and package-lock.json, and run npm install

not working

Take a coffee break, I got success after this reverts (#27120 (comment)) around 8 mins.

tnx for suggestion, it worked after a coffee break 😄

https://github.com/babel/babel/issues/10645#issuecomment-549815846

We will publish a fix today (In about 2 hours).

Using older versions of @babel/core also doesn’t help(

had the same issue. checked out an older version of yarn.lock (from another project) and then yarn. it worked from there. guess some dependency update messed up.

Same issue here

Same issue here

Same issue init expo project too

Same issue too