reactjs - วิธีตั้งค่า create-react-app กับแพ็กเกจในโฟลเดอร์ src ในขณะที่ใช้ TypeScript?

ฉันใช้ TypeScript ในโปรเจกต์ create-react-app ของฉันและใช้แพ็กเกจส่วนตัวภายในเครื่อง แพ็กเกจเหล่านี้ถูกออกแบบมาเพื่อแชร์ระหว่างแอปหลายตัวและมีคลังเก็บของตัวเอง ฉันต้องการให้แพ็กเกจภายในเครื่องของฉันอยู่ในโฟลเดอร์ src/packages

นี่คือโครงสร้างโฟลเดอร์ปัจจุบันของฉัน:

--create-react-app (root)
  --node_modules
  --package.json
  --src
    --App.tsx
    --index.tsx
    --packages
      --my-package (sub-repository)
        --ModuleA.ts
        --node_modules
        --package.json

my-package ถูกติดตั้งเป็นแบบโลคัลดังนี้:

// package.json
"dependencies": {
  "my-package": "file:src/packages/my-package"
}

ด้วยวิธีนี้ฉันสามารถนำเข้ามอดูลจาก my-package แบบนี้ได้:

// src/App.tsx
import ModuleA from 'my-package/ModuleA'

อย่างไรก็ตามเกิดข้อผิดพลาดในการคอมไพล์เมื่อ ModuleA นำเข้าชุดแพ็กเกจจาก node_modules ของตัวเอง:

// src/packages/my-package/package.json
"dependencies": {
  "moment": "^2.27.0"
}

// src/packages/my-package/ModuleA.ts
import moment from 'moment'

ข้อผิดพลาดในการคอมไพล์:

> npm run start
Failed to compile.

./src/packages/my-package/node_modules/moment/moment.js
  Line 9:37:  'define' is not defined  no-undef
  Line 9:50:  'define' is not defined  no-undef

Search for the keywords to learn more about each error.

ฉันคิดว่าข้อผิดพลาดเกิดจาก ESLint เพราะมันตรวจสอบ node_modules ของ my-package

ฉันไม่ต้องการ npm run eject ฉันก็ไม่ต้องการเผยแพร่แพ็กเกจของฉันทั้งแบบส่วนตัวหรือสาธารณะ ฉันต้องการที่จะสามารถแก้ไขซอร์สโค้ดของ my-package และเห็นการเปลี่ยนแปลงแบบเรียลไทม์เมื่อแอปของฉันกำลังทำงาน

มีวิธีที่จะทำให้มันทำงานแบบนี้ได้ไหมครับ/ค่ะ?

ขอบคุณสำหรับความช่วยเหลือของคุณ

คำตอบ #1

ฉันเพิ่งค้นพบสิ่งนี้ในปี 2022 เพราะฉันต้องการทำสิ่งเดียวกัน ฉันลองทำแล้วและตอนนี้มันใช้งานได้ดีโดยใช้ create-react-app ([email ) ESLint ไม่บ่นเกี่ยวกับไฟล์ในโฟลเดอร์ node_modules ที่ซ้อนอยู่ใน src.

คำตอบ #2

ลองใช้การนำเข้าแบบสมบูรณ์ โดยทั่วไปแล้ว การใช้การนำเข้าแบบสมบูรณ์ถือเป็นนิสัยที่ดีในการแก้ปัญหาการนำเข้าที่ซ้อนกัน

ในไฟล์ tsconfig.json ที่อยู่ในโฟลเดอร์รากของโครงการของคุณ ให้เพิ่มโค้ดดังต่อไปนี้:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

เอกสารอ้างอิง: https://create-react-app.dev/docs/importing-a-component/