i just started a project and im trying to start the but it already has this error showing:
error: node_modules\react-native\Libraries\Image\ImageAnalyticsTagContext.js: Property body[6] of BlockStatement expected node to be of a type ["Statement"] but instead got "AssignmentExpression"
this is a known issue caused by a bug in a newly released version of babel. it will impact all new react-native and expo apps. you can resolve it with yarn resolutions in a new project:
--- a/package.json
+++ b/package.json
## -25,5 +25,8 ##
},
"jest": {
"preset": "react-native"
+ },
+ "resolutions": {
+ "#babel/plugin-transform-react-display-name": "7.14.5"
}
}
After insert resulutions key on the package.json, run yarn install
Credits: https://github.com/brentvatne
Issue Link: https://github.com/facebook/react-native/issues/31961
Run this command:
npm install --save-dev #babel/plugin-transform-react-display-name
The problem is due to a babel update that affected the RN project. copy #babel from some other project and paste in node_modules or Download the #babel folder from here and replace the existing folder in the node_modules.#Babel Download
And run
npm start --reset-cache
I have been trying to include a React native library (Local Library) to the React Native app.
So I installed it using
npm install library-path
Then I run
npm link libraryname
I can see the package in the node_modules of the mainProject. Also, in package.json, I can see the dependencies:
"dependencies": {
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-first-library": "file:../react-native-first-library",
"react-native-toast-message": "^1.3.3",
"react-native-webview": "^10.8.3"
},
react-native-first-library is my react module.
I have done
Clear watchman watches: watchman watch-del-all
Delete node_modules: rm -rf node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*
But still, it is not working. I don't know why these things are so complex.
A lot of confused answers here. when you install a local package via npm install 'path/to/local/package', or in your package.json with 'file://path/to/local/package', npm links to the local package without copying. metro bundler does not know how to resolve these locally linked packages properly. you can update metro bundler config to do this.
example from my metro.config.js:
// paths to local packages
const localPackagePaths = [
'/Users/alexchoi/package-name',
]
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
nodeModulesPaths: [...localPackagePaths], // update to resolver
},
watchFolders: [...localPackagePaths], // update to watch
};
and then metro bundler will know how to resolve these locally linked packages.
make sure you restart metro bundler npx react-native start
I had to integrate a custom library once. I just created a folder at root level customLibs and I put the folder of my library into. Then in the package.json I specified "myLib": "file:./customLibs/myLib"
I'm not sure but in your package.json the path should not be file:../react-native-first-library with two dots but surely with one dot.
And at the end just yarn or npm i
I noticed react-native-webview was not found in node_modules/, so I did npm install react-native-webview. And it was fixed.
Try this code:
npx react-native link react-native-webview
just do one thing
1). copy the local library folder and paste it into the node_modules of the react native project..
example =>
i have a library say react-native-test
=> after installing it in a react native project I can see that package.json file has added a dependency like "react-native-test": "file:../react-native-test",
but i got an error as soon as I ran the project displaying unable to resolve module
=> just copy the react-native-test folder and paste it into the react native project's node_modules folder and do npm install again
I have created a React Native Project and I was trying to open that project in Expo XDE. It throws the following error:
Cannot find module ...\node_modules\expo\tools\LogReporter
Firstly I created a React Native project by cloning a KitchenSink Project.
Link:
NativeBase-KitchenSink
When I started the project by issuing series of commands inside the project root directory:
npm install and then expo start
I saw that the app.json was also not proper, which was the following:
{
"name": "NativebaseKitchenSink",
"displayName": "NativebaseKitchenSink"
}
After issuing expo start react-native reported that the app.json is not to be found in the current directory.
[17:05:08] Starting project at
D:\Projects\ReactNativeProjects\AwesomeProject [17:05:10] Error:
Missing app.json. See https://docs.expo.io/ [17:05:10] Couldn't start
project. Please fix the errors and restart the project. [17:05:10]
Error: Couldn't start project. Please fix the errors and restart the
project.
at C:\xdl#51.4.0\src\Project.js:1565:11
at Generator.next ()
at step (C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:191)
at C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:361
at process._tickCallback (internal/process/next_tick.js:68:7)
I changed app.json to:
{
"expo": {
"name": "AwesomeProject",
"description": "A Kitchen Sink project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": [
"ios",
"android"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.abhsax.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splashscreen.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
}
}
There were some updates in the project when I issued npm install again. Then I issued:
expo start
This error came:
(node:2044) UnhandledPromiseRejectionWarning: Error: Cannot find
module
'D:\Projects\ReactNativeProjects\AwesomeProject\node_modules\expo\tools\LogReporter'
Why am I getting this error, and how can I fix it?
check your package.json if it contains all needed dependencies and run npm install in the home directory of the project
if a package is missing you can add it with
npm install <package_name> --save
if you are using yarn run:
yarn add expo
I did:
yarn add expo
and it worked for me =)
See docs:
introducing-button-yarn-and-a-public-roadmap
and
npm-vs-yarn-in-react-native
These documents say that since the project configured using Yarn, you have to follow Yarn way. [Note: There is a file yarn.lock inside the root directory of the project, you have posted]
Therefore such projects are dealt by following the instructions in the documentation.
Please see How do I create a React Native project using Yarn? to actually create a react-native project using Yarn.
And please be sure to remove node_modules folder and issue command npm install before adding react native CLI using yarn. You have to remove package-lock.json from your project root. This will be to prevent mixing different package managers : npm and yarn.
Instead, it will be a good idea not to use npm, and in order to generate node_modules, just issue command:
yarn
Last link recommends to install every package you need using yarn, and not to use any other package manager:
yarn global add react-native-cli
to add react-native:
yarn add react-native
to add missing packages:
yarn add react-base --save
and to install expo using yarn:
yarn add expo
install expo-cli
yarn add expo-cli
It is possible that you can do without Expo. Just focus on react-native and yarn.
Generate android and ios folders:
react-native eject
Start yarn:
yarn start
run build of your choice, and make sure the SDKs are installed.
react-native run-android
Please also see: Uncaught TypeError: Cannot read property 'forEach' of undefined, on a KitchenSink demo
Happy Coding :-)
Install the Expo modules
npm install --save
i.e.
npm install expo --save
rollback with npm install -g expo-cli#2.4.3
I had an issue in my React-Native project which was working fine earlier but suddenly it stopped working. Whenever I used the command:
react-native run-android
I was getting an error:
Android project not found. Maybe run react-native android first?
I tried running:
react-native android
But it said:
Unrecognized command 'android' Run react-native --help to see list of
all available commands
After trying:
D:\ProjectRoot\ReactNativeProjects\AwesomeProject>react-native eject
The error returned was:
Scanning folders for symlinks in
D:\ProjectRoot\ReactNativeProjects\AwesomeProject\node_modules (48ms)
App name must be defined in the app.json config file to define the
project name. It must not contain any spaces or dashes.
This is the app.json file:
{
"expo": {
"name": "AwesomeProject",
"description": "A very interesting project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": ["ios", "android"],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.project.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
}
}
I raised this question and answered myself as I thought it will help others who are facing similar issue. I struggled a lot to find out the real reason behind it as the error shown in terminal was not precise.
To resolve the issue please upgrade the react-native package.
Go to the Project root.
Upgrade the React native package in the Command Prompt by typing :
react-native upgrade.
Then Accept to update all the Files by typing y (Yes) in the Command Prompt.
Reference: https://github.com/facebook/react-native/issues/9312
Open your React Native Project Root Directory and locate android -> app -> build -> intermediates -> signing_config -> debug -> out -> signing-config.json .
delete signing-config.json this file
try again
Or
1)Sometimes if we have older version of react native and some of newly installed packages dose not support older version. Then you have to update the react native project using react-native upgrade command.
After done updating current project to new version this error should resolved.
I know it is an old question but any of those solutions did not work for me and maybe there are others like me. I solved my problem running this command before run-android
react-native eject
Make sure to start the project using command (non-expo):
react-native init <your-project-name>
If existing folder, then follow:
react-native eject
In the latest version of react-native this suggestion comes when you try to issue the command:
react-native eject
Scanning folders for symlinks in
D:\ProjectRoot\ReactNativeProjects\AwesomeProject\node_modules (48ms)
App name must be defined in the app.json config file to define the
project name. It must not contain any spaces or dashes.
Now when you issue the following command:
D:\ProjectRoot\ReactNativeProjects\AwesomeProject>react-native upgrade
The following shows up:
Scanning folders for symlinks in
D:\ProjectRoot\ReactNativeProjects\AwesomeProject\node_modules (56ms)
You should consider using the new upgrade tool based on Git. It makes
upgrades easier by resolving most conflicts automatically. To use it:
- Go back to the old version of React Native
- Run "npm install -g react-native-git-upgrade"
- Run "react-native-git-upgrade" See https://facebook.github.io/react-native/docs/upgrading.html
react-native version in "package.json" doesn't match the installed
version in "node_modules". Try running "npm install" to fix this.
Aborting.
In the Facebook react-native commands suggestions, there is a clear solution.
These commands check the current version and whether there is update needed or not.
One more solution:
react-native: Command run-android unrecognized. Maybe caused by npm install
Please also see:
Solution to "Expo : cannot find a module LogReporter"
Open Command Prompt as Administrator and goto the project folder, run android(npx react-native run-android)
I did like this... Worked !!
In the CMD Project root run react-native upgrade.
if you are still getting issues, make sure you have react-native
in dependencies json in package.json, add it if not
if you are still getting issues, get the version of react native in cmd using react-native -v and check if the value returned in cmd and package.json are same. update the package.json with the value returned in cmd
Here my problem solved.
I had to restyle my AndroidManifest.xml because I had a syntax error somewhere (I had an extra "/" somewhere). Now it's fixed. Be very careful with your syntax...
Remove the file: React Native Project Root Directory and locate android -> app -> build -> intermediates -> signing_config -> debug -> out -> signing-config.json .
Running Terminal as Administrator in Windows did the trick for me... Other solutions did not work.
Open your React Native Project Root Directory and locate android -> app -> build -> intermediates -> signing_config -> debug -> out -> signing-config.json
Delete the file and try again.
I faced this problem today, and none of the solutions worked for me, so I found another one.
Badly Formatted AndroidManifest.xml will cause this problem, perhaps you set the splash screen like me today, and didn't formatted AndroidManifest in the correct way
We had this issue because files from android folder gradlew and gradlew.bat (Gradle startup script for the UN*X, Windows respectively) somehow got into the global .gitignore file, and so were not presented on local environments.
Actually running react-native upgrade command restore those files, thus fixing the problem.
As a complement, in the case react-native command is not found, you should install react-native CLI:
npm install -g react-native-cli
Then you can follow the steps people said above.
More details: react-native: command not found
Delete signing-config.json next try again react-native run-android
signing-config.json file Path : android -> app -> build -> intermediates -> signing_config -> debug -> out -> signing-config.json
If you started your project by following
npm install -g create-react-native-app
create-react-native-app MyReactNative
npm install -g react-native-cli
npm start
after this, you can face problem mention above in question So the solution is :
npm run eject
I'm using Android Studio (non-expo) and this works for me
react-native init <your-project-name>
I think one more simple thing you could have checked, is if previously you ran the project as different role of a user, like in windows if you ran previously the react-native run-android with an administrator role.
This error simply means you don't have 'android' and 'ios' folders in your root directory of the project. Their location is important.
SOLUTION:-
Open your project folder search for 'android' and iso 'folder', move these folders in your root folder of the project and then start the project with react-native run-android
For me, "rm -rf android/app/build/" worked
Run your command with "--verbose". I got the error that it couldn't read a file (in android/app/build/generated/not_namespaced_r_class_sources/). I deleted this folder, and it worked
My working solution is below, none of the above worked for me:
CD into your project folder and type expo start --android.
Or the long way:
Open AVD manager in Android Studio and run a virtual device (you can
close AS afterwards)
CMD into your project folder and type 'expo start'
Once Expo has started choose option 2 which is "Press a for Android
emulator"
It will install expo on the virtual device and you can test from there
Here, app.json does not have name, but it has expo related config.
So just add name and display name fields in app.json.
app.json (first two lines) :
{
"name": "AwesomeProject",
"displayName": "Awesome Project",
"expo": {
"name": "AwesomeProject",
"description": "A very interesting project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": ["ios", "android"],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.project.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
}
}
After this, just run :
$ react-native eject
info Generating the iOS folder.
info Generating the Android folder.
No need to do react-native upgrade.
You have to run your cmd with admin priviliges. That solved the same issue for me.
Didnt do "eject" or anything else.
In my case, I've forgotten to add Sudo. Fixed as follows,
sudo npx react-native run-android
Delete react native android build folder and then retry command npx react-native run-android
In my case i didn't had the right permissions for my project folder.
If this is your case just click with the right button on the folder > Properties > Security > Advanced and then change the ownership of the folder to your user, including the subfolders. That should do it
So if there is anyone having this issue here what worked for me,
{
"name": "ZedMusic",
"displayName": "zedmusic",
"expo": {}
}
the project name must be outside expo, then run npx react-native eject
When I ran react-native eject, I got this error:
Both the iOS and Android folders already exist! Please delete `ios` and/or `android` before ejecting.
Delete the MyProject/android folder.
Run react-native eject This generated the android folder
Then run react-native run-android to build android
You should consider using the new upgrade tool based on Git. It makes upgrades easier by resolving most conflicts automatically.
To use it:
- Go back to the old version of React Native
- Run "npm install -g react-native-git-upgrade"
- Run "react-native-git-upgrade"
See https://facebook.github.io/react-native/docs/upgrading.html
If you have created your project with the expo command, like expo init projectname, then afterwards you have to eject your project:
expo eject
If you have created you project by react-native init projectName then you have to use
react-native eject
May be it's too late, I replaced the Android folder from a backup file. It worked for me.
Given the following directory structure:
my-project
|
|-- node_modules
|
|-- react
|-- module-x
|
|--node_modules
|
|--react
You can see both my-project and module-x require React. I have the same problem as described on this question, but the suggestion is to remove react from the package.json dependencies. I do that and it works fine, as long as no node_modules are installed in module-x, because Webpack will use React from my-project. But if I'm in the process of developing module-x and the node_modules are installed, Webpack uses React from both my-project and module-x.
Is there a way I could have Webpack make sure only one instance of React is used, even though it's required on two separate levels?
I know I could keep module-x in a separate directory when developing, but it seems like I'd have to publish it and then install it in my-project to test it, and that's not very efficient. I thought about npm link, but had no luck with it since it still has node_modules installed in module-x.
This here sounds a lot like the same challenge I'm having, but it doesn't seem like npm dedupe or Webpack's dedupe option would work. I'm probably not understanding some important detail.
This issue usually arises when using npm link. A linked module will resolve its dependencies in its own module tree, which is different from the one of the module that required it. As such, the npm link command installs peerDependencies as well as dependencies.
You can use resolve.alias to force require('react') to resolve to your local version of React.
resolve: {
alias: {
react: path.resolve('./node_modules/react'),
},
},
If you don’t want to (or can’t) modify the project configuration, there is a more straightforward solution: just npm link React itself back to your project:
# link the component
cd my-app
npm link ../my-react-component
# link its copy of React back to the app's React
cd ../my-react-component
npm link ../my-app/node_modules/react
Just in case it's useful for others, the solutions suggested above didn't work for me, I had to perform the following steps to solve it:
In the library:
Setup the libraries that are generating issues as peerDependencies in the package.json instead of dependencies or devDependencies, e.g. in my case react:
"peerDependencies": {
"react": "^16.8.6",
...
}
run npm install
build the library (in my case, with a rollup -c npm script
In my main app:
change the version of my library to point to my local project with a relative path in package.json, e.g.
"dependencies": {
"my-library": "file:../../libraries/my-library",
...
}
Add resolve.symlinks = false to my main app's webpack configuration
Add --preserve-symlinks-main and --preserve-symlinks to my package.json start script, e.g:
"scripts": {
"build": "set WEBPACK_CONFIG_FILE=all&& webpack",
"start": "set WEBPACK_CONFIG_FILE=all&& webpack && node --preserve-symlinks-main --preserve-symlinks dist/server.js",
}
run npm install
run npm run start
In the same vein as the accepted answer here's how you can achieve the desired outcome with Craco:
const path = require('path')
module.exports = {
webpack: {
configure: config => {
config = {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'react': path.resolve('./node_modules/react'),
},
},
}
// console.log(config)
return config
},
},
}
It's important to note you can't just pass resolve as a key, you have to do your own deep merge using the configure callback.