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 <Text> 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 ?