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

Created on 5 Nov 2019 · 84Comments · Source: facebook/react-native

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;

Bug Ran Commands 📦Bundler

Source

Andersonfrfilho

👍16 😕12 👀5

Most helpful comment

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

nicolo-ribaudo on 5 Nov 2019

👍30 🎉13 🚀11 ❤11

All 84 comments

Same issue here

maxoyano on 5 Nov 2019

Same issue too

YukihiroYamashita on 5 Nov 2019

Same issue too

caglardurmus on 5 Nov 2019

👍1

Same issue too

AH-REM on 5 Nov 2019

Same issue :v

barinascode on 5 Nov 2019

Same issue:v

vinaygoyal20 on 5 Nov 2019

Same issue too

daniel4ntunes on 5 Nov 2019

Me too :( but on an existing project after running yarn upgrade

jjv360 on 5 Nov 2019

Can you run react-native info and edit your issue to include these results under the React Native version: section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] alongside an explanation in your Environment: section.

react-native-bot on 5 Nov 2019

Noticed babel and babel runtime outdated

Did a yarn upgrade
Closed the metro terminal and react-native run-ios
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.

beetlebum on 5 Nov 2019

😄1 👎1

Same issue here
npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 1.73 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.3 => 0.61.3

anchengjian on 5 Nov 2019

Same issue init expo project too

caglardurmus on 5 Nov 2019

👍1

same issue when npx react-native init AwesomeTSProject --template react-native-template-typescript

caotsinghua on 5 Nov 2019

Same issue started while init a new project.

hamzaehsan95 on 5 Nov 2019

boaz-lachman on 5 Nov 2019

The same problem :(

yanavozniuk on 5 Nov 2019

Same issue,
Removing node-modules doesn't help,
System:
OS: Windows 10
CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
Memory: 7.85 GB / 15.93 GB
Binaries:
Node: 10.16.3 - C:Program Filesnodejsnode.EXE
npm: 6.9.0 - C:Program Filesnodejsnpm.CMD
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

DavraYoung on 5 Nov 2019

Same issue

System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
Memory: 21.04 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.12.0 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.2 => 0.61.2
npmGlobalPackages:
react-native-cli: 2.0.1

tushar04 on 5 Nov 2019

Same issue here

szymonjanota on 5 Nov 2019

👀1

Same issue here
npx react-native info

System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-4670S CPU @ 3.10GHz
    Memory: 3.45 GB / 15.91 GB
  Binaries:
    Node: 10.16.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
      API Levels: 27, 28
      Build Tools: 28.0.3, 29.0.2
      System Images: android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5900203
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.4 => 0.61.4

ProMasoud on 5 Nov 2019

The same

arthedza on 5 Nov 2019

Same issue faced, cloned the repository today. Working for everyone else, removed node modules and Pods too, didn't help. I think its the babel-core version issue.

react-native: 0.60.4
babel-core: 7.7.0

Aarshi-Kredx on 5 Nov 2019

Same issue, downgraded to 0.61.3, 0.61.2, 0.61.1, 0.61.0 still not working.

subhendukundu on 5 Nov 2019

same issue

Arjanvanmaren on 5 Nov 2019

Same issue here

moussamew on 5 Nov 2019

👀1

same issue

mica83 on 5 Nov 2019

same issue

gitathrun on 5 Nov 2019

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

barinascode on 5 Nov 2019

😄18 🚀6 👍4 👀3

Same Issue

sanju12131441 on 5 Nov 2019

Same issue :(

yasserelmalouani on 5 Nov 2019

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

arunesh90 on 5 Nov 2019

😄14 🎉1 👎1

Same Issue

Lesego-Malitsi on 5 Nov 2019

same

futurfutur on 5 Nov 2019

I got the same issue here using expo.

Starting Metro Bundler on port 19001.
Your JavaScript transform cache is empty, rebuilding (this may take a minute).
Tunnel ready.
node_modules/expo/AppEntry.js: "" is not a valid identifer name
Failed building JavaScript bundle.

> npx react-native info:

info 
  React Native Environment Info:
    System:
      OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
      CPU: (4) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
      Memory: 345.12 MB / 7.65 GB
      Shell: 4.4.20 - /bin/bash
    Binaries:
      Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
      npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm
    SDKs:
      Android SDK:
        API Levels: 22, 23, 24, 25, 26, 27, 28
        Build Tools: 27.0.3, 28.0.2, 28.0.3, 29.0.0
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5791312
    npmPackages:
      react: 16.5.0 => 16.5.0 
      react-native: https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz => 0.59.8

Pirlouit on 5 Nov 2019

npx react-native info

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
Memory: 25.10 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.9.0 - ~/.nvm/versions/node/v11.9.0/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.12.0 - ~/.nvm/versions/node/v11.9.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.2, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.3
System Images: android-25 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.6 => 0.60.6
npmGlobalPackages:
react-native-cli: 2.0.1

boaz-lachman on 5 Nov 2019

Same issue using expo init, tried installing dependencies using both yarn and npm. Both give this error:

node_modules/expo/AppEntry.js: "" is not a valid identifer name
Failed building JavaScript bundle.

react-native-cli: 2.0.1
react-native: 0.59.8
expo: 3.4.1

weiannnnn on 5 Nov 2019

Same issue :/

LcsGrz on 5 Nov 2019

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.

stevenkhong on 5 Nov 2019

👎1

what happen ?

wyrustaaruz on 5 Nov 2019

same issue happens here 😕

yogieputra8 on 5 Nov 2019

Same issue too

ThomasR76 on 5 Nov 2019

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

DavraYoung on 5 Nov 2019

👍1

1h ago it was working fine, same issue here

labinotbjrm on 5 Nov 2019

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

amavrikos on 5 Nov 2019

❤2 😄1

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

Yup, I can second that.

Aarshi-Kredx on 5 Nov 2019

Same issue here..

pglejzer on 5 Nov 2019

this morning work fine, now with xcode update to 11.2 i have the same issue

mica83 on 5 Nov 2019

On Android Platform, ./gradlew clean assembleRelease is OK, but when run on CI,

gitlab-runner exec shell build:android, meet the same issue

listenzz on 5 Nov 2019

same issue here :dancer:

tanvira1993 on 5 Nov 2019

same issue here and very annoying

amiralis1365 on 5 Nov 2019

I suspect it's because Babel is updated

anchengjian on 5 Nov 2019

❤1 🎉1 👍1

Babel 7.7.0 was released today

arthedza on 5 Nov 2019

👍2 🎉1

Hi there, most probably this issue is caused by the following commit https://github.com/babel/babel/commit/c7d8b8a37752f42163128cf4d5e8b54c2637cec4#diff-757f0f7d11a836d10acb09283e7b06aa

AndriyF on 5 Nov 2019

👍3 🚀1

same problem here

lamhidra-hamza on 5 Nov 2019

Has a new merge on babel https://github.com/babel/babel/pull/10650 waiting...

AdeilsonSuperlogica on 5 Nov 2019

👍5

Can anyone notify babel developers?

arthedza on 5 Nov 2019

Noticed babel and babel runtime outdated

Did a yarn upgrade

Closed the metro terminal and react-native run-ios

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.

Not Work :-(

Already

    "@babel/core": "7.6.4",
    "@babel/runtime": "7.6.3",
    "metro-react-native-babel-preset": "0.56.3",

JoeLeung32 on 5 Nov 2019

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

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

arunesh90 on 5 Nov 2019

👍1

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.

eulerlobo on 5 Nov 2019

👍3 👎1

imagen

Remove all ^ and works fine! :D

imagen

LcsGrz on 5 Nov 2019

👍12

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

nicolo-ribaudo on 5 Nov 2019

👍30 🎉13 🚀11 ❤11

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

srdrkrks on 5 Nov 2019

Remove all ^ and works fine! :D

WORK

mlorthios on 5 Nov 2019

👍6

Same issue here...

mrouhi13 on 5 Nov 2019

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

jjv360 on 5 Nov 2019

👍7 🚀2

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 ?

mica83 on 5 Nov 2019

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

JoeLeung32 on 5 Nov 2019

👍2

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

jjv360 on 5 Nov 2019

👍5

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

amiralis1365 on 5 Nov 2019

It seems to be it solved. You can create new projects without errors.

srdrkrks on 5 Nov 2019

You can try to force it by adding "@babel/types": "^7.7.1" to your Dev dependencies.

After that it works, you can remove it.

nicolo-ribaudo on 5 Nov 2019

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.

JoeLeung32 on 5 Nov 2019

👍2

me too, + 1

relign on 5 Nov 2019

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 :D

amiralis1365 on 5 Nov 2019

👍1

yea, it's working now. Thanks, @nicolo-ribaudo for the fast reaction!

pglejzer on 5 Nov 2019

drinking a coffee worked for me. tnx JoeLeung32

amiralis1365 on 5 Nov 2019

👍3

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

Worked for me, Thanks @jjv360

mrouhi13 on 5 Nov 2019

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 !!!

ardencaliskaner on 5 Nov 2019

👍2

Delete node_modules and package-lock.json, erase trash, close metro bundler and run npm install.
For me, it worked this way.

labinotbjrm on 5 Nov 2019

Works !!!
Thx, it worked too.

Andersonfrfilho on 5 Nov 2019

Remove all ^ and works fine! :D

WORK

Thanks... It is working now :)

Tracklous on 5 Nov 2019

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 !!!

It worked !!
Thanks. 😄

hannansaifullah95 on 6 Nov 2019

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

react-native-bot on 25 Nov 2019

Hello i solved this issue by running this command to start the server :
npx react-native start
It works.