Preact signals don't work with Next 13 appDir

[XantreDev]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Any enviroment

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://stackblitz.com/edit/nextjs-ayrrca?file=app/layout.js

To Reproduce

Just try to launch and look to the error

Describe the Bug

React signals don't work with next 13 appDir, if there are at least two client side components on the page.

 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useMemo')
    at useMemo (C:\Projects\admin-panel\node_modules\.pnpm\next@13.1.1_23e7ztf2chqi3ri6onem3l5mii\node_modules\next\dist\compiled\react\cjs\react.development.js:1781:21)
    at Object.apply (webpack-internal:///(sc_client)/./node_modules/.pnpm/@preact+signals-react@1.2.2_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs:17:180)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1218:42) 
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1671:53)    
    at Object.toJSON (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1132:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:172:36)      
    at retryTask (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1879:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1917:33)
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1308:40)
    at scheduleWork (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:52:25)
    at pingTask (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1307:29)
    at ping (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1320:40)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useMemo')
    at useMemo (C:\Projects\admin-panel\node_modules\.pnpm\next@13.1.1_23e7ztf2chqi3ri6onem3l5mii\node_modules\next\dist\compiled\react\cjs\react.development.js:1781:21)
    at Object.apply (webpack-internal:///(sc_client)/./node_modules/.pnpm/@preact+signals-react@1.2.2_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs:17:180)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1218:42) 
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1671:53)    
    at Object.toJSON (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1132:40)
    at stringify (<anonymous>)
    at pingTask (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1307:29)
    at ping (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1320:40)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  digest: '900141944'
}
TypeError: Cannot read properties of null (reading 'useMemo')
    at useMemo (C:\Projects\admin-panel\node_modules\.pnpm\next@13.1.1_23e7ztf2chqi3ri6onem3l5mii\node_modules\next\dist\compiled\react\cjs\react.development.js:1781:21)
    at Object.apply (webpack-internal:///(sc_client)/./node_modules/.pnpm/@preact+signals-react@1.2.2_react@18.2.0/node_modules/@preact/signals-react/dist/signals.mjs:17:180)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1218:42) 
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1671:53)    
    at Object.toJSON (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1132:40)
    at stringify (<anonymous>)
    at processModelChunk (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:172:36)      
    at retryTask (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1879:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1917:33)
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1308:40)
    at scheduleWork (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:52:25)
    at pingTask (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1307:29)
    at ping (webpack-internal:///(sc_server)/./node_modules/.pnpm/next@13.1.1_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1320:40)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  digest: '900141944'

Expected Behavior

Preact signals works as usual

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[XantreDev]

preactjs/signals#297

[luanmm]

Nice to see that this error is not ocurring only with me. I just couldn't identify what is going on in my project.

In my case, this is happening when I use async (in page) function (to fetch data using await).

The message indicates that I'm incorrectly using hooks, or there are more versions of React.

One detail in my project is that I'm using Turborepo, so there are more projects that references React and React DOM (always the same ^18 version for both, so it shouldn't happen because of "multiple versions").

Other thing is that I'm using MUI, that, for now, should be used as "client components". But this seems irrelevant, because I tried to use a simple layout (only html/body tags) and it keeps happening.

Unhandled Runtime Error
Error: Cannot read properties of null (reading 'useMemo')

In console, this is what happens:

web:dev: [ReferenceError: document is not defined]
web:dev: Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
web:dev: 1. You might have mismatching versions of React and the renderer (such as React DOM)
web:dev: 2. You might be breaking the Rules of Hooks
web:dev: 3. You might have more than one copy of React in the same app

So, the main problem here is that React is being undefined in runtime, afterall. But I really have no idea how to troubleshoot this.

Thanks in advance for the attention!

[wdcs-kushaltanna]

Facing the same issue. I wish i could use signal with nextjs. Any solution.?

[rexwangcc]

We are in a similar situation now except that we aren't using Preact signals but simply NextJS 13 with vanilla React, what's weird is that neither yarn build && yarn start nor yarn dev gives the error, but the applications we are hosting on Kubernetes cluster within a container throws... anyone has an idea?

[MikeDigitize]

We've encountered this issue experimenting with the latest version of Next 13 and signals as we look to transition from Next 12.

We've done a POC with server and client components, figuring out appropriate component hierarchies for various requirements / scenarios, and the most optimal state management approach.

Using context to provide data globally using primitive values worked fine, then switching out to signals (via context) gave us the exact same error in the first post above. We were following the Preact doc guide to using signals for global state.

The page we were experimenting with loaded when we first started the dev server, but as soon as we made any changes to the code (even unrelated to the signal) we got the mis-use of hooks error, and the properties of null useMemo error, and Next got stuck in an infinite recompile loop in the terminal.

Happy to provide code examples if any use, but we've chalked this up to trying to use two very new technologies that we either dont know well enough yet or have early compatibility issues that will be fixed down the line.

[Billcountry]

Facing the same, looks like I'll need to consider a different state manager

[Cybermage83]

Confirming that i am experiencing the same thing

[Vichp]

Any progress on this ? Thanks

[NitrousBGC]

Facing the same issue ! Hope it gets fixed.

[danielgroen]

🙋 Same here! Running on:
"next": "13.2.4"

[XantreDev]

Signals 1.3.1 repro
https://stackblitz.com/edit/nextjs-e5kuk5?file=app/page.js

[igotfr]

"next": "13.3.0"

'use client'

import { useSignal } from '@preact/signals-react';

export default function Test2(): JSX.Element {
  const count = useSignal(0);

  return <button onClick={() => count.value++}>{count.value}</button>

Error message:

Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
resolveCurrentlyRenderingComponent
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js (7479:11)
Object.useRef
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js (7779:33)
eval
node_modules/@preact/signals-react/dist/signals.mjs (1:686)
Object.set [as current]
node_modules/@preact/signals-react/dist/signals.mjs (1:981)
performWork
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js (9344:34)
<unknown>
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js (9739:12)
scheduleWork
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js (78:3)
startWork
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js (9738:3)
<unknown>
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js (9841:5)
new Promise
<anonymous>
Object.renderToReadableStream
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js (9790:10)
<unknown>
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/server/node-web-streams-helper.js (141:117)
NextTracerImpl.trace
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/server/lib/trace/tracer.js (65:20)
Object.renderToInitialStream
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/server/node-web-streams-helper.js (141:37)
<unknown>
file:///home/notecomm/pnext/tnext2/node_modules/next/dist/server/app-render/app-render.js (923:71)

[med-Haithem]

i think it's not an issue in Next/React but in Preact Signals

facebook/react#26704 (comment)

[FleetAdmiralJakob]

Any updates?