`react-native init AwesomeProject` throwing SyntaxError - react-native

react-native init AwesomeProject is throwing SyntaxError: Unexpected token : and I'm not sure why. I've uninstalled and re-installed react-native-cli. Tried with and without yarn. Any suggestions?
mes-MBP:myproject me$ react-native init AwesomeProject
This will walk you through creating a new React Native project in /Users/me/WebstormProjects/myproject/AwesomeProject
Using yarn v0.17.10
Installing react-native...
/Users/me/WebstormProjects/myproject/AwesomeProject/node_modules/react-native/local-cli/util/Config.js:43
cwd: string,
^
SyntaxError: Unexpected token :
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at loader (/Users/me/WebstormProjects/myproject/AwesomeProject/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/me/WebstormProjects/myproject/AwesomeProject/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/me/WebstormProjects/myproject/AwesomeProject/node_modules/react-native/local-cli/cliEntry.js:13:16)
at Module._compile (module.js:413:34)

Looks like the error an update was published to react-native. Others are experiencing the same issue so I'm going to answer this and say it's a package issue. https://github.com/facebook/react-native/issues/11384
Until this gets resolved, you can use rninit(https://www.npmjs.com/package/rninit) to install using the previous version of react-native. This worked for me:
rninit init mobile --source react-native#0.39.0

Update node version on OS.
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Apparently the new version React Native 0.56.0 has this problem.
To fix this problem, you can install the previous version.
react-native init --version="0.55.0" MyNewApp

Related

Facing issues while trying to init Bubblewrap for TWA installation

I am new to Bubblewrap. I downloaded Node.js and then did npm i -g #bubblewrap/cli. It threw some warnings, but it did finish.
After this, when I am doing bubblewrap init --manifest https://beegle.app/bpro-manifest.json, I am getting some errors which I don't understand and don't know how to solve.
Here are the error messages:
[Mukeshs-MacBook-Air:beeglepro-bubblewrap mghatiya$ bubblewrap init --manifest https://beegle.app/bpro-manifest.json
internal/util.js:206
throw new errors.TypeError('ERR_INVALID_ARG_TYPE', 'original', 'function');
^
TypeError [ERR_INVALID_ARG_TYPE]: The "original" argument must be of type function
at promisify (internal/util.js:206:11)
at Object.<anonymous> (/Users/mghatiya/.nvm/versions/node/v8.9.3/lib/node_modules/#bubblewrap/cli/node_modules/get-stream/index.js:7:35)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/mghatiya/.nvm/versions/node/v8.9.3/lib/node_modules/#bubblewrap/cli/node_modules/fetch-h2/dist/lib/body.js:6:22)
What is going wrong?
It looks like I had old version of Node.js installed and for whatever reason, even though I had just downloaded Node.js from the website, the latest one was not loaded or it was not loaded at the correct place or whatever.
So basically warnings thrown by npm i -g #bubblewrap/cli were indeed strong ones and it had not completed its job.
I upgraded to the latest Node.js version with nvm install node --reinstall-packages-from=node and now the errors that I posted have gone in the bubblewrap init action.
Of course, as is the case with all development things, now I face the new errors and warnings.
I was using Windows with npm in version 8.16.2 (nvm). Thanks #mukesh for pointing that point. Following nvm list and nvm use 14.18.0, I reinstalled bubblewrap and the bubblewrap init command worked this time.

React install problems with npm

When I run npx create-react-app, I had these errors. Maybe someone knows whats it's wrong? P.S. also had tried npm-install -g create-react-app.
C:\Users\Deividas\Desktop\PAMEGINIMAS>create-react-app my-app
internal/modules/cjs/loader.js:621
throw e;
^
Error: No valid exports main found for 'C:\Users\Deividas\AppData\Roaming\npm\node_modules\create-react-app\node_modules\is-promise'
at resolveExportsTarget (internal/modules/cjs/loader.js:618:9)
at applyExports (internal/modules/cjs/loader.js:499:14)
at resolveExports (internal/modules/cjs/loader.js:548:12)
at Function.Module._findPath (internal/modules/cjs/loader.js:650:22)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:948:27)
at Function.Module._load (internal/modules/cjs/loader.js:854:27)
at Module.require (internal/modules/cjs/loader.js:1023:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (C:\Users\Deividas\AppData\Roaming\npm\node_modules\create-react-app\node_modules\run-async\index.js:3:17)
at Module._compile (internal/modules/cjs/loader.js:1128:30) {
code: 'MODULE_NOT_FOUND'
}
This seems to be a recent problem with npm. There is an issue open as of the last few hours and it seems like people are working on it. I don't think it's anything to do with yourproject.
The issue
While the issue is being fixed: try installing node version 12.12.0 as shown below (if using nvm) and run create-react-app again.
nvm install 12.12.0
nvm use 12.12.0
I'd try to clear your cache npm cache clean --force. What version of node and npm are you using?

"Unexpected token import" as error when creating new react-native project

I am creating a new react-native project using :
react-native init {proj_name}
But I am getting the following error.
D:\Reactnative\Project\{proj_name}\node_modules\react-native\local-cli\cliEntry.js:30
import type {CommandT} from './commands';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:607:28)
at Module._compile (D:\Reactnative\Project\Learnwizz\node_modules\pirates\lib\index.js:91:24)
at Module._extensions..js (module.js:654:10)
at Object.newLoader [as .js] (D:\Reactnative\Project\Learnwizz\node_modules\pirates\lib\index.js:96:7)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
This is a known bug right now with react-native 0.56 when running on Windows (see here and here).
Until it is fixed, you can work around the issue by explicitly specifying an older version of react-native when running react-native init. E.g.
react-native init {proj_name} --version react-native#0.55.4
EDIT: As a temporary workaround, you can init your project with the previous version of RN using react-native init --version="0.55.4" {projectName}
I'm also running into this exact error today. I just now noticed react-native init is now using react-native 0.56 which was just release a few hours ago I believe.
This might give you some troubleshooting ideas.
Currently I am getting Exception in latest version that is 0.56 (React Native) and not able to run the code in emulator, However I have downgraded React native version to 0.55.4, then it is working for me..
Run Below line of command :
react-native init {project_name} --version react-native#0.55.4
Yes, with new version of react-native , typescript code in react-cli has some issue , but don't worry
go to app folder
hit command
npm uninstall react-native --save
npm install react-native#0.55.4 --save
will solve your problem !!
in windows 10 update node.js to version 14.18.1
https://nodejs.org/dist/v14.18.1/node-v14.18.1-x64.msi

The command 'react-native run-android' shows up errors although there is an emulator running (or device connected)

I started a react-native project with 'react-native init' and was created without errors, however, when I used the command 'react-native run-android' in the project directory this is what I got:
throw er
^
Error: EIO: i/o error, read
at Object.fs.readSync (fs.js:675:18)
at Object.readSync (D:\myProjects\react-native\ReactTodoApp\node_modules\graceful-fs\polyfills.js:138:28)
at tryReadSync (fs.js:540:20)
at Object.fs.readFileSync (fs.js:575:19)
at Object.Module._extensions..js (module.js:645:20)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18).
The same error appears although that android emulator is running or an android device connected, all the same.
I need to know what is the solution to this.
I am using react-native 0.50.3, react-native-cli 2.0.1.
Seems like a Node related error.
Try restarting Node server. Node cannot read polyfills.js. This can happen if multiple command instances are running in same directory at same time.
Sometimes cleaning cache works
Updating or reinstalling react native is a suggested fix.
You could uninstall react-native and then use the following command:
npm install react#reactversion --save.
Note (reactversion) is your desired version you want to have.
You could also just try reinstalling it as:
npm install react --save
Or upgrade with:
npm update react-native

Getting Error: Cannot find module './src/init' when trying to initialize a react native app

When I try to install react native with the command react-native init ProjectName
I get the following:
This will walk you through creating a new React Native project in C:\Users\Xegano\Documents\ProjectName
Installing react-native package from npm...
Setting up new React Native app in C:\Users\Xegano\Documents\ProjectName
module.js:457
throw err;
^
Error: Cannot find module './src/init'
at Function.Module._resolveFilename (module.js:455:15)
at Function.Module._load (module.js:403:25)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\Xegano\Documents\ProjectName\node_modules\gulp-sourcemaps\index.js:4:9)
at Module._compile (module.js:556:32)
at Module._extensions..js (module.js:565:10)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\Xegano\Documents\ProjectName\node_modules\babel-register\lib\node.js:152:7)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
Why does this happen? It used to work earlier the only thing I remember I changed is some packages from the SDK Manager. Could it be that?
Actually it worked in my case but I was required to downgrade gulp-sourcemaps to version 1.7
$ cd MyProject
$ rm -rf node_modules/gulp-sourcemaps
$ npm install gulp-sourcemaps#1.7
$ cd ..
$ react-native init MyProject
It is a bug in gulp-sourcemaps 2.1.0, which has been recently released. Here is an issue for it on GitHub: https://github.com/floridoo/gulp-sourcemaps/issues/238. I believe it should be fixed soon, meanwhile you can downgrade it to 2.0.x or 1.7.x.
Update: Thanks to this GitHub comment I was able to make it work with the following steps:
$ mkdir MyProject
$ cd MyProject
$ npm i gulp-sourcemaps#1.7
$ cd ..
$ react-native init MyProject # answer yes
This is now fixed "src" was not included in package.json.
https://github.com/floridoo/gulp-sourcemaps/issues/238