Here's a list of my firebase dependencies in package.json:
"#react-native-firebase/admob": "^6.2.0",
"#react-native-firebase/app": "^6.2.0",
"#react-native-firebase/auth": "^6.2.0",
"#react-native-firebase/crashlytics": "^6.2.0",
"#react-native-firebase/messaging": "^6.2.0",
I just added the last "messaging" dependency in that list and then ran npm install. I included the following import for a component:
import messaging from '#react-native-firebase/messaging';
Then I included the following line of code in one of the component functions:
const enabled = await firebase.messaging().hasPermission();
My app is currently returning the following error:
Error: Requiring module "node_modules\#react-native-firebase\messaging\lib\index.js", which threw an exception: Error: You've attempted to require '#react-native-firebase\messaging' version '6.3.4', however, the '#react-native-firebase\app' module is of a different version (6.2.0). All React Native Firebase modules must be of the same version. Please ensure they match up in your package.json file and re-run yarn/npm install
I inspected my project's node_modules\#react-native-firebase\messaging\package.json. Here's a subset of some of the version refs within that file:
"_from": "#react-native-firebase/messaging#^6.2.0",
"_id": "#react-native-firebase/messaging#6.3.4",
"_requested": {
"raw": "#react-native-firebase/messaging#^6.2.0",
"rawSpec": "^6.2.0",
"fetchSpec": "^6.2.0"
},
"_resolved": "https://registry.npmjs.org/#react-native-firebase/messaging/-/messaging-6.3.4.tgz",
"_spec": "#react-native-firebase/messaging#^6.2.0",
"version": "6.3.4"
So it looks like the ^6.2.0 version spec that I configured is getting read as expected, but then some aspect of the npm install process redirects the install to version 6.3.4. Any idea why this is happening? All of the firebase modules are required to be of the same version, so if I want to use the firebase messaging module then do I need to set the version to all of the other firebase modules to "^6.3.0" in my project's package.json? Or do I have other options for a workaround?
I am new to react-native but not ReactJs iam going to mad about this error from 2 days
error: bundling failed: Error: While trying to resolve module `#react-navigation/native` from file `C:\XXXXX\Example\src\Router.jsx`, the package `C:\XXXXX\Example\node_modules\#react-navigation\native\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\#react-navigation\native\src\index.tsx`. Indeed, none of these files exist:
error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\App.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:
This is my package.json
{
"name": "Example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/native": "^5.0.0",
"#react-navigation/stack": "^5.0.0",
"eslint": "^6.8.0",
"jetifier": "^1.6.5",
"native-base": "^2.13.8",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.0",
"react-native-camera": "^3.16.0",
"react-native-gesture-handler": "^1.5.6",
"react-native-image-crop-picker": "^0.28.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-safe-area-view": "^1.0.0",
"react-native-screens": "^2.0.0-beta.2",
"react-native-svg": "^11.0.1",
"react-native-vector-icons": "^6.6.0"
},
"devDependencies": {
"#babel/core": "^7.3.3",
"#babel/runtime": "^7.3.1",
"#react-native-community/eslint-config": "^0.0.3",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
I am downgrade the react-navigation version to react-navigation 4 and react-navigation-stack
the error become
error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\node_modules\react-navigation-stack\lib\module\vendor\views\Stack\StackView.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:
I am also deleted node_modules ,clear cache and install again but no use same errors appear
After a long research MetroJS bundler default not compile typescript .ts and .tsx extension files.
We need tell MetroJS bundler to compile .ts and .tsx files
i solved this error by edit metro.config.js file in root project folder by following.
Edited on September 2022
Added cjx and json extensions to below snippet
All extensions listed below not required it's depend on what language you choose javascript or typescript, and your dependencies
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'] //add here
},
};
The above answers did not work for me. Turns out there was nothing wrong with my files.
I simply had to terminate the react-native metro that was running on the terminal and restarted it, it worked fine.
Adding to the accepted answer by Jogi, this issue was acknowledged by the Apollo developers at https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19
I was unable to resolve the issue with Jogi's answer alone, but after adding 'cjs' to the array, as recommended in the linked changelog, my app was able to start up as expected.
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
},
};
For me, I'm using two terminals to run my app. 1st terminal: react-native start, 2nd: react-native run android, which builds the app and starts it on my physical device. I got the same error above when I installed a new package and rebuild my app not knowing that I had to restart the react-native server.
So what I just did is went back to 1st terminal, killed it, and re-run react-native start then rebuilt my app in the second terminal and everything is working as expected!!!
here is how my metro.config.js it looks like after configuring. i am using react-navigato 5*
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
/** include this below (remove this comment too)*/
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
};
I got the same error with react-native-gesture-handler package.Changing metro.config.js file has worked for me.
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
};
This has worked for me.
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx','js','ts','tsx'] //add here
},
};
As many of them already mentioned to customize your metro.config.js file. If it is not there create it in the root directory of your project and then add the code as everyone said. Now even after adding the code in metro.config.js file error is there, then you have to stop your expo server and restart with command
expo start -c
This works for me. Hope it will help you too.
For Expo, this version worked
https://github.com/firebase/firebase-js-sdk/issues/6253#issuecomment-1123923581
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
Sometimes, you get this error because you install an npm package that has a main script that's not correctly integrated with your project. This could be because you have named your files differently, you have nested your file a layer deeper and causes a script to break, etc.
Check the package.json file of the package the error message tells you "main" is incorrect and see if it is correctly pointing to the app entry in the package.json of the root directory.
Doing this fixed the error for me.
for me none of the above worked but this did:
go to :
node_modules\deprecated-react-native-prop-types\DeprecatedColorPropType.js
find this line :
const normalizeColor = require('#react-native/normalize-color');
and change it to this:
const normalizeColor = require('#react-native/normalize-color/base');
I tried all the solutions above but none worked. so i did yarn install instead of npm and it worked
For me, It was to kill my metro cmd
Deleted my app from the emulator then,
run npx react-native run-android or
if you're using expo run
npm start
Error is gone
kill the already running terminal and start the project by running this command:
npx react-native start it will start your app as expected
I got the same issue.I am using yarn as my package manager. Resolved the issue by following the below steps.
Stop the metro bundler(In my case i closed terminal which terminated metro bundler).
Restart it using yarn start --reset-cache.
Run yarn android.
In my case the error was due to the cache. I followed following steps:
Navigate to android folder
cd android
after that clean the build folder
./gradlew clean
and to generate the apk file
./gradlew assembleRelease -x bundleReleaseJsAndAssets
use this to generate aab
./gradlew bundleRelease -x bundleReleaseJsAndAssets
I hope these commands will help others as well.
stream cannot be used with expo, as it is a Node.js standard package. However, the package stream-browserify can be used as an alternative in those scenarios.
In order to make modules resolve this instead of the native Node package, I am trying to make babel-plugin-require-rewrite work with expo.
I am adding this to babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
["rewrite-require", { aliases: {
"stream": "stream-browserify"
}}]
]
};
};
Unfortunately, it is not respected by the bundler. I get this error when trying:
The package at "node_modules\qr-image\lib\qr.js" attempted to import the Node standard library module "stream". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo
Is it possible to make this work in Expo?
You dont need to modify babel config to use stream-browserify in your source. You can import stream-browserify in your App.js. I have created a simple example on GitHub.
App.js
const Stream = require('stream-browserify');
Package.json
"dependencies": {
"buffer": "^5.2.1",
"events": "^3.0.0",
"stream-browserify": "^2.0.2",
"readable-stream": {
"version": "2.3.6",
"dependencies": {
"core-util-is": "github:mjmasn/core-util-is"
}
}
...
}
stream-browserify has dependency readable-stream which has its own dependency and use node environment. To resolve it you have to add these node packages. You can read about core-util-is fork here.
This answer rn-nodeify install that i have posted should work. Except Step 1 & Step 5 follow all steps. Step 3 is used for adding node packages you are specifically looking to install, in this case specify stream. Please do modifications in Step 4 based on your requirement in Step 3.
Please do comment if you want me to elaborate.
What ended up working for me was creating a metro.config.js file with the following content (I used readable-stream instead of stream-browserify, but I think either should work):
module.exports = {
resolver: {
extraNodeModules: {
stream: require.resolve('readable-stream'),
},
},
};
And then I just used yarn add readable-stream and this allows dependencies to use readable-stream as if it were stream.
This was based on the info I found here: https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd#file-node-modules-in-react-native-md