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

[dincerpece]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.17.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.1
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which example does this report relate to?

there is no

What browser are you using? (if relevant)

Chrome 119.0.6045.160

How are you deploying your application? (if relevant)

localhost

Describe the Bug

There was no problem with my @react-three/fiber package. While the Next 14.0.1 version worked very smoothly, I started to receive warnings in the next 14.0.2, 14.0.3 and canary versions. I updated all relevant packages but the problem persists. The packages and versions that may be relevant are as follows:

@react-three/fiber: 8.15.11
@react-three/drei: 9.88.16
three: 0.158.0

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

Expected Behavior

I expect it to work without warning, just like it did in Next 14.0.1.

To Reproduce

I updated the relevant packages and their next versions, but the result is the same. I get the same warning in both development and production mode.

[rgbjoy]

Yes I'm getting the exact same thing too. Thanks for making feel less crazy.

[hmellahi]

hey @dincerpece, I've encountered the same issue. Have you found a solution? If so, could you please share it?

[emnul]

I'm also encountering this issue

[DevaPandiyan]

i also facing same issue.....

[mkermani144]

Seems an issue in newer next versions. 14.0.0 works but 14.0.3 crashes.

[Redowan-Ahmed]

I'm also facing the same issue in NextJst 14.0.3

[CodyJasonBennett]

I merged pmndrs/drei#1726 in Drei 9.88.17 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.

WRT to Next and possibly a compiler regression, the specific syntax used in webgl-sdf-generator is export { SDFGenerator as default };, but it's unclear whether it's resolving as ESM to begin with via non-standard module or its default UMD target from main.

[4lejandrito]

I merged pmndrs/drei#1726 in Drei 9.88.17 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.

WRT to Next and possibly a compiler regression, the specific syntax used in webgl-sdf-generator is export { SDFGenerator as default };, but it's unclear whether it's resolving as ESM to begin with via non-standard module or its default UMD target from main.

The Issue still occurs with "@react-three/drei": "9.88.17".

[emnul]

I merged pmndrs/drei#1726 in Drei 9.88.17 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.

This warning still persists for me. I'm only importing the OrbitControls component in my case. I tested using the Text component and nothing seems to break, but the warning is still there. Lmk if there's anything I can do to help. Relatively new to Next and Three, but I can probably figure something out if pointed in the right direction.

[gonghaibo]

As long as cavas is used it will exist.

[CodyJasonBennett]

If someone could share an example or repository, that would help us track this down.

[dincerpece]

Hi, @CodyJasonBennett

If someone could share an example or repository, that would help us track this down.

I simply prepared a repository, hope it helps: https://codesandbox.io/p/sandbox/nextjs-three-fb-1-csr869

[CodyJasonBennett]

Unfortunately, that affirms that there is no way for us to work around this in Drei and that it's an issue with the app directory. We've received a host of issues from its compiler all over the three.js ecosystem since the adoption of SWC. You'll have to pin to Next 14.0.1 or earlier until a fix becomes available.

{
  "dependencies": {
    "next": "14.0.1"
  }
}

[dincerpece]

Unfortunately, that affirms that there is no way for us to work around this in Drei and that it's an issue with the app directory. We've received a host of issues from its compiler all over the three.js ecosystem since the adoption of SWC. You'll have to pin to Next 14.0.1 or earlier until a fix becomes available.

{
  "dependencies": {
    "next": "14.0.1"
  }
}

As I mentioned in my description, while there is no problem in 14.0.1, this warning occurs in later versions and canaries.

[github-actions]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the please add a complete reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository (template for App Router, template for Pages Router), but you can also use these templates: CodeSandbox: App Router or CodeSandbox: Pages Router.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Next.js (next@canary) to make sure your issue has not already been fixed.

If you cannot create a clean reproduction, another way you can help the maintainers' job is to pinpoint the canary version of next that introduced the issue. Check out our releases, and try to find the first canary release that introduced the issue. This will help us narrow down the scope of the issue, and possibly point to the PR/code change that introduced it. You can install a specific version of next by running npm install next@<version>.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

What happens if I don't provide a sufficient minimal reproduction?

Issues with the please add a complete reproduction label that receives no meaningful activity (e.g. new comments with a reproduction link) are automatically closed and locked after 30 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the 👍 reaction on the topmost comment (please do not comment "I have the same issue" without reproduction steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren't you looking into it quicker?

We look into every Next.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two due to the popularity/high traffic of the repository. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to Contribute to Open Source (Next.js)
• How to create a Minimal, Complete, and Verifiable example
• Reporting a Next.js bug
• Next.js Triaging issues

[jakst]

Same issue for the @pathfinder-ide/react package. I created a separate issue here #58831 with a minimal reproduction attached.

[leerob]

Going to combine with #58831 since there's a reproduction 🙏

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.