Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

I can't use a symlinked package

Đang mở
  • Có gì không ổn?
#1,029 8 bình luận 1 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Lỗi
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Sôi nổi
Công nghệ
javascript, react-native
Lĩnh vực
build-system, tooling

Hướng nghiên cứu

Tái hiện thiết lập bằng các lệnh npm, React Native và Lerna được liệt kê, sau đó kiểm tra entry của package tại packages/package1/package.js và phần import của nó từ App.tsx. Theo dõi cách ứng dụng React Native dựa trên Metro phân giải package được liên kết bằng symlink; được xem là hoàn tất khi có thể import package và CustomButton được render mà không gặp lỗi đã nêu.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
JavaScript
Star
5.6k
Fork
699
Merge trung bình
3 ngày 2 giờ
Pull request đã merge (30 ngày)
44

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react/metro

Tất cả issue của react/metro

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.