Next.js - Attempted import error: 'webgl-sdf-generator' does not contain a default export

[rgbjoy]

• three version: 0.158.1
• react version: 18.2.0
• @react-three/fiber version: 8.15.11
• @react-three/drei version: 9.88.16
• node version: 20.9.0
• yarn version: 1.22.21
• nextjs version: 14.0.3

Relevant code:

Getting this spit at me all of a sudden.

 ⚠ ./node_modules/troika-three-text/dist/troika-three-text.esm.js
Attempted import error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator').

Import trace for requested module:
./node_modules/troika-three-text/dist/troika-three-text.esm.js
./node_modules/@react-three/drei/core/Text.js
./node_modules/@react-three/drei/index.js
./components/background.tsx
./components/siteLayout.tsx

Problem description:

As I'm writing this I found someone just posted vercel/next.js#58557

Maybe a next problem.

[CodyJasonBennett]

Is this also an issue if you lazy load Text or your app with Drei with dynamic or React.lazy?

[kilimanjjjaro]

Hello! I've been having the same issue for a few weeks now, even when I'm not using the Text or Text3d module. In my case, the error pops up when I use the PerformanceMonitor module or certain effects.

Attempted import error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator').

Import trace for requested module:
./node_modules/.pnpm/troika-three-text@0.47.2_three@0.158.0/node_modules/troika-three-text/dist/troika-three-text.esm.js
./node_modules/.pnpm/@react-three+drei@9.88.16_@react-three+fiber@8.15.11_@types+three@0.158.2_react-dom@18.2.0_react@18.2.0_three@0.158.0/node_modules/@react-three/drei/core/Text.js
./node_modules/.pnpm/@react-three+drei@9.88.16_@react-three+fiber@8.15.11_@types+three@0.158.2_react-dom@18.2.0_react@18.2.0_three@0.158.0/node_modules/@react-three/drei/index.js

[CodyJasonBennett]

Thanks, I'll see if there's a way we can work around this issue from our side.

[CodyJasonBennett]

I'm not able to reproduce this on latest using pages. Are you using the app directory? I might need to see an example to confirm that a workaround exists.

[CodyJasonBennett]

I merged #1726 which contains a work-around so you can consume Drei, but let me know if this does/doesn't work when using Text and whether you're using the app directory.

[github-actions]

🎉 This issue has been resolved in version 9.88.17 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[CodyJasonBennett]

See vercel/next.js#58557 (comment), this is an issue with the app directory and will be tracked downstream.

Until then, pin to Next 14.0.1 as per my comment.

[CodyJasonBennett]

This has been fixed downstream in https://github.com/vercel/next.js/releases/tag/v14.0.4-canary.33. See my above comment for how to proceed on stable.