Error: Unable to resolve module, could not be found within the project

Question

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.

If you remove this given library that works? Can you provide more info on that one? Also, make sure you removed yarn.lock file or package-lock.json before reinstalling node_modules. — David Thery, Sep 09 '20 at 13:17
I just copy-pasted the "created Local Library" into the "node_modules" and it worked. I figured out after a long time. Thanks David. However, there is another problem, if you can help, I want to create a react native library which will have a webview and certain parameters must be passed from the react native app, like url and some other data and give the callbacks back to the project. If you know a way to do this. Please let me know. Till now i have made a component and render it in the app. — Aman Verma, Sep 09 '20 at 16:37
This post might answer it (however I'm not sure this is the good place to broach another topic): https://stackoverflow.com/questions/62902660/how-to-pass-value-from-react-native-state-to-webview — David Thery, Sep 09 '20 at 18:38
I have answered to the similar type of question. You can check [here](https://stackoverflow.com/a/72750802/9182995) — Ameer Asif, Jun 25 '22 at 04:48
I have answered to the similar question. You can find [here](https://stackoverflow.com/a/72750802/9182995) — Ameer Asif, Jun 25 '22 at 04:51

score 2 · Answer 1 · answered Sep 08 '22 at 16:44

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

this solution is not working for me – Gopal Feb 18 '23 at 10:38 — Gopal, Feb 18 '23 at 10:38

score 0 · Answer 2 · edited Sep 09 '20 at 13:31

0

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

edited Sep 09 '20 at 13:31

Dharman

30,962
25
85
135

answered Sep 09 '20 at 13:26

DimKa

54
4

score 0 · Answer 3 · answered Feb 17 '22 at 03:22

0

I noticed react-native-webview was not found in node_modules/, so I did npm install react-native-webview. And it was fixed.

answered Feb 17 '22 at 03:22

MikeyE

1,756
1
18
37

score 0 · Answer 4 · edited Nov 15 '22 at 14:52

0

Try this code:

npx react-native link react-native-webview

edited Nov 15 '22 at 14:52

Nick

3,454
6
33
56

answered Nov 15 '22 at 12:07

مصطفى

555
4
9

score -1 · Answer 5 · answered Sep 02 '21 at 14:10

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

copy pasting anything into node_modules is a bad idea, you'll have to manually do it again anytime you clear node_modules manually, not good for CI\CD — conor909, Sep 14 '22 at 16:23

Error: Unable to resolve module, could not be found within the project

5 Answers5