How to run react native custom library inside react native project without publishing to npm? Local setup steps are not working.

[archana-iron]

Description

I have followed all the steps to create a native custom library using 'create-react-native-library' but its example app is not running. To check this locally I have created a new React-native app and then followed local library setup to check package changes. But getting the following errors when implemented local library setup:
error: Error: Unable to resolve module react/jsx-runtime from /Users/archanasharma/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js: react/jsx-runtime could not be found within the project or in these directories:
node_modules/react-native/node_modules
node_modules

1 | /**
| ^
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the
at ModuleResolver.resolveDependency (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
at DependencyGraph.resolveDependency (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
at /Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/lib/transformHelpers.js:156:21
at resolveDependencies (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
at visit (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
at async Promise.all (index 2)
at async visit (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 1)
at async visit (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 0)

And to do this I have followed the following steps:

1. created react native library using 'create-react-native-library' command
2. after this complete library build I run : 'npm link'
3. created new react native app
4. npm install inside app
5. start run on android : its running and working
6. npm link my-library
7. added this inside dependencies of my react native app::
   "my-library": "file:../myLibrary"
8. npm install
9. npm start : then "a" for android
10. Then I am getting this error. Also sometimes I get that can't resolve import{...} from 'my-library'

Please suggest the accurate custom library building steps using npm and how to link locally.

Steps to reproduce

1. created react native library using 'create-react-native-library' command
2. after this complete library build I run : 'npm link'
3. created new react native app
4. npm install inside app
5. start run on android : its running and working
6. npm link my-library
7. added this inside dependencies of my react native app::
   "my-library": "file:../myLibrary"
8. npm install
9. npm start : then "a" for android
10. Then I am getting this error. Also sometimes I get that can't resolve import{...} from 'my-library'

React Native Version

0.74.1

Affected Platforms

Runtime - Android, Runtime - iOS, Build - MacOS

Output of npx react-native info

System:
  OS: macOS 13.0
  CPU: (10) arm64 Apple M1 Max
  Memory: 89.13 MB / 32.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 21.7.3
    path: /opt/homebrew/bin/node
  Yarn:
    version: 3.6.4
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.5.0
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.04.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.2
      - iOS 16.2
      - macOS 13.1
      - tvOS 16.1
      - watchOS 9.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11668458
  Xcode:
    version: 14.2/14C18
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/archanasharma/.rvm/rubies/ruby-2.7.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

error: Error: Unable to resolve module react/jsx-runtime from /Users/archanasharma/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js: react/jsx-runtime could not be found within the project or in these directories:
  node_modules/react-native/node_modules
  node_modules
> 1 | /**
    | ^
  2 |  * Copyright (c) Meta Platforms, Inc. and affiliates.
  3 |  *
  4 |  * This source code is licensed under the MIT license found in the
    at ModuleResolver.resolveDependency (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at async Promise.all (index 2)
    at async visit (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 1)
    at async visit (/Users/myuser/Documents/Workspace/reactjs/MyApps-Apps/package-practice/rnTest/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 0)

Reproducer

test

Screenshots and Videos

not having right now

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[cortinico]

Hi,
Thanks for reporting this issue.

It seems like this issue is actually unrelated to React Native core. Please open this issue against this other repository:

https://github.com/callstack/react-native-builder-bob/issues

I'll be closing this but feel free to reopen if the other repo points back to us as a issue in the core of React Native.

[archana-iron]

But how can we resolve this? You are also suggesting to create a custom library using 'create-react-native-library' and it is using'react-native-builder-bob' under the hood.Is there any other way to create custom library without using this package for compiled code?