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\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'

[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.

[XantreDev]

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.

Sorry guys - I have no intenation to affiliate myself with preact/signals via the namespace. I wanted to create standard library for signals, but when signals didn't worked in HMR - it was painful to work with project. Andrew worked on Babel plugin more than half a year - so I though preact team have no resources to support react integration of signals. So I've copied babel plugin and simplified it. I think preact team are decent engineers, but at that point of time you was busy, so I though about providing support for react for signals by myself Probably naming is confusing, maybe it could be named like @preact-signals-community/utils Btw, I am open for communication

[JoviDeCroock]

Just to be clear, I have no gripe with you making your own libraries at all. I do think that improvements as you are describing them are very welcome on our repository and I do my very best to review them and I know @rschristian does so as well. It's up to you to decide what path you take ofcourse, just wanted to throw all of this out there.

[kitajchuk]

@XantreDev I gave your swc plugin a shot on a rather robust Next.js project. Unfortunately this swc plugin doesn't seem to work as intended. All I can really say is things were still sufficiently buggy in the application with your swc plugin and signal state was definitely not functioning as expected. Testing with the babel plugin things worked as expected so far as I could tell with general smoke-and-poke testing across the application. I'm not sure what the differences are between your plugin and the babel plugin other than yours is presumably a port of the babel plugin to swc. It's unfortunately not in my wheelhouse to work on an swc plugin but I'd consider that your example test case here is not nearly sufficient enough to consider your plugin a viable option that is stable for a production environment.

[XantreDev]

@XantreDev I gave your swc plugin a shot on a rather robust Next.js project. Unfortunately this swc plugin doesn't seem to work as intended. All I can really say is things were still sufficiently buggy in the application with your swc plugin and signal state was definitely not functioning as expected. Testing with the babel plugin things worked as expected so far as I could tell with general smoke-and-poke testing across the application. I'm not sure what the differences are between your plugin and the babel plugin other than yours is presumably a port of the babel plugin to swc. It's unfortunately not in my wheelhouse to work on an swc plugin but I'd consider that your example test case here is not nearly sufficient enough to consider your plugin a viable option that is stable for a production environment.

Can you provide more info about errors your encountered?

[rschristian]

Preemptively, let's not debug a community plugin here. If anyone wants to work through issues w/ @XantreDev's plugin, please keep discussion to that repo. It's more beneficial to all users, those of our (Preact's) tools and Xantre's, if discussions about the tools are limited to the relevant repos.

We have to ask that discussions in this repo remain closely related to our tooling/libraries.

Thanks

[kitajchuk]

Preemptively, let's not debug a community plugin here. If anyone wants to work through issues w/ @XantreDev's plugin, please keep discussion to that repo. It's more beneficial to all users, those of our (Preact's) tools and Xantre's, if discussions about the tools are limited to the relevant repos.

We have to ask that discussions in this repo remain closely related to our tooling/libraries.

Thanks

For sure—sorry. I’ll pick it up over there.