This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Preact signals don't work with Next 13 appDir #45054
Comments
|
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 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 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 appSo, the main problem here is that Thanks in advance for the attention! |
|
Facing the same issue. I wish i could use signal with nextjs. Any solution.? |
|
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 |
|
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. |
|
Facing the same, looks like I'll need to consider a different state manager |
|
Confirming that i am experiencing the same thing |
|
Any progress on this ? Thanks |
|
Facing the same issue ! Hope it gets fixed. |
|
🙋 Same here! Running on: |
|
Signals 1.3.1 repro |
|
'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: |
|
i think it's not an issue in Next/React but in Preact Signals |
|
Any updates? |
I use preact/signals-react(v^1.3.2) in next (v13.4.4), it work. |
|
preact/signals-react(v^1.3.2) in next (v13.4.4) works but throws error in console |
|
We have similar issue, using signal and latest of nextjs (13.5.19) and signals-react(1.3.6). In this case, it's useEffect which is null, but I think any hook (useMemo, useState, useEffect) crashes in this scenario. |
|
I ended up using @preact/signals-core instead of @preact/signals-react, and it works fine with the app directory in Next.js. You can learn more about my approach here: https://twitter.com/bersen0/status/1695908480392077466 |
This comment has been minimized.
This comment has been minimized.
|
Next.js 14.0.1
the site can be used, but the signals do not work and cause an error in the consoles.
|
|
@MrOxMasTer |
|
the issue for me is very strange. i use it with react-hook-form in client component and whenever i try to give a value to the signal in the onSubmit function, the email input becames unwriteble. the moment i comment out assignment to signal it behaves normal. no error stack or anything. "@preact/signals-react": "^1.3.6", |
|
Encountering the same issue unfortunately |
This comment has been minimized.
This comment has been minimized.
|
same version (latest); |
|
When did it start? Which version of next do you use? |
next.js 14.0.1 |
@XantreGodlike I am currently facing the issue mentioned by @MrOxMasTer in 13.5.6. |
|
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
import { Signal, effect } from '@preact/signals-core';
import { useEffect, useState } from 'react';
export function useSignalState<T>(signal: Signal<T>) {
const [state, setState] = useState<T>(signal.value);
useEffect(() => {
return effect(() => setState(signal.value));
}, [signal]);
return state;
}
import { signal } from '@preact/signals-core';
import { useSignalState } from '../hooks/signalState.ts';
const counter = signal(0);
function ClickCounter() {
const counterState = useSignalState(counter);
return (
<div>
<div>Counter: {counterState}</div>
<button onClick={() => counter.value++}>Add One</button>
</div>
);
} |
Maybe I don't understand so deeply how react works, but it strikes me that there is something that logically should work like this and it doesn't work in react. Well, it is logical that hooks should update only what changes. This makes the performance higher and there are no useless re-renderers. |
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. |
|
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 |
|
Dan abramov said the library patch the react internals in unsupported way, don't expect that to work efficiently. facebook/react#26704 (comment) |
|
It works efficiently. There is not good way to extend react because it've written unextendable |
|
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 |
I'm asking you again. Why do you need your library if you just used hooks under the hood... |
I think we should fix signals react integration, because you cannot build an ecosystem with so much amount of runtimes. I see some benefits from using signals with this api, but I don't think it's generally a good idea, because there are not so many benefits against jotai |
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. |
|
useSignalValue 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:
<https://codesandbox.io/s/signals-react-safe-demo-forked-xmm3sd?file=/src/Counter.tsx>[image:
image]
<https://github.com/vercel/next.js/assets/59291123/a3923db4-f759-436f-910c-703c36d56f77>
- 2 re-render
[image: image]
<https://user-images.githubusercontent.com/59291123/280680015-d91c123c-3732-4b0a-a52c-316535280b6d.png>
—
Reply to this email directly, view it on GitHub
<#45054 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAJPPVBIXQNEQHPXJ4RORITYDC56LAVCNFSM6AAAAAAUARUWKGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJUGU2DIOJZGQ>
.
You are receiving this because you commented.Message ID: <vercel/next.
***@***.***>
|
I understand that signals should not cause re-rendering. I speak for your library, which is meaningless in my opinion |
Reproduction
Minimal reproduction: https://github.com/XantreGodlike/preact-signals-next-issue Error log: Hypothesisseems to be its related with webpack es modules building - it produces immutable object with getters, so preact signals react cannot patch |
Thanks man, that's work! |
|
Still need some updates on it, but the signal can be used with the signals/core repository. Also, I would like to have a confirmation on:
|
In this case what is better than Atom libraries like Jotai ? |
|
@Xam-Mlr It's just simplier, btw I've made way to use signals in next.js using hocs. import { useSignal } from '@preact-signals/safe-react'
import { withTrackSignals } from '@preact-signals/safe-react/manual'
export const Component = withTrackSignals(() => {
const sig = useSignal(0)
return (
<div>
<button onClick={() => sig.value++}>Add one</button>
Count: {sig.value}
</div>
)
}) |
facts |
It depends on the use case. Only overhead it has - is to track dependecies in each component, it's just adding dependency into the linked list - O(1). |
|
@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. |
Agree)) |
|
I've implemented swc plugin for preact signals tracking in next.js. how to use |
|
@XantreGodlike Thank you for creating that! I will be moving this to If you believe there is a separate issue going on due to |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
and others
Verify 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.
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
The text was updated successfully, but these errors were encountered: