Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

I can't use a symlinked package

Open
  • Is something wrong?
#1,029 8 comments 1 reaction 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
48/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Active
Tech stack
javascript, react-native
Domain
build-system, tooling

Research direction

Reproduce the setup using the listed npm, React Native, and Lerna commands, then inspect the package entry at packages/package1/package.js and its import from App.tsx. Trace how the symlinked package is resolved by the Metro-based React Native app; done means the package can be imported and CustomButton renders without the reported failure.

Written by the indexing model from the issue text.

Description

Needs: Triage :mag:
Description

Hello everyone, after the new update of react native with version 0.72, and support for Symlink, I wanted to create a small project to test these features, but when importing a package created with lerna for a monorepo, I can't import it and use it correctly.

React Native Version

0.72.1

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: Linux 5.19 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
Memory: 5.50 GB / 15.54 GB
Shell:
version: 5.1.16
path: /bin/bash
Binaries:
Node:
version: 18.16.1
path: ~/.nvm/versions/node/v18.16.1/bin/node
Yarn:
version: 1.22.19
path: /home/linuxbrew/.linuxbrew/bin/yarn
npm:
version: 9.5.1
path: ~/.nvm/versions/node/v18.16.1/bin/npm
Watchman:
version: 2022.06.20.00
path: /home/linuxbrew/.linuxbrew/bin/watchman
SDKs:
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Languages:
Java:
version: 11.0.19
path: /usr/bin/javac
Ruby:
version: 3.0.2
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.1
wanted: 0.72.1
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Steps to reproduce

First I create an empty folder
mkdir monorepo && cd monorepo

I create a react native app
npx react-native@latest init AwesomeProject

I start lerna
lerna init

I create new package with lerna
lerna create package1

I modify packages/package1/package.js with this code:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

export const CustomButton = ({ onPress, title }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
};

I run react native in RN project (still without adding the lerna package)

/monorepo/AwesomeProject$ npm start
/monorepo/AwesomeProject$ npm run android
  • The project runs correctly

I install my lerna package
/monorepo/AwesomeProject$ npm install ../packages/package1

I check that it has been installed in package.json

  "dependencies": {
    "package1": "file:../packages/package1",
    "react": "18.2.0",
    "react-native": "0.72.1"
  },

I go to App.tsx and import the package:
import {CustomButton} from 'package1';

And I use it:

  <View>
    <CustomButton
      title="Press me!"
      onPress={() => console.log('Hello!')}
    />
  </View>
Snack, code example, screenshot, or link to a repository

App.spx full code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {CustomButton} from 'package1';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <View>
            <CustomButton
              title="Press me!"
              onPress={() => console.log('Hello!')}
            />
          </View>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

Screen error:

Screenshot_1688972880

Dominant language
JavaScript
Stars
5.6k
Forks
699
Avg merge
3d 2h
Merged PRs (30d)
44

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react/metro

All issues in react/metro

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.