webpack - Monorepo: (NextJS 13 + Typescript) การวิเคราะห์โมดูลล้มเหลว

ฉันกำลังพยายามย้ายแอป Next.js 13 ที่ใช้งานอยู่ในปัจจุบันไปยัง monorepo เดียว โดยพื้นฐานแล้วฉันสร้างรีโปใหม่โดยใช้ npx create-turbo@latest แล้วจากนั้นก็ย้ายรีโปที่มีอยู่ของฉัน (ขอเรียกว่า "frontend") ไปที่โฟลเดอร์ apps/ หลังจากนั้นฉันก็ไปและเพิ่ม dependency 'ui' ใน apps/frontend/package.json:

{
    "name": "frontend",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        ...
        "ui": "*",
    }
    ...
}

และเพิ่มใน next.config.js ตัวเลือกการแปลงโค้ด:

experimental: {
    transpilePackages: ['ui'],
}

จนถึงตอนนี้ทุกอย่างดูดีทุกอย่างดูเหมือนจะทำงานได้ อย่างไรก็ตามหลังจากนี้ฉันย้ายคอมโพเนนต์จากโปรเจกต์ที่มีอยู่ไปที่โฟลเดอร์ UI เพิ่ม dependencies ที่เกี่ยวข้องทั้งหมด และเมื่อฉันรันมันก็ได้รับ:

frontend:dev: error - ../../packages/ui/Button/Button.tsx
frontend:dev: Module parse failed: The keyword 'interface' is reserved (11:0)
frontend:dev: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
frontend:dev: | import classNames from 'classnames';

ฉันกำลังพลาดการตั้งค่าประเภทใดอยู่หรือไม่?

ข้อมูลสิ่งแวดล้อม

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.2
  npm: 8.1.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.0.4
  eslint-config-next: 12.3.4
  react: 18.2.0
  react-dom: 18.2.0

คำตอบ #1

สำหรับใครก็ตามที่เจอปัญหานี้ มันเป็นความผิดของฉันเพราะฉันใช้ npx create-turbo@latest เพื่อสร้าง monorepo เริ่มต้น แต่จากนั้นฉันลืมอัปเกรดโปรเจกต์ที่มีอยู่ของฉันเป็น next13 ทันทีหลังจากย้ายมัน