javascript - วิธีนำเข้าไลบรารี/โมดูล/ที่ไม่ใช่คอมโพเนนต์แบบไดนามิกใน next.js

ฉันได้ใช้งาน Next.js และรู้วิธีใช้การ import แบบไดนามิกของมันสำหรับการนำเข้าคอมโพเนนต์ (ทั้งแบบมีชื่อและแบบ export) แต่เมื่อเร็วๆ นี้ฉันเจอแพ็กเกจ npm บางตัวที่ทำงานบนเบราว์เซอร์เท่านั้น (ฝั่งไคลเอนต์ ต้องใช้ window) และมีขนาดค่อนข้างใหญ่ (100kb)

ฉันมีปัญหาในการนำเข้าพวกมันแบบไดนามิกภายในแอปของฉัน

นี่คือสิ่งที่ฉันได้รับเป็นข้อผิดพลาดขณะนำเข้าชุดแพ็กเกจดังกล่าว (ซึ่งเป็นแพ็กเกจที่ไม่ใช่คอมโพเนนต์)

import dynamic from 'next/dynamic';
const packageDynamic = dynamic(() => import('npm-package'), {
  ssr: false,
});

... Errors:
Types of property 'default' are incompatible.
Type [package] is not assignable to type 'ComponentType<{}>'.

มีใครทำสิ่งนี้มาก่อนหรือไม่?

คำตอบ #1

ตามเอกสารของ Next.js:

Next.js รองรับการโหลดแบบเลทของ ไลบรารีภายนอกด้วย import() และคอมโพเนนต์ React ด้วย next/dynamic

dynamic ถูกสงวนไว้สำหรับคอมโพเนนต์ของ React

คุณสามารถใช้คำสั่ง import แทนเพื่อทำการ import โค้ด "ที่ไม่ใช่คอมโพเนนต์" ของคุณแบบไดนามิก:

const packageDynamic = (await import('npm-package')).default;