react_1.useState is not a function in NextJS with Typescript

[rama142694]

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

and my folder structure

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

[rama142694]

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]

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]

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:

and here is the implementation on the index page:

[tylermcdonald]

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