{"id":24333157,"url":"https://github.com/chrisweb/nextjs_three-fiber_reproduction","last_synced_at":"2025-09-27T20:31:19.093Z","repository":{"id":259051986,"uuid":"876202855","full_name":"chrisweb/nextjs_three-fiber_reproduction","owner":"chrisweb","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-19T16:54:56.000Z","size":796,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T02:05:39.683Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-21T15:10:28.000Z","updated_at":"2025-01-07T16:53:29.000Z","dependencies_parsed_at":"2024-11-20T06:01:36.433Z","dependency_job_id":null,"html_url":"https://github.com/chrisweb/nextjs_three-fiber_reproduction","commit_stats":null,"previous_names":["chrisweb/nextjs_three-fiber_reproduction"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Fnextjs_three-fiber_reproduction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Fnextjs_three-fiber_reproduction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Fnextjs_three-fiber_reproduction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisweb%2Fnextjs_three-fiber_reproduction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisweb","download_url":"https://codeload.github.com/chrisweb/nextjs_three-fiber_reproduction/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234455954,"owners_count":18835667,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-18T03:13:27.835Z","updated_at":"2025-09-27T20:31:13.739Z","avatar_url":"https://github.com/chrisweb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next.js react three fiber prototype\n\n## Update Nov. 4 2024: \n\n* fixed missing dependency in package.json\n* updated **@react-three/fiber** to version [9.0.0-rc.0](https://github.com/pmndrs/react-three-fiber/issues/2338#issuecomment-2453589271)\n\nNote to self: [related R3F v9 issue](https://github.com/pmndrs/react-three-fiber/issues/2338) (the v9 roadmap)\n\n## Dependencies overview\n\nversion of the main packages involved:\n\n@react-three/fiber: 9.0.0-rc.1\n@react-three/postprocessing: 2.16.3\nnext: 15.0.4-canary.19\nreact \u0026 react-dom: 19.0.0-rc-380f5d67-20241113\n\nfor more check out the [package.json](./package.json)\n\n## Effectcomposer error\n\ninstall the dependencies use: `npm i`\n\nthen to start the next.js dev server use the following command: `npm run dev`\n\nnext open this URL in your browser: `http://localhost:3000/v9_effectcomposer_error`\n\nyou should see the following message in the browser console:\n\n\u003e TypeError: Cannot read properties of undefined (reading 'length')\n\n\u003cdetails\u003e\n\u003csummary\u003eopen to see the full error stack\u003c/summary\u003e\n\n```shell\nat eval (webpack-internal:///(app-pages-browser)/./node_modules/@react-three/postprocessing/dist/EffectComposer.js:92:41)\nat commitHookEffectListMount (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:14992:39)\nat commitHookLayoutEffects (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:15081:21)\nat commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:15246:29)\nat runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:829:28)\nat recursivelyTraverseLayoutEffects (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:16564:25)\nat commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:15378:25)\nat runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:829:28)\nat recursivelyTraverseLayoutEffects (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:16564:25)\nat commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:15358:37)\nat runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:829:28)\nat recursivelyTraverseLayoutEffects (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:16564:25)\nat commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:15329:25)\nat runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/react-reconciler/cjs/react-reconciler.development.js:829:28)\n(...)\n```\n\n\u003c/details\u003e\n\nThe error is in /node_modules/@react-three/postprocessing/dist/EffectComposer.js at line 81:\n\n```js\nfor (let i = 0; i \u003c children2.length; i++) {\n```\n\nwhich corresponds to line 139 https://github.com/pmndrs/react-postprocessing/blob/master/src/EffectComposer.tsx#L139 in the typescript source file\n\nBut only react and react three fiber are the packages that got updated, postprocessing is still the stable version, so I assume the error is due to a change somewhere inside of @react-three/fiber\n\nThe ticket for this problem: [react-postprocessing issue #301](https://github.com/pmndrs/react-postprocessing/issues/301)\nThere is now a PR in the works: [PR #302](https://github.com/pmndrs/react-postprocessing/pull/302)\n\n### no problem in v8\n\nthe same test page when using the latest stable versions instead has no error(s):\n\n@react-three/fiber: 8.17.10\n@react-three/postprocessing: 2.16.3\nnext: 14.2.15\nreact: 18.3.1\nreact-dom: 18.3.1\n\nto do the same test using R3F v8 and React 18, you can rename the package.json to v9_package.json and then rename the v8_package.json to package.json and do a new installation using `npm i --force`\n\nIf you prefer to do it manually, first downgrade **eslint** to version **8.57.1**, then change the version based on the list above, and finally you can remove the two **overrides** block from the package.json, then install everything using `npm i --force`\n\nthen you need to rename the next.config.ts file to a next.config.mjs file and remove the type so that it ends up having this content:\n\n```js\nconst nextConfig = {\n  /* config options here */\n};\n\nexport default nextConfig;\n```\n\n## leva error\n\ninstall the dependencies use: `npm i`\n\nIf you use r3f v9 **beta 1**, then you also need to fix the R3F **types** manually, as there the `/node_modules/@react-three/fiber/dist/declarations` directory missing in the latest **9.0.0-beta.1** release, you can solve it by installing the [9.0.0-beta.0](https://www.npmjs.com/package/@react-three/fiber/v/9.0.0-beta.0) in a separate directory, and then copy the declarations directory over to your v9 beta 1 directory\n\nthen to start the next.js dev server use the following command: `npm run dev`\n\nnext open this URL in your browser: `http://localhost:3000/v9_leva_error`\n\nyou should see the following message in the browser console:\n\n\u003e TypeError: react_dom__WEBPACK_IMPORTED_MODULE_0__.render is not a function\n\n\u003cdetails\u003e\n\u003csummary\u003eopen to see the full error stack\u003c/summary\u003e\n\n```shell\nat render (webpack-internal:///(app-pages-browser)/./node_modules/leva/dist/vector-plugin-6f82aee9.esm.js:556:42)\nat eval (webpack-internal:///(app-pages-browser)/./node_modules/leva/dist/leva.esm.js:2202:77)\nat react-stack-bottom-frame (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:22407:20)\nat runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:540:16)\nat commitHookEffectListMount (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:10727:29)\nat commitHookPassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:10847:11)\nat reconnectPassiveEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12766:11)\nat recursivelyTraverseReconnectPassiveEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12738:9)\nat commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12695:17)\nat recursivelyTraversePassiveMountEffects (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12591:11)\nat commitPassiveMountOnFiber (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:12719:11)\n(...)\n```\n\n\u003c/details\u003e\n\nThe error is in the vector-plugin file (in the render function):\n\n```js\nReactDOM.render(element, container);\n```\n\nEDIT: I added the [`\u003cLeva /\u003e` component](https://github.com/pmndrs/leva/blob/main/docs/configuration.md) (based on [this suggestion](https://github.com/pmndrs/leva/issues/521#issuecomment-2465654716)), but it made no difference\n\nI found the source for this example is the [react-postprocessing documentation for hue/sat](https://react-postprocessing.docs.pmnd.rs/effects/hue-saturation), and the original code is in their [codesandbox example](https://codesandbox.io/p/sandbox/m9min)\n\nThe ticket for this problem: [leva issue #521](https://github.com/pmndrs/leva/issues/521)\n\n## Suspense problem\n\ninstall the dependencies use: `npm i`\n\nthen to start the next.js dev server use the following command: `npm run dev`\n\nI added a page (`http://localhost:3000/suspense_or_no_suspense`) that leads to 4 examples:\n\n* a first R3F Canvas is in a Next.js page on its own and everything works\n* the second example is a copy of the first but I added a React Suspense component around the R3F canvas, now when I visit the page (Next.js client navigation) by clicking on the link then the example works fine, however if I reload the page than I get a message in the console saying \"THREE.WebGLRenderer: Context Lost.\"\n* the third example uses the same canvas again but instead of having a Suspense outside I moved the Suspense inside of the canvas, the example has no errors\n* the fourth example again uses the same canvas, this time there is a Suspense inside and outside of the canvas and again this example works (even after reloading the page, which is where the second example failed)\n\nSo the only example that does not work is the second with one Suspense outside of the canvas and only when reloading the page\n\nAs of now I have not opened a ticket as I'm not sure what dependency causes the problem, I assume it is either nextjs 15 or three fiber 9 rc 0 or react 19\n\n## steps (that got used to create this project):\n\ncommand to use create next app:\n\n`npx create-next-app@canary ./ --use-npm --typescript`\n\nadd the react three fiber (R3F) package:\n\nWhen attempting to install R3F, npm could not resolve the dependency and was somehow stuck in a look attempting to do solve the problem:\n\n```shell\nnpm warn Could not resolve dependency:\nnpm warn peer react@\"\u003e=19.0\" from @react-three/fiber@9.0.0-beta.1\nnpm warn node_modules/@react-three/fiber\nnpm warn   @react-three/fiber@\"9.0.0-beta.1\" from the root project\nnpm warn ERESOLVE overriding peer dependency\nnpm warn While resolving: @react-three/fiber@9.0.0-beta.1\nnpm warn Found: react@undefined\nnpm warn node_modules/react\nnpm warn   react@\"19.0.0-rc-77b637d6-20241016\" from the root project\n```\n\nThis is why I used the `--force` flag as there are resolve issues as I use the canary version of react and react dom (same version that next.js canary uses)\n\nI however, still had dependency resolution errors, so I added the following overrides to the **package.json**:\n\n```json\n    \"overrides\": {\n        \"react\": \"19.0.0-rc-77b637d6-20241016\",\n        \"react-dom\": \"19.0.0-rc-77b637d6-20241016\"\n    }\n```\n\nI then used this command to install the R3F package:\n\n`npm i @react-three/fiber@9.0.0-beta.1 --save-exact --force`\n\nIf you use r3f v9 **beta 1**, then you also need to fix the R3F **types** manually, as there the `/node_modules/@react-three/fiber/dist/declarations` directory missing in the latest **9.0.0-beta.1** release, you can solve it by installing the [9.0.0-beta.0](https://www.npmjs.com/package/@react-three/fiber/v/9.0.0-beta.0) in a separate directory, and then copy the declarations directory over to your v9 beta 1 directory\n\nthen I added three.js:\n\n```shell\nnpm i three@latest --save-exact --force\nnpm i @types/three@latest --save-exact --save-dev --force\n```\n\nand finally I added react three postprocessing:\n\n`npm i @react-three/postprocessing@latest postprocessing@latest --save-exact --force`\n\nand for the second error example we add leva:\n\n`npm i leva@latest --save-exact --force`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisweb%2Fnextjs_three-fiber_reproduction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisweb%2Fnextjs_three-fiber_reproduction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisweb%2Fnextjs_three-fiber_reproduction/lists"}