Support for Next.js 16+

[huydhoang]

I was trying out r3f-perf in Next.js v16+ and the following error crashed the scene. It looks like a conflict with how Next.js builds it, likely with turbopack. I haven't tried migrating back to webpack as I imagine it'd be quite tedious to do and not recommended by Vercel.

Would you please take a look into this?

 ⨯ ./node_modules/.pnpm/[email protected]_@react-three_98d2fe6eb7880fc063f706a6026a3007/node_modules/r3f-perf/dist/roboto.woff.mjs
Code generation for chunk item errored
An error occurred while generating the chunk item [project]/node_modules/.pnpm/[email protected]_@react-three_98d2fe6eb7880fc063f706a6026a3007/node_modules/r3f-perf/dist/roboto.woff.mjs [app-client] (ecmascript)

Caused by:
- failed to convert rope into string
- invalid utf-8 sequence of 1 bytes from index 11

Debug info:
- An error occurred while generating the chunk item [project]/node_modules/.pnpm/[email protected]_@react-three_98d2fe6eb7880fc063f706a6026a3007/node_modules/r3f-perf/dist/roboto.woff.mjs [app-client] (ecmascript)
- Execution of <ModuleChunkItem as EcmascriptChunkItem>::content_with_async_module_info failed
- Execution of *EcmascriptChunkItemContent::new failed
- Execution of EcmascriptModuleContent::new failed
- Execution of <SourceMapReference as GenerateSourceMap>::generate_source_map failed
- failed to convert rope into string
- invalid utf-8 sequence of 1 bytes from index 11

Import trace:
  Client Component Browser:
    ./node_modules/.pnpm/[email protected]_@react-three_98d2fe6eb7880fc063f706a6026a3007/node_modules/r3f-perf/dist/roboto.woff.mjs [Client Component Browser]
    ./node_modules/.pnpm/[email protected]_@react-three_98d2fe6eb7880fc063f706a6026a3007/node_modules/r3f-perf/dist/components/TextsHighHZ.mjs [Client Component Browser]
    ./node_modules/.pnpm/[email protected]_@react-three_98d2fe6eb7880fc063f706a6026a3007/node_modules/r3f-perf/dist/components/Graph.mjs [Client Component Browser]
    ./node_modules/.pnpm/[email protected]_@react-three_98d2fe6eb7880fc063f706a6026a3007/node_modules/r3f-perf/dist/components/Perf.mjs [Client Component Browser]
    ./node_modules/.pnpm/[email protected]_@react-three_98d2fe6eb7880fc063f706a6026a3007/node_modules/r3f-perf/dist/index.mjs [Client Component Browser]
    ./src/components/R3FScene.tsx [Client Component Browser]
    ./src/app/game/page.tsx [Client Component Browser]
    ./src/app/game/page.tsx [Server Component]

[vi-hieu]

I'm having the same problem, for now I just use <PerfHeadless /> with usePerf hook to create a custom UI and it works fine.

[woodward54]

+1

[suiramdev]

+1