ReactNativeCli init Helloworld project build error with Babel TransformError - react-native

I'm trying to learn React Native development by following instruction:
nvm install v4.2.6
nvm alias default v4.2.6
npm install -g react-native-cli
react-native init RNApp
cd RNAPP
Then I open iOS app project and compile program. Then I got follow error:
...
++ NVM_NPM_PREFIX=/Users/user/.nvm/versions/node/v4.2.6
++ nvm_tree_contains_path /Users/user/.nvm /Users/user/.nvm/versions/node/v4.2.6
++ '[' -n '' ']'
+ [[ -x /Users/user/.nodenv/bin/nodenv ]]
+ react-native bundle --entry-file index.ios.js --platform ios --dev true --bundle-output /Users/user/Library/Developer/Xcode/DerivedData/RNApp-ckxusxiznabgxxcrqessfpbjyrks/Build/Products/Debug-iphonesimulator/RNApp.app/main.jsbundle --assets-dest /Users/user/Library/Developer/Xcode/DerivedData/RNApp-ckxusxiznabgxxcrqessfpbjyrks/Build/Products/Debug-iphonesimulator/RNApp.app
bundle: Created ReactPackager
uncaught error Error: ReferenceError: [BABEL] /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage
at Logger.error (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)
at OptionManager.addConfig (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
at OptionManager.findConfigs (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:16)
at OptionManager.init (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)
at File.initOptions (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:191:75)
at new File (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/file/index.js:122:22)
at Pipeline.transform (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transform (/Users/user/Desktop/RNApp/node_modules/react-native/packager/transformer.js:59:24)
TransformError: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: [BABEL] /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/lib/index.js: Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage
See logs /var/folders/g9/m3cmg0m10cl80xt362wpsld00000gn/T/react-packager.log
at SocketClient._handleMessage (SocketClient.js:139:23)
at BunserBuf.<anonymous> (SocketClient.js:53:42)
at emitOne (events.js:77:13)
at BunserBuf.emit (events.js:169:7)
at BunserBuf.process (/Users/user/Desktop/RNApp/node_modules/react-native/node_modules/bser/index.js:289:10)
at /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/bser/index.js:244:12
at nextTickCallbackWith0Args (node.js:419:9)
at process._tickCallback (node.js:348:13)
Command /bin/sh failed with exit code 1
Is I do something wrong? or just there is something bug in babel for react-native support?
➜ RNApp react-native --version
react-native-cli: 0.1.10
react-native: 0.18.1
But it seems that run-android is working fine:
:app:generateDebugSources
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources
:app:preDexDebug
:app:dexDebug
:app:validateDebugSigning
:app:packageDebug
:app:zipalignDebug
:app:assembleDebug
:app:installDebug FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

This root cause of the issue is that React Native uses Babel 6, which deprecated the use of the stage option on .babelrc files, and react-deep-force-update, a sub-dependency of React Native, still declares a .babelrc file with that option.
This is an issue with any third party modules that still use an older Babel in their own build process and do not clear the configuration files for the npm publish.
I have worked around the issue by adding the following npm run scripts to my package json:
"scripts": {
"clean:babelrc": "find ./node_modules -name react-packager -prune -o -name '.babelrc' -print | xargs rm -f",
"postinstall": "npm run clean:babelrc"
}
The script nukes all .babelrc files under the node_modules directory after every npm install, except the one under the react-packager directory, which is React Native packager uses to configure its own babel rules.
The issue is being tracked on React Native GitHub repository.

I updated the npm packages.
react-proxy ==> 1.1.2
react-deep-force-update ==> 2.0.1
You need remove the packages files first in node_modules. Then install the new version.
It works for me.

Related

Latest Install for Apple M1 react-native

What are the latest installation instructions for Apple M1 Macbook Pro? (this works just fine on Ventura Intel)
I've tried several things and can't get the basic
npx react-native init mainapp
✔ Downloading template
✔ Copying template
✔ Processing template
✖ Installing CocoaPods dependencies (this may take a few minutes)
✖ Installing CocoaPods dependencies (this may take a few minutes)
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./mainapp/ios && pod install".
CocoaPods documentation: https://cocoapods.org/
then changing to the ios folder and issuing "pod install" yields:
Fetching podspec for hermes-engine from ../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec
[!] Failed to load 'hermes-engine' podspec:
[!] Invalid hermes-engine.podspec file: undefined method `exists?' for File:Class.
from mainapp/node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec:46
VERSIONS
pod --version
1.11.3
node -v
v19.4.0
npm -v
9.2.0
npx -v
9.2.0
yarn -v
1.22.19
ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin21]
(yet in /Library/Ruby/Gems/2.6.0/ is listed?)

How do I create an Expo app when it keeps giving this error?

Tried every possible step
Reinstalled Node, NPM, Expo, etc.
Cleaned Cache, verified it aswell.
Please help or I would have to reinstall Ubuntu.
faisal#PC:~$ expo init
Migrate to using:
› npx create-expo-app --template
✔ What would you like to name your app? … my-app
✔ Choose a template: › blank a minimal app as clean as an empty canvas
Error downloading and extracting template package: TypeError: Cannot read properties of null (reading '0')
✖ Something went wrong while downloading and extracting the template.
Can't read JSON file: /home/faisal/my-app/app.json
└─ Cause: Error: ENOENT: no such file or directory, open '/home/faisal/my-app/app.json'
├─ readAsync /usr/local/lib/node_modules/expo-cli/node_modules/#expo/json-file/src/JsonFile.ts:158:13
├─ extractAndPrepareTemplateAppAsync /usr/local/lib/node_modules/expo-cli/src/commands/utils/extractTemplateAppAsync.ts:25:25
└─ actionAsync /usr/local/lib/node_modules/expo-cli/src/commands/initAsync.ts:290:19
faisal#PC:~$ npx create-expo-app myapp
✖ Something went wrong in downloading and extracting the project files: Could not find npm package "expo-template-blank#latest"
Error cloning template: Error: Could not find npm package "expo-template-blank#latest"
faisal#PC:~$ npm ls -g
/usr/local/lib
+-- #angular/cli#14.2.3
+-- expo-cli#6.0.5
+-- expo-template-blank#46.0.21
`-- npm#8.19.2
faisal#PC:~$ npm -v
8.19.2
Reinstalled Node using NVM
Apparently the node I installed multiple times through the store was giving the error so I decided to use the Node Version Manager instead.
Instructions:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
source ~/.bashrc
nvm list-remote
nvm install v16.17.1
And yes, it works:
faisal#pc:~$ nvm install v16.17.1
Downloading and installing node v16.17.1...
Downloading https://nodejs.org/dist/v16.17.1/node-v16.17.1-linux-x64.tar.xz...
######################################################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v16.17.1 (npm v8.15.0)
Creating default alias: default -> v16.17.1
faisal#pc:~$ expo init
Migrate to using:
› npx create-expo-app --template
✔ What would you like to name your app? … my-app
✔ Choose a template: › blank a minimal app as clean as an empty canvas
✔ Downloaded template.
📦 Using npm to install packages.
✔ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd my-app
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:
Run this command
npm uninstall -g react-native-cli #react-native-community/cli
Start a new project
npx react-native init AwesomeProject

How to fix error in "Copying template" when making project?

I'm generating a new project using React-Native in Command Prompt but I get an error when I use the following command:
react-native init Style
This is the result I get:
√ Downloading template
× Copying template
error Error: Cannot find module 'C:\Users\User\AppData\Local\Temp\rncli-init-template-srEvW0\node_modules\react-native\template.config'
error EBUSY: resource busy or locked, rmdir 'D:\FUSI\React Native\Style'. Run CLI with --verbose flag for more details.
Error: EBUSY: resource busy or locked, rmdir 'D:\FUSI\React Native\Style'
at Object.rmdirSync (fs.js:684:3)
at rmdirSync (D:\FUSI\React Native\node_modules\fs-extra\lib\remove\rimraf.js:276:13)
at Object.rimrafSync [as removeSync] (D:\FUSI\React Native\node_modules\fs-extra\lib\remove\rimraf.js:252:7)
at Object.initialize [as func] (D:\FUSI\React Native\node_modules\react-native\node_modules#react-native-community\cli\build\commands\init\init.js:295:26)
at process._tickCallback (internal/process/next_tick.js:68:7)
How can I fix this error?
Mustafa AK had it right. What worked for me is adding the --npm flag at the end of the command.
I followed the tutorial exactly how it was laid out on the React website and was running into the same error. For whatever reason, if you have yarn and npm installed the command to create a new project will not work. So you have to add the --npm flag to get it to only use npm and this will work.
npx react-native init AwesomeProject --npm
This Same error comes with me. But I solved by following ways...
First, uninstall the node from your system and download the latest version of node and install it.
2.after installation of the latest version of node you need to write the command in your command prompt
npm install -g react-native-cli
Now go to your project directory
cd your-react-native-project directory
now create your react-native project
react-native init your-project-name.
https://stackoverflow.com/a/71725307/16114216
Be sure uninstall global react-native/cli as described react-native tutorials
Try to use --npm end of init command if you had yarn and npm both.
npx react-native init MyApp --template react-native-template-typescript --npm
Note: If you have both yarn and npm installed on your machine, React Native CLI will always try to use yarn, so even if you use npx utility, only react-native executable will be installed using npm and the rest of the work will be delegated to yarn. You can force usage of npm adding --npm flag to the command.

How to setup `react-native-web` after `react-native init`

I get several errors after following the guide on react-rative-web.
I first created a new project: react-native init test --version 0.55.4
Then I installed the dependencies:
yarn add --dev babel-loader url-loader webpack webpack-cli webpack-dev-server babel-plugin-react-native-web
yarn add react react-dom react-native-web
copied the index.web.js and web/webpack.config.js
After executing the command:
webpack-dev-server -d --config ./web/webpack.config.js --inline --hot --colors
I get the error:
ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'react-art'
OK. So I installed the (optional?) module yarn add react-art
The next run printed:
ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin 0 specified in "base" provided an invalid property of "createElement"
Now I don't know what to do. How can I fix this error (and maybe the following)?

React Native: Command `run-ios` unrecognized

I have two different ReactNative-Projects:
a) a project from januar 2016
b) a complete new react-native project
from now (march 20th 2016)
Within the new project the cli tool of react-native contains the command "run-ios" next two "run-android", but not on the older project from januar 2016. On the older one there is not "run-ios" command available:
$ react-native run-ios
Command `run-ios` unrecognized
Usage: react-native <command>
I already ran "react-native upgrade" without any issues.
How can i get the command "run-ios" also in older projects?
Just update the version of react native in your project with the following command:
$> npm install --save react-native#latest
What caused this for me was running npm install --save [package] when actually the system has previously been using yarn instead of npm.
To solve this I just deleted the node_modules folder and ran: yarn install and after that react-native run-ios (or android) works fine.
$ react-native run-ios
If you get this kinda error:
"Command run-ios unrecognized. Make sure that you have run npm
install and that you are inside a react-native project".
In terminal, make sure you are inside a react-native project directory.
Execute this cmd:
$ react-native -v
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
$ npm update
$ react-native -v
react-native-cli: 2.0.1
react-native: 0.44.0
$ react-native run-ios
This may sound silly, but make sure you cd to your project directory. If that fails then perform the npm install in the other answers.
I found a solution that works for me.
Update the version of react native in your project:
npm install --save react-native#latest
then upgrade your npm version
npm i npm#latest -g
then move directory folder 1 level up, type
cd ..
make a new react-native installation folder
react-native init NewProject
then go to your project folder(NewProject), after that
react-native run-ios
should work fine.
This happens when the project has an older version of react native. You can update the react version or for people who do not want to upgrade, just open the .xcodeproj file in iOS dir and hit the play button in the Xcode.
In my case, it was an issue with the package.json file. I deleted a section during a test. I recover a previous file with the deleted section and everything was working again.
this works for me
sudo npm install -g react-native-cli --force
then
react-native run-ios
In my case, I am using monorepo with multiple packages in a single repo. I solved this error by
Deleting the packages/myapp/node_modules
running yarn install from the project root. Not inside packages
its solved. Now can run yarn ios or yarn android commands
Note:
For autolinking libraries you need to have all of your dependencies in root package.json file also copied to packages/myapp/package.json file. See https://github.com/react-native-community/cli/blob/master/docs/autolinking.md#how-can-i-use-autolinking-in-a-monorepo
Example:
"dependencies": {
"#react-native-community/datetimepicker": "^3.5.2",
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/native": "^5.9.4",
"#react-navigation/stack": "^5.14.5",
"#reduxjs/toolkit": "^1.6.0",
"#voximplant/react-native-foreground-service": "^2.0.0",
"axios": "^0.21.1",
"babel-eslint": "^10.0.3",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
...
...
but make sure NOT TO COPY
"react-native-cli": "^any version",
otherwise react-native-cli would collide and you will continue to see error like
Command `run-android` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.
error Command failed with exit code 1.
or
Command `run-ios` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.
error Command failed with exit code 1.
I created a brand new react-native project using
$ react-native init projectName
and ran from root of the project
$ react-native run-ios
Everything worked fine and iOS simulator fired up as expected.
Than I installed prop-types node module using npm install prop-types --save. Re-ran $ react-native run-ios and ran into this error Command run-ios unrecognized
Solution:
From the root of my project, removed node_module and re-installed modules using npm. Commands below
$ rm -rf node_modules/
$ npm install
$ react-native run-ios
For me, Xcode was already running.
Close the Xcode and then in the terminal, make sure you are inside a react-native project directory and then execute react-native run-ios command
For me, the only thing that worked was to checkout again my repository from zero and run:
npm install -g react-native-cli yarn
yarn
git submodule update --init --recursive
What caused this for me was running npm install --save axios when actually the system was previously using yarn instead of npm.
To solve this, instead of deleting the node_modules folder, which can lead to more problems, and if you prefer to run npm anyway or don't have a preference either way, the error should have instructed for you to run npm install. If you literally follow those instructions, you will be able to run: react-native run-ios afterwards.
I also fell in this error and the reason was
I was using yarn link command in wrong folder
Delete the node-modules. Its because the packages are not installed.
rm -rf node_modules
npm install
then run your project
react-native run-ios