Not working with next 13 app directory.

[XantreDev]

 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\[email protected]_23e7ztf2chqi3ri6onem3l5mii\node_modules\next\dist\compiled\react\cjs\react.development.js:1781:21)
    at Object.apply (webpack-internal:///(sc_client)/./node_modules/.pnpm/@[email protected][email protected]/node_modules/@preact/signals-react/dist/signals.mjs:17:180)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1218:42) 
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_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/[email protected]_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/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:172:36)      
    at retryTask (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1879:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1917:33)
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1308:40)
    at scheduleWork (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:52:25)
    at pingTask (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1307:29)
    at ping (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_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\[email protected]_23e7ztf2chqi3ri6onem3l5mii\node_modules\next\dist\compiled\react\cjs\react.development.js:1781:21)
    at Object.apply (webpack-internal:///(sc_client)/./node_modules/.pnpm/@[email protected][email protected]/node_modules/@preact/signals-react/dist/signals.mjs:17:180)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1218:42) 
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_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/[email protected]_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/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1307:29)
    at ping (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_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\[email protected]_23e7ztf2chqi3ri6onem3l5mii\node_modules\next\dist\compiled\react\cjs\react.development.js:1781:21)
    at Object.apply (webpack-internal:///(sc_client)/./node_modules/.pnpm/@[email protected][email protected]/node_modules/@preact/signals-react/dist/signals.mjs:17:180)
    at attemptResolveElement (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1218:42) 
    at resolveModelToJSON (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_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/[email protected]_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/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:172:36)      
    at retryTask (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1879:50)
    at performWork (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1917:33)
    at eval (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1308:40)
    at scheduleWork (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:52:25)
    at pingTask (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_23e7ztf2chqi3ri6onem3l5mii/node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js:1307:29)
    at ping (webpack-internal:///(sc_server)/./node_modules/.pnpm/[email protected]_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'

[wdcs-kushaltanna]

Facing same issue

[XantreDev]

Lets write about it in nextjs repo

[wdcs-kushaltanna]

Yes. please comment the issue link. I will comment on it.

[XantreDev]

@wdcs-kushaltanna are you checked it in canary release of next?

[XantreDev]

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

[FleetAdmiralJakob]

Any updates?

[vladnicula]

Seems related to https://github.com/remix-run/remix/issues/4164

[vladnicula]

seems the solution for now is to use signals-core not signals-react. That does not break the build on nextjs 13 using the app folder see : https://twitter.com/bersen0/status/1695908480392077466 and comments on https://github.com/vercel/next.js/issues/45054

[XantreDev]

I think in near future babel transform will solve this issue

[XantreDev]

#412

[malinjr07]

Important Note

@preact/signals, @preact/signals-react. @preact/signals-core, All of these libraries use client-side rendering. So, The App router won't be an approach to use such a feature. I suggest using the Page Router if anyone wants to use the Preact packages. Yes, you can convert the components into client components. But it'll just increase the codebase.

@preact/signals-react works just fine with the Next.js 13

Steps to Verify:

1. Install Nextjs App: npx create-next-app@latest
2. Install @preact/signals-react: npm i @preact/signals-react or yarn add @preact/signals-react
3. Most Important Do not use the useSignal hook outside of a component. If you want to declare a signal outside of a component, use the signal function instead:

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

export const welcomeText = signal('Awesome!');

4. Must Do Reload the website after implementation;

Proof of Work: https://github.com/malinjr07/preact-next

[rschristian]

@preact/signals, @preact/signals-react. @preact/signals-core, All of these libraries use client-side rendering. So, The App router won't be an approach to use such a feature.

This is incorrect, you can use any RTS implementation to generate markup on a server. None of these packages are limited to browser environments.

[andrewiggins]

As mentioned before, new babel transform (or other integrations I'm working on documenting) should increase ecosystem capability once we move away from monkey-patching React. Still working on the transform.

[poorscousertommy8]

I think in near future babel transform will solve this issue

Do you think that Signals should then work with Next.js > 14 without any round trips?

[XantreDev]

I've tried to integrate the babel plugin with next. But had problems with some new next.js features, since it uses swc for bundling now. Probably for best integration we need to port the plugin for swc, too

[JonAbrams]

The new 2.0.0 version of @preact/signals-react provides a useSignals()hook that you can place in any component that reads a signal's value. It appears to work with Nextjs 14+ for me.

[ynhhoJ]

@JonAbrams , do you use it like this? Source: https://github.com/preactjs/signals/blob/d78f522411e6dec25c79b345bccb490c5fa57728/packages/react/README.md#usesignals-hook

Can you provide a minimal example, please?

[XantreDev]

I've implemented a plugin for SWC, will provide more info soon. It's working with next.js

[XantreDev]

I've implemented swc plugin how to use Here you can try it out: https://codesandbox.io/p/github/XantreGodlike/preact-signals-nextjs/main

[bacharSalleh]

@XantreDev I don't think it is compatible with latest Nextjs 14.2.1

[XantreDev]

@bacharSalleh I fixed it, it will be released soon (probably today). https://github.com/XantreDev/preact-signals/pull/99

[XantreDev]

@bacharSalleh version 0.6.0 released now you can check it

[ss-twieland]

I'm bumping this ticket.

Can the preact team please support SWC?

@XantreDev Could you make a pull request to this repository please? :)

[XantreDev]

No. I have more flexibility in my own repo. I want to iterate fast on issues and problems

[rschristian]

Can the preact team please support SWC?

PRs are welcome and generally a better strategy than asking us to invest a dozen or so hours on your behalf.

If you really want to see a feature land, best way to do it is create a PR or fund someone to do the work.

[ss-twieland]

I was under the impression that supporting Next.js was a goal for Preact Signals (since it also has a Babel plugin) and that @XantreDev forked to his own repo to make it happen.

[JoviDeCroock]

@ss-twieland we have a limited amount of time throughout our day and this is something we do in our free time, if XantreDev does not want to contribute back that's his choice and we'll get to implementing our version in our own time 😅 if you however want to do it, we would encourage you to

[XantreDev]

@ss-twieland we have a limited amount of time throughout our day and this is something we do in our free time, if XantreDev does not want to contribute back that's his choice and we'll get to implementing our version in our own time 😅 if you however want to do it, we would encourage you to

I think I can invest my time in it, but I am not sure when. My version of SWC plugin will need some changes to work well with current signal store implementation

If you want to use signals with next.js now - you can today use @preact-signals/safe-react with swc plugin

[JoviDeCroock]

Just to emphasise, Preact is in no way affiliated with the @preact-signals namespace and we are still a bit on the ropes about you using that namespace @XantreDev as you are trying to affiliate yourself with us without even communicating about it.

[rschristian]

I was under the impression that supporting Next.js was a goal for Preact Signals

We have no explicit goals for supporting any framework as far as I am aware.

Next in particular is a bit of a challenge as it seems the React team is using it as a playground to test their ideas in (which causes a significant amount of instability), but if signals works there, we're happy to hear it! If not, support will require someone investing time (likely the community, I'm not sure if any of the core team uses Next at their day jobs) to make that happen.