I'm trying to create my first React Native app for Android using the instructions on https://facebook.github.io/react-native/docs/getting-started.html. After setting up the dependencies and connecting my Android device, I ran
react-native init app
cd app
react-native run-android
This starts the React Packager, which fails to bundle with this error:
error: bundling failed: "TransformError: /Users/luky/dev/app/index.android.js: Unexpected token ) (While processing preset: \"/Users/luky/dev/app/node_modules/babel-preset-react-native/index.js\")"
I am using:
OSX El Capitan 10.11.6.
node version 6.9.2
react-native version 0.47.1.
I pushed my generated project, including node_modules, to Github in case it helps: https://github.com/luky1971/react-native-app
Does anyone know why I might be getting an Unexpected token error? Any help would be greatly appreciated!
I got the same thing, it looks like the latest version of the babel preset for react native has some bugs (version 3.0.0). I went into my package.json and replaced the latest version with this:
"babel-preset-react-native": "2.1.0".
then I deleted the node_modules directory and ran npm install and it worked.
Install babel-preset-react-native#2.1.0 and run the project.
In the current project, do this...
yarn remove babel-preset-react-native
yarn add babel-preset-react-native#2.1.0
This worked for me, I hope it will for you too.
You can find more information about the error here https://github.com/facebook/react-native/issues/15513#issuecomment-322824346
Try deleting the .babelrc file in the root directory. Or rename it. Then re-run the "react-native run-android" command. This worked for me. Good luck.
Looking for JS files in
/Users/admin/Desktop/CoinMarketCap
React packager ready.
Loading dependency graph, done.
Bundling `index.ios.js` [development, non-minified, hmr disabled] 0.0% (0/1), failed.
error: bundling failed: "TransformError: /Users/admin/Desktop/CoinMarketCap/index.ios.js: Unexpected token ) (While processing preset: \"/Users/admin/Desktop/CoinMarketCap/node_modules/babel-preset-react-native/index.js\")"
iMac-D001:CoinMarketCap admin$ react-native --v
react-native-cli: 2.0.1
react-native: 0.47.1
Fixed it for me:
https://github.com/facebook/react-native/issues/15545
iMac-D001:CoinMarketCap admin$ npm uninstall babel-preset-react-native
iMac-D001:CoinMarketCap admin$ npm install babel-preset-react-native#2.1.0
I cloned your project. It is working fine. You can delete node_modules folder, then npm_install. It will work fine.
Try to set a new project, choosing the version of react-native as below:
react-native init --version="0.55.0" MyNewApp
Go to the new project directory.
CD project_name
Open the app in android studio. Open the AVD manager emulator and choose the virtual device. Then execute this command back there on the prompt:
react-native run-android
This worked for me. Hope it can help you too.
It could also be because of a dependency that you're using and needs to be put in the preset of your babel.config.js
e.g. I ws using expo, then ejected. And one of the dependency was react-native-paper for which I had to change the babel.config.js file to get it working.
Related
I have an existing Vue project and I want to add Boostrap into it. I ran this command (following this tutorial)
npm install bootstrap jquery popper.js
And then, I got an error in the Vue project.
./node_modules/core-js/modules/es.array.iterator.js module build failed: error: enoent: no such file or directory
I have tried deleting node_modules folder and package-lock.json then running npm install, but it didn't work. I also have tried to clear cache but it didn't work. I also have tried running npm install from my cmd but it didn't work as well.
Any other suggestions? Thanks!
Which version of vue are you using (2, 3)? Have you considered using Bootstrap Vue?
I just did the same method a few hours later and it succeeded. I think probably it also depends on your Internet connection.
I am learning how internationalization works on React Native. To do so I am using expo.
I am using this library:
https://github.com/zoontek/react-native-localize
When I test it on the web browser it works perfectly but when I do so in my Android physical device, it does not work. Apparently the linking of react-native-localize is not working. I get this error:
Error: react-native-localize: NativeModule.RNLocalize is null. To fix this issue try these steps:
• Run `react-native link react-native-localize` in the project root.
• Rebuild and re-run the app.
• If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app. You may also need to re-open Xcode to get the new pods.
• Check that the library was linked correctly when you used the link command by running through the manual installation instructions in the README.
• If you are getting this error while unit testing you need to mock the native module. Follow the guide in the README.
• If none of these fix the issue, please open an issue on the Github repository: https://github.com/zoontek/react-native-localize
Then if I run react-native link react-native-localize it shows a warning that this is deprecated and it does not work.
On my package.json I have this versions for the dependancies localize and react-native:
"react-native-localize": "^2.0.1",
"react-native": "~0.63.4",
It is supposed for react-native higher than 0.60 linking should be done automatically.
If any further information is needed, please let me know.
Have a try by running the project again by npx react-native run-android command.
If you are using the iOS Device then:
cd ios && pod install
npx react-native run-ios
if still not works try installing the npm package again and follow the documentation.
use
npx react-native link react-native-localize
instead of
react-native link react-native-localize
hope so it will help you
I'm completely new to React Native and I'm following Facebook's tutorial at https://facebook.github.io/react-native/docs/getting-started using React Native CLI.
Yesterday, I've created a project successfully. Today, when I create an empty folder and run react-native init AnotherProject I get:
error Couldn't find package "#jest/environment#^24.5.0" required by "#jest/reporters#^24.5.0" on the "npm" registry.
What am I doing wrong? I'm on npm 6.7.0 and node 11.12.0.
Weird. I've ran the exact same command again, and it worked.
I am working on a React Native app and suddenly see this :
FAIL Inject RemoteDev monitor into React Native debugger, the file 'react-native\local-cli\server\util\debugger.html' not found.
when i run npm install.
It used to be ok before. I checked the folder AppData\Roaming\npm\node_modules\react-native\local-cli\server\util and the debugger.html file is there.
Here is my package.json script:
"postinstall": "remotedev-debugger"
How can I fix this?
I got this error today after updating to the latest React Native version.
I think you need to update RemoteDev package.
For me, this involved replacing remote-redux-devtools-on-debugger with the latest remotedev-rn-debugger (https://github.com/jhen0409/remotedev-rn-debugger) as the package name had changed.
Upgrade the remotedev-rn-debugger package.
If you use NPM:
npm i remotedev-rn-debugger#latest --save-dev
If you use Yarn:
yarn add remotedev-rn-debugger#latest --dev
I'm brand new to React Native, I wanted to install an UI toolkit to simplify my UI design process so I went ahead and installed #shoutem/ui. After the installation I ran my application and I got a dependency error:
I went ahead and installed string_decoder (npm install --save string_decoder) so it now shows as a module under my node_modules folder but I still get the same error.
I tried to troubleshoot this by following the steps the error message shows, still getting it. Any suggestions on this?
Maybe, it' from packager cache. start packager with this command:
npm start --reset-cache
React Native v40 had some breaking changes which caused Shoutem UI toolkit not to work. It will be solved in the following days. In the meantime, here is a temporary solution.