Text component is not working in a Next.js app

[yoanngueny]

• three version: 0.161.0
• @react-three/fiber version: 8.15.16
• @react-three/drei version: 9.99.0
• node version: 20.9.0
• npm (or yarn) version: 9.8.1

Problem description:

The component creates an error in the console when used inside a Next.js app. The error refers to a worker trying to access a defined window in Troika.

Relevant code:

Here is a simple codesandbox example: https://codesandbox.io/p/sandbox/loving-wave-zc56dc

Suggested solution:

I've tried to investigate the problem. It seems to be related to a Troika dependency named Typr. But the pull request I've suggested doesn't seem to be correct. The owner asked me to invest in Troika or Drei. https://github.com/fredli74/Typr.ts/pull/5

[CodyJasonBennett]

Which Next.js version? We've seen relentless regressions on their side related to the App Router and I can only suggest pinning. 14.0.1 was known to work. We employ integration testing for Next.js, but it isn't preventative for new releases.

I can try a workaround in a moment we've used before with a similar issue.

[yoanngueny]

Yes, I use next 14.1.0

[yoanngueny]

I tried the fix branch but I get this error.

[CodyJasonBennett]

If you want to test out the PR, try:

{
  "dependencies": {
    "@react-three/drei": "https://pkg.csb.dev/pmndrs/drei/commit/47d99046/@react-three/drei"
  }
}

I need to figure out why our integration tests for CRA are failing during Terser minification.

[yoanngueny]

Thanks! I just did it.

But the first window error is still there.

[CodyJasonBennett]

I think you need to take this up with Next.js upstream and/or pin to an earlier version. Something is seriously wrong with bundling as that code shouldn't be evaluated on the server; that's what the PR is supposed to prove or workaround. As I mentioned, 14.0.1 was known to work if you aren't using any features from 14.1. What you could do is put the entire Canvas entrypoint underneath a 'use client' directive or turn off SSR for it via next/dynamic (docs). We have no further agency on our end though.

[github-actions[bot]]

:tada: This issue has been resolved in version 9.99.3 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[paperdiamond]

I am currently using next 14.1.0 w/ the updated v9.99.3 and the issue is persisting. I'm unable to use <Text> without receiving the following error. @CodyJasonBennett . Note: using typescript

[CodyJasonBennett]

Please see my last comment. There is an issue in the Next compiler we can't work around and requires either a previous version or a fix upstream.

[paperdiamond]

I see. Thank you for the quick response!

[ahaded777]

@CodyJasonBennett no effect glass ?

[github-actions[bot]]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!