React-native: React native 0.56.* - "Unexpected identifier"

[danielgindi]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Run react-native info in your terminal and paste its contents here.

C:\Projects\AwesomeProject>react-native info
C:\Projects\AwesomeProject\node_modules\react-native\local-cli\cliEntry.js:30
import type {CommandT} from './commands';
       ^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)
    at Module._compile (C:\Projects\AwesomeProject\node_modules\pirates\lib\index.js:91:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Object.newLoader [as .js] (C:\Projects\AwesomeProject\node_modules\pirates\lib\index.js:96:7)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)

So manually:

• Windows 10.1803.17134.112 x64
• Node 10.5.0
• Npm 6.1.0

[skip envinfo]

Description

Any attempt at react-native start or any other react-native cli feature - results in:

C:\Projects\AwesomeProject>react-native info
C:\Projects\AwesomeProject\node_modules\react-native\local-cli\cliEntry.js:30
import type {CommandT} from './commands';
       ^^^^

SyntaxError: Unexpected identifier

Reproducible Demo

• create-react-native-app
• npm run eject
• react-native-git-upgrade next
• Need to add "babel-preset-react-native": "^5.0.1" to package.json according to the CHANGELOG.
• Add "babel-preset-react-native" preset to .babelrc
• npm i
• react-native start

[danielgindi]

I have talked about it too much here #18247, and I believe now that it belongs in its own issue!

[react-native-bot]

It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

[danielgindi]

@react-native-bot, yeah "man", that's just another symptom

[giacomocerquone]

exact same problem here, can't give info!
I just upgraded to react native 0.56 from 0.54.4 with react-native-git-upgrade and the react-native-cli doesn't work anymore.

Ps. never used create react native app, did always everything by hand

[goh-chunlin]

Exact same problem here when I ran the command react-native init MyProject on Windows 10 with the latest release of React Native, which is v0.56.

However, when I run the same command on MacOS High Sierra, it works and the mobile app can even be running on physical Android phone.

So, I guess this problem only occurs on Windows 10.

[bramvbilsen]

I am having the exact same problem on windows 10!

[markentingh]

Same here after upgrading to 0.56 from 0.55

[giacomocerquone]

Did they really just put in production something that broke the cli on windows 10? Is there someone that is using 56.0 and that got this to work in Windows 10?

[markentingh]

I believe it is really broken. Upgraded to 0.56, then performed a git stash and npm install and was able to run react-native start after downgrading back to 0.55.4 on Windows 10

[velechva]

I can also confirm that this only started happening to me after upgrading to 0.56

I haven't tested it on Mac but I am running Windows 10. Ran react-native init and it gave me the same syntax error.

[tiredlessPassion]

Same here!!!
At the first time, I have run my code without any issue.
but after I deleted node_modules and did npm install, I met such syntax error.
any luck to solve it?

[DanielEncina]

Here the same problem !!!

import type {CommandT} from './commands';

       ^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)

if you need to create a project you can use the latest stable version directly, it worked for me!

react-native init --version="0.55.4" MyNewApp

[tiredlessPassion]

I guess, RN team is working on RN 0.56, modifying some parts.
But not sure.

[tiredlessPassion]

This morning, I could run my code without any issue with RN 0.56.
But some hours ago, met such error.

[maikosantos]

I too have the same problem!

[ntcong91]

• Same problem on window

[isaquemelo]

Same problem here :'(

[RijaCloud]

@DanielEncina thank you !

[giacomocerquone]

ok, this is pretty serious.
I think it's time to warn the big guys to inspect on this (hope I'll do nothing wrong) @brentvatne

@danielgindi The "rc" from the title can be removed, this problem affects also the current 0.56 released today

[tuomohopia]

I think it's a Windows specific problem, I'm running into the same issue.

It's been reported here:
https://github.com/facebook/react-native/issues/19669
https://github.com/facebook/react-native/issues/19654

And there's a pull request pending here:
https://github.com/gengjiawen/react-native/tree/feature/RNTester_start

Unfortunately, I could not get that to work either on my end.

Anyone had success beating this problem?

[mtsdnz]

Same problem here. It started when I deleted my node_modules folder and run npm install.

EDIT:
I fixed it opening my package.json and change the react-native version from 0.56.0 to 0.55.4, then I execute npm install again and it worked.

[giacomocerquone]

So according to #19654 they released it knowing that it wouldn't have worked on windows, correct?

[adrianocastellini]

I am with the same problem here do we have solution for the same?

[shanke0303]

@DanielEncina react-native init --version="0.55.4" MyNewApp it works, thank you !

[Abdillah99]

i have same problem, hope it will fixed soon 👍

[vksgautam1]

same issue with init of new project

[tiredlessPassion]

------------Final Solution------------
We can't use RN0.56.
To run your code, you should downgrade RN to 0.55.4.
No way else!!!

[tiredlessPassion]

First, delete node_module.
You can see RN version in package.json.
In it, you should change the react native version to 0.56.0.
And npm install, and react-native link, react-native run-android

[danielgindi]

Hey guys, note the "0.56.*" in the title of the issue! We know it's been working in previous versions, and it's clear that you can downgrade.
This issue is focused on the issue with 0.56.

[Moshikol]

+1

[s-o-r-o-u-s-h]

+1

[darionato]

After react-native-git-upgrade i got this:

....
sers/Dario/AppData/Roaming/npm/node_modules/react-native-git-upgrade/cliEntry.js:58:18)
    at ChildProcess.emit (events.js:182:13)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:237:12)
git-upgrade ERR! Restore initial sources
Note: checking out 'project-snapshot'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

  git checkout -b <new-branch-name>

HEAD is now at c6547a36 Project snapshot

So I manually execute npm install --save [email protected]
After that, I have the same error specified above.

[kyungjoongo]

same on windows10

[phsumi]

No idea why 0.56 was released now - this is essentially broken on Windows.

[johakr]

This issue was already reported multiple times in early rc stages of 0.56 (i guess it was even 0.56-rc.0). Did my best to investigate and resolve this issue, but really hadn't enough time to fix metro etc.

• https://github.com/facebook/react-native/issues/19669
• https://github.com/facebook/react-native/issues/19666
• https://github.com/facebook/react-native/issues/19654
• https://github.com/facebook/metro/issues/181

To cite myself from 20 days ago:

Might be a react-native issue, might be a metro issue or might be a babel issue. Anyways, v0.56.0-rc is broken on windows.

So, the react-native core team is aware of this issue and knew that react-native 0.56 is broken on windows when they decided to make the 0.56.0 release, but they wanted to go fast with this release. So, just keep calm and hope the best for 0.56.1.

[phsumi]

@johakr I'm just surprised a release took place with a whole platform being broken. Without a FAT warning in the release notes or potentially even the CLI client on breakage, this means that you impose wasted time on every developer who happens to be working on a Windows machine, which quickly amounts to thousands of hours evaporating into thin air. Hence the surprise. Apart from that, all good (and calm ;) on my side, I'll just keep sitting on the stable 0.55.x version :)

[tahahk]

anybody know about this error:

D:\equeuenode_modulesreact-native\local-cli\cliEntry.js:30
import type {CommandT} from './commands';
^^^^^^

SyntaxError: Unexpected token import
at new Script (vm.js:51:7)
at createScript (vm.js:136:10)
at Object.runInThisContext (vm.js:197:10)
at Module._compile (module.js:626:28)
at Module._compile (D:\equeuenode_modules\pirates\lib\index.js:91:24)
at Module._extensions..js (module.js:673:10)
at Object.newLoader [as .js] (D:\equeuenode_modules\pirates\lib\index.js:96
:7)
at Module.load (module.js:575:32)
at tryModuleLoad (module.js:515:12)
at Function.Module._load (module.js:507:3)

[gengjiawen]

@rafeca @hramos Looks like after upgrade to babel 7 metro is not working on Windows anymore.

[gengjiawen]

@grabbou @kelset Need a fix for 0.56.0.

[gengjiawen]

I actually create a pr for this problem https://github.com/facebook/react-native/pull/19974/files. But my first thought it's only an issue for RNTester in windows.

The problem is that on windows it doesn't remove flow types for cli file. So I introduced flow-remove-types

[kelset]

Ok, so. Since this seem to be a regression / windows related I'm locking to prevent more useless "me too/+1" comments".

I'll check the few valuable comments (thanks @tuomohopia, @johakr and @gengjiawen for the links) to investigate/pin point more the whole issue, and in the meantime: we can understand that upgrading and seeing something breaking is not a positive experience. But this is:

• a 0.x framework
• an OSS project

And we even explicitly stated in the blogpost and the changelog about known issues / the awareness that this new release is a massive change so probably something would still break.

Again, it's an OSS project and if you don't agree with what the core does you can always fork and maintain your version of the project. There is nothing wrong or weird about it. (or even, just stay on 0.55.x until this is fixed, again, nothing weird about that either)

We are doing our best to keep the project moving forward, and sometimes this mean that we break something. The other side of this is that most times there is not enough time/resource investment to cover all the cases (we try to prevent this kind of scenarios by publishing the RCs and have someone that faces the issue to find a fix) but it's not a perfect method.

What I can assure you all is this: we hear you, and we will (with your help) try to find a fix as quickly as possible in order to have a 0.56.1 version that will resolve this.

[gengjiawen]

@kelset I am actually thinking add appveyor to ci system to make sure essential thing works on windows. But I have not discussed with @hramos yet. If he is willing to merge related pr, I am happy to help.

And to fix the issue, I am confused too, since plugin-transform-flow-strip-types actually in the metro dependency and this only breaks on windows. So maybe you can contact to @rafeca ?

[kelset]

Yeah I've already pinged a few people in the core, and probably this issue is actually related to this too (https://github.com/facebook/react-native/issues/20030).

I guess that adding some Windows checks in the CI is becoming more and more necessary, I'll bring it up to the monthly meeting (which will happen this evening).

[gengjiawen]

@kelset Thanks for the info :)

[kelset]

Hey everyone, couple of updates related to this issue:

• it seems that this is related to a Babel issue (8184)

• an awesome dev from the Metro team is "fixing that function will re-enable babel-register on windows which should resolve all those reported problems"

• during the monthly meeting (blogpost next week) we discussed the idea of adding some Windows CI in order to prevent this kind of issues from happening again

[kelset]

Hey everyone, I hope you all had a good weekend, quick update. A potential fix landed on master on Metro:
https://github.com/facebook/metro/commit/3f9cb2e7557a7fcc15f41c4764cd59ca3d9acc82

We are testing it to understand if it works as expected, after which we'll try to make sure that 0.56.1 will be able to use it.

[gengjiawen]

@kelset Can they draft a new release so we can test ?

Update: I migrate the change, still not working.

[kelset]

@gengjiawen sadly it's not that simple because of where that fix is currently (master metro). I'll let you know as soon as I have some more info.

[gengjiawen]

Thanks, @hzoo says there will be an release to fix this issue on windows (https://github.com/babel/babel/issues/8184), and related pr has merged to master. Maybe we still need to bump babel in metro.

[kelset]

Yeah I've spoken with him too, but it's "one extra degree of separation". That said, just talked with the Metro dev who has been taking care of it and this is what he told me:

Metro 42 should be published shortly. This contains the fix. We will try to backport the fix to 38 tomorrow.

[kelset]

Hello everyone! A new release of metro, 0.38.2, has been released and it should fix this issue. Since RN 0.56.0 depends on metro version

    "metro": "^0.38.1",
    "metro-babel-register": "^0.38.1",
    "metro-core": "^0.38.1",
    "metro-memory-fs": "^0.38.1",

This means that to apply the fix you would simply need to remove the node_modules (and if they're using yarn.lock you'll need to also clean metro from the lock file) and reinstall.

I'll unlock the issue in order to get some feedback that this new release of metro actually fixes for you all, since there is always the scenario in which we haven't covered every possible Win configuration during our tests.

[donjo9]

For me it resolved the initial issue (so did hotfixing it myself from previous posts). but both solutions lead me to another issue, i cant realy tell if its related

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module 'AccessibilityInfo' from
 'C:\Users\jm\Documents\Privat\ReactNative\Test056\node_modules\react-native\Lib
raries\react-native\react-native-implementation.js': Module 'AccessibilityInfo'
does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: 'watchman watch-del-all'.
  2. Delete the 'node_modules' folder: 'rm -rf node_modules && npm install'.
  3. Reset Metro Bundler cache: 'rm -rf /tmp/metro-bundler-cache-*' or 'npm star
t -- --reset-cache'.  4. Remove haste cache: 'rm -rf /tmp/haste-map-react-native
-packager-*'.
    at ModuleResolver.resolveDependency (C:\Users\jm\Documents\Privat\ReactNativ
e\Test056\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:
167:1306)
    at ResolutionRequest.resolveDependency (C:\Users\jm\Documents\Privat\ReactNa
tive\Test056\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest
.js:80:16)
    at DependencyGraph.resolveDependency (C:\Users\jm\Documents\Privat\ReactNati
ve\Test056\node_modules\metro\src\node-haste\DependencyGraph.js:237:485)
    at Object.resolve (C:\Users\jm\Documents\Privat\ReactNative\Test056\node_mod
ules\metro\src\lib\transformHelpers.js:116:25)
    at dependencies.map.result (C:\Users\jm\Documents\Privat\ReactNative\Test056
\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:29)
    at Array.map (<anonymous>)
    at resolveDependencies (C:\Users\jm\Documents\Privat\ReactNative\Test056\nod
e_modules\metro\src\DeltaBundler\traverseDependencies.js:294:16)
    at C:\Users\jm\Documents\Privat\ReactNative\Test056\node_modules\metro\src\D
eltaBundler\traverseDependencies.js:159:33
    at Generator.next (<anonymous>)
    at step (C:\Users\jm\Documents\Privat\ReactNative\Test056\node_modules\metro
\src\DeltaBundler\traverseDependencies.js:239:307)

React Native Environment Info:
System:
OS: Windows 7
CPU: x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
Memory: 3.20 GB / 11.92 GB
Binaries:
Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.1.0 - C:\Program Filesnodejsnpm.CMD
IDEs:
Android Studio: Version 1.5.0.0 AI-141.2456560

node -v
v9.10.1

this is done from a clean
react-native init Test056
react-native run-android

[danielgindi]

Yes, it happened to me too. Unable to resolve module 'AccessibilityInfo'.
It's a shame that the issue was locked, as I wanted to tell everyone how to "hotfix" the metro plugin, as @donjo9 did, but then I bumped into the new issue.

I didn't find any combination of babel settings that tell it to correctly use the react-native preset. It doesn't recognize react's modules. And I suspect babel7 broke something else too, but I don't have any proof so don't shoot me.

[kelset]

For the AccessibilityInfo please refer to this other issue: https://github.com/facebook/react-native/issues/19953 (it seems to me it's the same you are both describing @danielgindi && @donjo9 )

What I am trying to understand now is if the original issue has been fixed.

[gengjiawen]

Looks like similar to https://github.com/facebook/metro/issues/181.

[SergeiKalachev]

@kelset The original issue was fixed. But really another has occured as @danielgindi and @donjo9 mentioned above. I also tried to do:
react-native init Test
react-native run-android

And I also have Unable to resolve module 'AccessibilityInfo' from C:\Users\***\Documents\abaka-mobile-app\node_modules\react-native\Libraries\react-native\react-native-implementation.js:
Can you guys please look at it?

[phillmill]

I had this "AccessibilityInfo" message yesterday and I found that simply restarting my computer fixed it, as silly as that sounds.

[SergeiKalachev]

@phillmill I've tried several times to restart 😆 . Didn't help

[kelset]

Since the original issue is fixed, I'm going to close this and lock it as resolved. As I said in my previous comment, refer to #19953 for the AccessibilityInfo issue.