typescript - นำเข้ารหัสที่ใช้ร่วมกันในแอป Next.js ใน monorepo

ฉันต้องการใช้ประโยชน์จาก monorepo โดยการนำประเภท, DTOs และสิ่งอื่น ๆ ของแอปแบบ isomorphic จากบริการ backend (Nest.js) มาใช้ซ้ำภายใน mono repo เดียวกัน ในกรณีของฉัน แอป next.js และแอป nest.js (ซึ่งเป็น nest.js monorepo ของตัวเอง) อยู่ในระดับเดียวกันในไดเรกทอรี root ฉันกำลังทำการ re-export ไฟล์จำนวนมากใน nest-app/libs/types/src/index.ts แล้วนำไป import ในแอป next.js ของฉัน แต่เมื่อฉันทำแบบนั้น next.js จะแจ้งข้อผิดพลาด Failed to compile

วิธีที่ง่ายที่สุดในการทำให้เกิดข้อผิดพลาดคือทำดังต่อไปนี้

สร้างโฟลเดอร์ใดก็ได้สำหรับมอนอรีโป เช่น test-import
ไปที่โฟลเดอร์มอนอรีโป (cd test-import)
รัน npx create-next-app@latest --typescript และเลือกชื่อสำหรับโปรเจกต์ (เช่น next-app)
สร้างไฟล์ external.ts ด้านล่างนี้ในโฟลเดอร์รากของ monorepo (ในระดับเดียวกับ next-app)
รัน npm run dev จากโฟลเดอร์ next-app

โครงสร้างมอโนเรโป:

external.ts
next-app
  (other files omitted)
  pages
    index.tsx

external.ts

export type ExternalType = string;

export const me = "ME";

next-app/pages/index.tsx กำลังนำเข้าคอนเทนต์ของ external.ts

import { me } from "../../external";

// boilerplate code omitted
<h1 className={styles.title}>
  Welcome {me} to <a href="https://nextjs.org">Next.js!</a>
</h1>

เกิดข้อผิดพลาดดังต่อไปนี้:

../external.ts
Module parse failed: Unexpected token (1:7)
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
> export type ExternalType = string;
| 
| export const me = "ME";

คำตอบ #1

คุณจำเป็นต้องใช้ฟีเจอร์ externalDir แบบทดลอง: https://github.com/vercel/next.js/pull/22867.

// next.config.js
const nextConfig = {
  ...
  experimental: {
    externalDir: true
  }
}

ฉันได้ตรวจสอบแล้วว่ามันใช้งานได้อย่างน้อยในกรณีที่คุณอธิบาย

กล่าวเช่นนี้ เราก็มี monorepo ของ Nest+Next เช่นกัน — แม้ว่าในกรณีของเรารหัสที่ใช้ร่วมกันจะอยู่นอกทั้ง Next และ Nest — และเพื่อให้มันทำงานได้เราจำเป็นต้องใช้การสร้างลิงก์สัญลักษณ์ (ln -s) ของรหัสที่ใช้ร่วมกันเข้าไปในโฟลเดอร์ Nest หากคุณเคยตัดสินใจที่จะมีโฟลเดอร์ที่มีรหัสที่ใช้ร่วมกันซึ่งอยู่นอกทั้ง Next และ Nest คุณอาจต้องลองวิธีนี้เช่นกัน

ถ้าจำไม่ผิดมีวิธีให้มันทำงานได้โดยไม่ต้องใช้ symlink แต่สำหรับวิธีนั้น Nest ต้องจัดการทั้ง monorepo รวมถึง subprojects ที่ไม่ใช่ Nest ด้วย

typescript - นำเข้ารหัสที่ใช้ร่วมกันในแอป Next.js ใน monorepo

คำตอบ #1

บทความที่เกี่ยวข้อง