I have a problem "Unable to resolve module".
// Please, read the question before publish comments with links for first result from google.
This is the import line where I got the error:
import Interactor from 'react-native-native-orientation-interactor';
What I did:
Create a react-native library
Run npm link inside the library folder
Run npm link react-native-native-orientation-interactor inside a demo react-native app
Add import statement
Got the error with import.
If I press Cmd+B on import statement I can open a file from node_modules folder. Also I can see my library (as a link) inside node_modules.
But I didn't find any solution for me.
Upd1: I added my library as a dependency in package.json
"dependencies": {
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-native-orientation-interactor": "*"
},
1 - First of all you have written double native in react-native-native-orientation-interaction
2 - Another thing is, don't add dependencies manually..
Use Proper installation guide like
npm install --save react-native-orientation-interactor
or
yarn add react-native-orientation-interactor
then link the dependency.
3 - And actually I didn't get any module named 'react-native-orientation-interaction'.
react-native-orientation
here is the one of valid module dependency.
always read the whole proper Documentation.( Correct me if I am wrong)
If you are able to link your package correctly, and problem still persists.
From my experience you can do two things to resolve error.
1) Try to install pod in ios/ directory
or
2) Just close the Termianl and re-run
Related
So I've got a react-native module I'm building in it's own repo. In this repo, I've included an example app of how it can be used and I've specified it like this in my ExampleApp's package.json:
"my-module": "file:../"
I'm using metro-with-symlinks which works great for hot reloading my example app when I'm editing my module's source code.
Problem I'm running into now is that I've just added a dependency on my module on #react-native-community/async-storage, like so:
// my-module package.json
"dependencies": {
"#react-native-community/async-storage": "^1.12.1"
...
}
Now, whenever I start my example app, I get Error: [#RNC/AsyncStorage]: NativeModule: AsyncStorage is null. So my example app isn't linking this dependency and I don't know how to make it do so. I can see this when I do a pod install in my example app because the async storage dependency isn't showing up.
Is there any way to get this set up working?
EDIT: I've seen people in my org use peerDependencies for react-native modules like this and require the application to supply the RN module. Is that the "correct" way to go about it for react-native. It doesn't feel very "peerDependency" to me, but maybe this is how RN modules should be developed?
Is it possible to an Expo app example to load a module located in the parent folder AND to see changes in the example app when i rebuild the package (with tsc -w to rebuild on any saved files)?
I precise that the module is not publish on npm yet.
I've already succeed to do that using monorepo architecture with yarn workspaces and expo-yarn-workspaces package.
But what about the case when you don't want to publish your package like a monorepo?
For example, in this repo https://github.com/cuvent/react-native-vision-camera
There is an example RN app in bare workflow and in its package.json there is no mention of the developed package (meaning that it's not installed like a normal dependency).
But in the app src/App.tsx, the package is used like that :
import { Camera, frameRateIncluded, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
Though, the react-native-vision-camera is used like it's already and normally installed with yarn or npm.
How does it work ?
Thanks.
Finally, I've found something that works for me.
You can find my config for metro if you want here:
https://github.com/grean/react-native-metro-config-app-example
With it, you can access the parent component from the expo app, modify it and immediately see the hot-reload changes.
Create a file metro.config file in your expo root app directory with that code inside:
let config = require('#grean/react-native-metro-config-app-example/index.js');
module.exports = config
For a whole example, you can check this repo out:
https://github.com/grean/react-native-scale-text
I init a new project using react native 0.61.2 , using react-native init proj command, after that when I try to react-native run-android, the build fails with this error :
FAILURE: Build failed with an exception.
Where:Script '..\node_modules#react-native-community\cli-platform-android\native_modules.gradle' line: 182
What went wrong:
A problem occurred evaluating script.
Unable to determine the current character, it is not a string, number, array, or object
The current character read is 'D' with an int value of 68
Unable to determine the current character, it is not a string, number, array, or object
line number 1
index number 0
as i mentioned, it's a fresh project.
any idea how to fix this ?
I ran into the same issue today and noticed that react recently released new versions to react-native and react.
I downgraded to versions i know work properly which are:
"react": "~16.8.0",
"react-native": "~0.60.0"
cleared all cache and the project loads correctly.
in order to do so change the dependencies in your package.json file
then delete your node_modules directory, package.lock file and run npm cache clean
finally run npm i
perhaps there are still issues in the new releases.
I am aslo facing the same issue. Downgrading works, however i have two other projects that r working fine and they are react native 0.61.2
Only new projects are giving this error. I read in some blogs that removing react community cli from global and trying again might do the trick.
Will try that tomorrow and post my findings.
Look for mistakes in your AndroidManifest.xml!!!
For me, I solved this by replacing the character ” with "
(And also read some people telling that unclosed tags did that too)
As dumb as it looks, I got to this error from following a tutorial.
(tip: VS code would often show these quotes in different colors, unless you have installed another XML files extension)
I ran into the same issue in a fresh project with RN 0.64.0. The project was created inside a monorepo that was using Yarn workspaces. In my case, Yarn had moved or "hoisted" the #react-native-community/cli-platform-android/native_modules.gradle file to the root node_modules directory.
The Android project's settings.gradle and build.gradle files are expecting the #react-native-community/cli-platform-android/native_modules.gradle file to be in the RN project's node_modules directory and not the repo's root node_modules directory.
Try updating line 2 of settings.gradle to something like:
apply from: file("../../../node_modules/#react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
And line 222 of build.gradle to something like:
apply from: file("../../../../node_modules/#react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
Obviously, you will need to adjust how many leading ../ you add to the path depending on how nested your project is.
You could also look into using the nohoist options available with Yarn to keep packages from moving around.
I think this is a config issue related to keeping store in an npm-linked folder.
I made a vue-cli 3 project and got the “counter” example running (from https://github.com/vuejs/vuex/tree/dev/examples/counter)
Works: When I move the store.js to an installed node_modules package (and update its import url) it continues to work.
Breaks: When I move the store.js to an npm linked node_modules package it compiles and dev tools finds the store, but I get a blank screen and console error: Property or method “$store” is not defined on the instance but referenced during render
It also works properly with a linked package if I build the minimized js (npm run build). Is there a config setting I'm missing?
The problem turned out to be that the linked packages had its own node_modules folder. I think that may have resulted in webpack creating 2 instances of Vue and attaching the linked package to the 2nd instance.
Deleting the depended upon package's node modules and letting webpack / vue-cli run at the root level resolved my problem.
I realize this question is ridiculously old, but I ran into this exact issue. As deleting node_modules isn't a valid solution, here's what actually worked.
In the library you're importing into your main app, edit your package.json file.
You want to move Vue to be a peer dependency.
"dependencies": {
"vue": "^3.0.0" // move this
},
Move "vue" here.
"peerDependents": {
"vue": "^3.0.0"
},
This will cause your library to use the instance of Vue utilized by your main vue app. As the accepted answer states, this issue is indeed caused by each package loading its own Vue instance. The issue happens because reactivity is bound to the Vue instance. As each library gets its own instance, this creates a situation where reactivity isn't properly tracked between the instances.
I found the solution to this in the Vuejs git repo at https://github.com/vuejs/vue-cli/issues/4271
I'm getting this error when trying to compile my React Native android app.
The Android app can't resolve BuildConfig.DEBUG.
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac
/Users/amirsharif/mobile-rappad/android/app/src/main/java/com/rappadmobile/MainActivity.java:29: error: cannot find symbol
.setUseDeveloperSupport(BuildConfig.DEBUG)
^
symbol: variable BuildConfig
location: class MainActivity
>1 error
:app:compileDebugJavaWithJavac FAILED
I can temporarily resolve it by simply setting it to true.
This might've happened after I changed an application name (since that's something I've also been trying to do).
I probably have to change something with Gradle so it generates the right kind of files again.
/**
* Automatically generated file. DO NOT MODIFY
*/
package com.app;
public final class BuildConfig {
public static final boolean DEBUG = Boolean.parseBoolean("true");
public static final String APPLICATION_ID = "com.rappadmobile";
public static final String BUILD_TYPE = "debug";
public static final String FLAVOR = "";
public static final int VERSION_CODE = 1;
public static final String VERSION_NAME = "1.0";
}
I had the same issue and it was resolved by simply adding following import statement in MainApplication.java:
import com.facebook.react.BuildConfig;
The way android knows where to find certain files, and how to connect certain files, is by using fields set in AndroidManifest.xml. Since the default setup of a React Native project, references everything with .(name-of-resource), this means that everything will be resolved with regarding to the package name set in the <manifest> tag. So for everything to work out of the box, and everything to be generated as expected, the path to MainActivity.java, should be the same as the package name.
example:
your apps package name:
com.mycompanyname.myappname
location of MainActivity.java: android/app/src/main/java/com/mycompanyname/myappname/MainActivity.java
I rebuilt the project with react-native upgrade.
My issue was then that I had old files that were referencing the old package names (because I changed the name of the app in package.json). Once deleting those, I resolved the issue.
In your MainActivity.java, you can check the first line is package com.YOU_APP_NAME;
If this line does not exist, you should add this.
A combination of some answers helped me, summary:
Make sure your java package names are correct (MainApplication.java etc.)
update the package name in the gradle build file
update the package name in the manifest file
update the package name in the BUCK file
make sure the path to you javascript sources is a folder structure that matches your package name
In my case, I changed the package name in both the BUCK file and Manifest file.
In the BUCK file, change as following.
android_build_config(
name = "build_config",
package = "NEW_PACKAGE_NAME",
)
android_resource(
name = "res",
package = "NEW_PACKAGE_NAME",
res = "src/main/res", )
If you renamed your bundle identifier you will likely need to change:
Your android/app/src/main/....../MainApplication.java package and imports.
Even though I used react-native-rename npm package, it did not take care of some files MainApplication.java and MainActivity.java.
Upgrading react-native solved this error -
react-native upgrade
Now build again -
react-native run-android
Delete the old files that might be there in android/app/src/main/java/com
Just keep the file with the new name of the app. Then do react-native upgrade.
My case was that I renamed the package in one place(AndroidManifest.xml)
Ex:
The original: com.example
Changed it to: com.example.app
Renaming it again solved the problem
I experienced this while following https://dev.to/karanpratapsingh/quick-guide-for-updating-package-name-in-react-native-3ei3. I was renaming my application from com.company_app to com.mycompany.myapp, apparently, there were some files that I still needed to update but was not included in the guide I was following, I think the guide is only for general, like a fresh react-native app, I solved this by doing a global search for com.company_app and just replacing each one to com.mycompany.myapp whenever it makes sense.
Seems like you have updated your package name in all files but failed to change the name of folder which we will same as your package name.
android < src < main < java < com < "middlen_package_name" <
"last_package_name".
ex: com.yourapp.gameapp;
Run the app again but if it still shows this error then ,
check if there is a folder with old package name. Delete this and rebuild again.
Happy Coding.
Check if you have missed installing the react-native-gesture-handler.
with yarn
yarn add react-native-gesture-handler
or with npm
npm install --save react-native-gesture-handler
Then
react-native link react-native-gesture-handler
I fixed it by following these steps:
Android Version:
From Terminal go to android folder and run this command:
gradlew clean
From main project folder delete this folder:
node_modules
From menu file:
Invalidate caches and restart IDE
Find your MainActivity.java file and add this import line:
import com.facebook.react.BuildConfig;
In terminal, go to android folder and run this:
gradlew
in terminal, go to main root and run this:
yarn install
Now you can start the metro and run the app.
P.S.: Make sure that into the MainActivity.java file the bundleID name is correct. You will find it into the first row. Then, make sure that the MainActivity.java file is located into the correct path like this:
project_name/Android/App/src/main/java/1/2/3/MainActivity.java where 1/2/3 must be the name of your bundleID, for example, com/bundle/id