search

jeffreylanters / react-unity-webgl

React Unity WebGL provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React.
https://react-unity-webgl.dev
Apache License 2.0
1.7k stars 160 forks source link

react_1.useState is not a function in NextJS with Typescript #508

Open rama142694 opened 1 year ago

rama142694 commented 1 year ago

hey! im using nextjs with typescript and im having this problem image i try to re make the project like in this another issue but it doesnt work. Here is my code image

and my folder structure image

image

Originally posted by @rama142694 in https://github.com/jeffreylanters/react-unity-webgl/discussions/488#discussioncomment-5956240

rama142694 commented 1 year ago

trying several times i achieve to know a little bit more of where the problem is and it has something to do with the next js new app folder for routing. With the pages folder it works correct

aditya-torinit commented 1 year ago

trying several times i achieve to know a little bit more of where the problem is and it has something to do with the next js new app folder for routing. With the pages folder it works correct

Do you have an example of how you implemented this in nextJs with pages structure

I am getting following error for the same

TypeError: (0 , react_unity_webgl__WEBPACK_IMPORTED_MODULE_2__.useUnityContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.
rama142694 commented 1 year ago

trying several times i achieve to know a little bit more of where the problem is and it has something to do with the next js new app folder for routing. With the pages folder it works correct

Do you have an example of how you implemented this in nextJs with pages structure

I am getting following error for the same

TypeError: (0 , react_unity_webgl__WEBPACK_IMPORTED_MODULE_2__.useUnityContext) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Yes, here is the folder structure: image

and here is the implementation on the index page: image

tylermcdonald commented 1 year ago

Hey, I got this same issue. I believe it has to do with "By default, components inside app are React Server Components." which is a new part of NextJS 13. I was able to fix it by converting the component which included my Unity component to a client component by adding the 'use client' directive at the top of the file. https://nextjs.org/docs/getting-started/react-essentials#client-components