1

I used create-react-library to create a library that contains both native Android and iOS code. This library is not published and I want to use it in another react native project. So I copied the library into the project and tried to reference using relative path. It looked fine. But when I ran the project, I got the warning: Possible Unhandled Promise Rejection: Error: The package XXX doesn't seem to be linked.

Certainly when the library's function was called, I got the error: The package XXX doesn't seem to be linked. This is the error I saw on Android. I haven't done any linking on iOS and I am sure I will get similar error there.

I also tried to run:

npm install path-to-the-library

but got all kinds of errors. The following are a few of the errors:

npm ERR! code 1
npm ERR! path the-absolute-path-to-the-library
npm ERR! command failed
npm ERR! command sh -c bob build
npm ERR! i Building target commons
...

Then I realized there's a script in the library I created using create-react-native-library:

"prepare": "bob build"

So I tried to run this command, but it spit out some errors due to custom views I created using native component (https://reactnative.dev/docs/native-components-android, https://reactnative.dev/docs/native-components-ios) The native views have some properties that I wanted to be available on the react native component. The error I got is: CustomView cannot be used as JSX component. Its intrinsic type Component<unknown, {} any> & Readonly is not a valid JSX element.

When I was testing on the example project, I saw the same error, but the app built fine and could run. I would like to fix this error, but I could not find any documentation on how to do this in typescript. (BTW, create-react-native-library created the library project with typescript).

Is the second method I tried the correct method? If so, how can I fix the error that typescript requires?

Wei Wen
  • 133
  • 1
  • 9
  • You need to extend the metro.config.js and add use wml cause metro cannot handle sym links. Take a look at his guide https://medium.com/@alielmajdaoui/linking-local-packages-in-react-native-the-right-way-2ac6587dcfa2 – Michael Bahl Oct 04 '22 at 19:31
  • I tested if I can use "npm install local_library_path" by creating a starter library without adding any content to it, and then running "npm run prepare" in the library, then creating the react native app project, then running "npm install local_library_path" inside the react native app project. I was able to successfully add the library in the app project. So I think the issue I had with my real library is the build errors related to "CustomView cannot be used as JSX component". Any help on how to define the prop type for the CustomView to be understandable by typescript is appreciated. – Wei Wen Oct 05 '22 at 13:16
  • Although it appears the library is included successfully, when using the project, I got the error "starter-library could not be found in the project" . So I tried to run "react-native link starter-library", and got the error "Unrecognized command Link". Since "link" is removed in current react-native (0.70.2 is the one I am using), I searched the internet and found "react-native-assets". But people usually used it for adding fonts, and even for fonts, some still complained that it still gave errors. Any help on how to link the library is greatly appreciated. – Wei Wen Oct 05 '22 at 14:22
  • @MichaelBahl Have you tried to link a local library using the method in your link? I tried it, and I still got the error "Unable to resolve module". – Wei Wen Oct 05 '22 at 14:42
  • Yes, I successfully implemented the method I linked to successfully. – Michael Bahl Oct 05 '22 at 15:26
  • @MichaelBahl I found that I need to add watchFolders in metro.config.js to make it work. But that is only for a starter library that I created using create-react-library. For the library that I have added a lot of content, the library didn't get installed in node_modules folder. But if I use "npm install local_lib_path", it can install it in node_modules, but this does not use metro.config.js, so it still does not work. My library does have a couple of typescript type issues that I don't know how to solve. Could that be the reason the library didn't get installed with metro.config.js? – Wei Wen Oct 07 '22 at 14:29
  • @MichaelBahl I was able to include my local library. I found that even after adding resolver and watchFolders in metro.config.js, I still need to run "npm install local_lib_path". Thanks for your link. – Wei Wen Oct 07 '22 at 19:49

0 Answers0