next.js: Preact signals don't work with Next 13 appDir
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
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 29
- Comments: 54 (1 by maintainers)
I created a library that allows you to use Signals within React (and Next.js) safely: signals-react-safe
It allows rendering of signals directly in JSX, skipping re-renders of the component. If you need to use a signal’s value, it provides a new
useSignalValue
hook that re-renders the component whenever the signal’s value changes.Live demo
@Xam-Mlr It’s just simplier, btw I’ve made way to use signals in next.js using hocs. @preact-signals/safe-react
Next.js 14.0.1
the site can be used, but the signals do not work and cause an error in the consoles.
i think it’s not an issue in Next/React but in Preact Signals
https://github.com/facebook/react/issues/26704#issuecomment-1522044060
Facing the same issue. I wish i could use signal with nextjs. Any solution.?
I’ve implemented swc plugin for preact signals tracking in next.js. how to use Here you can try it out: https://codesandbox.io/p/github/XantreGodlike/preact-signals-nextjs/main
I use preact/signals-react(v^1.3.2) in next (v13.4.4), it work.
🙋 Same here! Running on:
"next": "13.2.4"
https://github.com/preactjs/signals/issues/297
I understand that signals should not cause re-rendering. I speak for your library, which is meaningless in my opinion
the advantages of signals are that this is an innovation that was intended as a replacement for hooks. Which is 4 times more productive than them, and does not cause an extra re-render
No one seems to have commented about @satoshi-cyber 's fix.
I just tried it out and it works, but with the downside that signals cannot update their TextNode’s directly. The components need to re-render on value updates.
Interactive example on StackBlitz
@preact/signals-react
to@preact/signals-core
useSignalState
, update values using the original signal:Agree))
@XantreGodlike I meant you are right. React is unextensible. And it is written in that way. The actual problem is, that React has lots of legacy code because it is a very old library. They cannot remove and sometimes alter the old code as it will break many existing apps built with old React. Therefore they try not to touch the old code and do the new stuff on the old stuff as a layer. React source code looks freakingly horrible.
PReact on the other hand is written by correcting these mistakes.
Reproduction
'use client'
directive. If add directive, there is no error, but components is not reactive at all.@preact/signals-react
in any server side componentMinimal reproduction: https://github.com/XantreGodlike/preact-signals-next-issue
Error log:
Hypothesis
seems to be its related with webpack es modules building - it produces immutable object with getters, so preact signals react cannot patch
createElement
. Butreact@18.2.0
is still has commonjs imports/exports, probably next doing some stuff with react export on server sideuseSignalValue causes re-renders of the component. Same as if you access a signal’s value directly in a component.
If you render the signal directly in the JSX (without .value), it won’t trigger a re-render of the component.
Again, that’s how Signals normally works.
On Mon, Nov 6, 2023 at 02:48 MrOxMasTer @.***> wrote:
I don’t understand the meaning of this library at all, when instead of just using useState, you use 3 hooks (useSignal, useState, useEffect), you call even more re-render than it was, killing the signal chip (that they don’t have a re-render). Just without any wrapper, the person created hooks that have an efficiency of -100%. And if a global store is needed, the person did not somehow revive the signal function, but simply made hooks. Better zustand/jotai. He would at least read how preact implemented it on custom useSyncExternalStore and did something similar. Just made it worse than hooks. Just adding extra wrappers and an additional library in addition, which does not work.
It works efficiently. There is not good way to extend react because it’ve written unextendable
It’s kind of cool, but what is the rofl then to use signals? Download an extra library. If it was supposed to be a hook replacement, but at the same time we are writing a hook under the hood, which will also cause a billion-dollar re-render of the entire parent component and children.
Encountering the same issue unfortunately
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
noryarn dev
gives the error, but the applications we are hosting on Kubernetes cluster within a container throws… anyone has an idea?