"Unable to resolve module path" in React Native - react-native

After adding a new dependency, I get the error message "Unable to resolve module path" in a red screen in my React Native app. I've tried clearing the cache as the screen instructs.
(question is brief as I'm answering it myself)

The error message:
Unable to resolve module path
Should really be:
Unable to resolve module "path"
path is the name of the module it can't load! I was reading the error message as "can't resolve a path to the module".
So the root cause is, the file it lists in the error message is importing the native Node module path, which isn't available on React Native.
The solution is to npm install -D path, which is a replica implementation.

Any imports from #babel/core package is causing this error.
Some code editors are inserting the import line automatically.
For example, import { types } from '#babel/core' is inserted by Visual Studio Code when you enter types.
If you remove the imports from #babel/core in the codes, it will be fixed.

Quote from chronikum on react-native github issues for future readers
Just check if you somewhere accidentally imported something from
#babel/core.
Here is the original link
https://github.com/facebook/react-native/issues/27522#issuecomment-568306279

None of the answers are really helpful, I found that the problem in my case was that the macros plugin was missing in my babel configuration file.
This is what I had in my babel.config.js
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
};
After adding the macros plugin
module.exports = {
plugins: ["macros"],
presets: ["module:metro-react-native-babel-preset"],
};
If you get this error, most like you are missing a plugin in your babel config.

I have solved my issue by the below steps.
Read the error message carefully, the error is node modules path(mentioned as NO: 1 in below image). In my case, I have the "just-cli/" module (Mentioned NO: 2).
search the module (just-cli) you have imported somewhere in your project and just Remove it. The problem will be solved.

Related

compile errors after upgrading to latest CRA

I just updated to latest create-react-app (web pack 5). And am now getting the following errors (I'm just showing the first 2 errors here). Any help explaining what this error means and how to fix it would be greatly appreciated. I don't think the problem is with react-pdf because I created a new create-react-app project that uses that package and there's no problem.
{
Compiled with problems:X
ERROR in ./node_modules/react-pdf/node_modules/#babel/runtime/helpers/esm/inherits.js 1:0-46
Module not found: Error: Can't resolve './setPrototypeOf' in '/Users/bob/dev/workbox-web/node_modules/react-pdf/node_modules/#babel/runtime/helpers/esm'
Did you mean 'setPrototypeOf.js'?
BREAKING CHANGE: The request './setPrototypeOf' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
ERROR in ./node_modules/react-pdf/node_modules/#babel/runtime/helpers/esm/objectWithoutProperties.js 1:0-74
Module not found: Error: Can't resolve './objectWithoutPropertiesLoose' in '/Users/bob/dev/workbox-web/node_modules/react-pdf/node_modules/#babel/runtime/helpers/esm'
Did you mean 'objectWithoutPropertiesLoose.js'?
BREAKING CHANGE: The request './objectWithoutPropertiesLoose' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
}
Somehow I was accessing a wrong version of babel after CRA upgrade to 5. Deleting node_modules and re-installing was not enough. I needed to delete node_modules and yarn.lock and then yarn install - and then all was ok.

trying to use tipsi-twitter in snack.expo.io?

I'm trying to use tipsi-twitter in snack.expo.io but I'm running into issues. I added the following item into package.json dependencies:
"tipsi-twitter": "*"
Expo then appeared to successfully install this package. In my App.js I included the following import:
import TwitterAuth from 'tipsi-twitter';
The import compiles successfully but when I put the following code after the imports:
TwitterAuth.init({
twitter_key: '<TWITTER_KEY>',
twitter_secret: '<TWITTER_SECRET>',
})
This returns an error of:
"Cannot read property 'init' of undefined"
But this appears to be the exact implementation in the Usage section of the tipsi-twitter github page:
https://github.com/tipsi/tipsi-twitter#usage
Any idea what the issue might be or how to debug? Am I possibly missing some type of configuration step or is it possible that expo.io doesn't support this package/scenario?

How to resolve ESLint error unable to resolve path to module 'react-native'

New to react native and trying to setup ESLint in my project. I am getting this specific error:
Unable to resolve path to module 'react-native'. (import/no-unresolved)
I searched on SO and found similar threads, but nothing seems to work. I tried cleaning the npm cache as well.
import { AppRegistry } from 'react-native';
There is a red underline on my index.js file in the project root (using Atom editor) and under the word react in the above code snippet.
As per the react native guide
AppRegistry should be required early in the require sequence to make
sure the JS execution environment is setup before other modules are
required.
If you are struggling with es-lint configuration and guess that it's showing false error then you can add .eslinrc file at the root of the project and configure eslint rule as required. I suggest airbnb standard, this guide show full setup here

Angular flex-layout in Ionic3... rxjs/operator not found?

Trying to use #angular/flex-layout in an existing npm-enabled Ionic 3 project.
Adding "FlexLayoutModule" to my main module's imports won't allow the app to start, saying that: cannot find module "rxjs/operators" is the cause.
Already cleared node_module, npm install, reinstalled Ionic CLI. Nothing helps. Could it be a version conflict? Moreover, I'm already using Observables in this project. I don't get it. And the import of "FlexLayoutModule" is in cause of this issue (disabling the import removes the issue).
Anyone could be successful at using flex-layout with ionic? I've seen this plunk, but it uses system.js, so not 100% reproducing my goal.
http://plnkr.co/edit/y8R0MF?p=info
Edit: a more verbose issue:
Uncaught (in promise): Error: Cannot find module "rxjs/operators"
Error: Cannot find module "rxjs/operators" at Object.580
(http://localhost:8100/build/22.main.js:319:7) at webpack_require
(http://localhost:8100/build/main.js:48:30) at Object.1021
(http://localhost:8100/build/22.main.js:11:79) at webpack_require
(http://localhost:8100/build/main.js:48:30) at
http://localhost:8100/build/main.js:122015:10 at t.invoke
(http://localhost:8100/build/polyfills.js:3:9283) at Object.onInvoke
(http://localhost:8100/build/main.js:4650:37) at t.invoke
(http://localhost:8100/build/polyfills.js:3:9223) at r.run
(http://localhost:8100/build/polyfills.js:3:4452) at
http://localhost:8100/build/polyfills.js:3:14076
I'm getting a similar error with Angular CLI. Everything is OK until I include FlexLayoutModule in the app's NgModule imports. Then I get the error:
Module not found: Error: Can't resolve 'rxjs/operators' in 'D:\dev\Vms.Signup.Client\node_modules\#angular\flex-layout\esm5'
I updated to the latest rxjs and that seems to have fixed it.

Upgrade to react-native 0.16 error

I upgraded my app from react-native 0.15 to 0.16 but after that I'm getting an error and I don't know how to solve it.
TypeError:undefined is not an object (evaluating 'GLOBAL.Text={
get defaultProps(){
throw getInvalidGlobalUseError('Text')}}')
In Chrome Debugger:
Uncaught Error: Uncaught TypeError: Cannot set property 'Text' of undefined
Thanks
OBS: I'm running on Android.
I notice that changing app name solves the problem, I'm using Evently as app name today. I tried to recreate my virtual machine but didn't solve it.
In my case, I was able to narrow the cause down to one item in my .babelrc file:
{
"presets": ["es2015"]
}
As soon as I removed that and restarted the packager (making sure to also use the --reset-cache flag), I stopped getting the error.
Update 2:
It looks like React Native is making some changes to their .babelrc in version 0.20.0. So, if you are using that version or newer, you should follow the instructions at: https://github.com/facebook/react-native/tree/master/babel-preset in order to specify your .babelrc settings.
Update:
I've narrowed this down further to transform-es2015-modules-commonjs, which React-Native sets some options on, specifically {"strict": false, "allowTopLevelThis": true}. The es2015 preset does not set this option, and it seems that the React-Native .babelrc does not override it. If you want to use es6 modules and transform them to commonjs, you'll need to put the following in your .babelrc:
{
"plugins": [
["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}]
]
}
Note, Babel 6, which I updated to along with react-native 0.16.0, no longer contains any transforms by default. What I didn't initially realize is that the React-Native packager provides most of the transforms you might ever need (listed in their docs at: https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers), and I'm thinking that the "es2015" plugin interferes with some of those transformers.
I also tried using "babel-preset-react" (http://babeljs.io/docs/plugins/preset-react/), and that plugin did not seem to cause any errors.
I solve the problem. I think it was because permissions in project folder. I ran chown in my folder to correct the permissions problems and now all are working.
Thanks
In my case the problem was a rogue .babelrc two folders up (my root code folder); I had initiated a yeoman generator to scaffold out a new project using babel-6...accidentally running yeoman from the root code folder. Apparently babel traversed upwards from my project folders until it hit this .babelrc which borked the react-native babel configs...
^ this was originally an edit to my initial answer, which was deleted WHILE I WAS UPDATING IT