Not working with next 13 app directory. #297

XantreDev · 2023-01-16T12:47:01Z

 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'

The text was updated successfully, but these errors were encountered:

wdcs-kushaltanna · 2023-01-17T12:30:31Z

Facing same issue

XantreDev · 2023-01-17T21:34:22Z

Lets write about it in nextjs repo

wdcs-kushaltanna · 2023-01-18T13:04:44Z

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

XantreDev · 2023-01-19T16:12:12Z

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

XantreDev · 2023-04-19T09:11:45Z

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

FleetAdmiralJakob · 2023-06-04T08:47:42Z

Any updates?

vladnicula · 2023-09-15T05:33:20Z

Seems related to remix-run/remix#4164

vladnicula · 2023-09-15T05:41:38Z

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 vercel/next.js#45054

XantreDev · 2023-09-15T08:00:13Z

I think in near future babel transform will solve this issue

XantreDev · 2023-09-15T08:12:38Z

#412

malinjr07 · 2023-09-30T04:23:52Z

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:

Install Nextjs App: npx create-next-app@latest
Install @preact/signals-react: npm i @preact/signals-react or yarn add @preact/signals-react
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!');

Must Do Reload the website after implementation;

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

rschristian · 2023-10-04T18:45:22Z

@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 · 2023-10-05T09:18:36Z

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 · 2023-11-29T20:34:08Z

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 · 2023-11-30T00:14:22Z

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 · 2023-12-22T06:19:11Z

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 · 2023-12-22T09:15:29Z

@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 · 2023-12-22T16:25:18Z

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

XantreDev · 2023-12-23T09:13:04Z

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 · 2024-04-19T07:12:35Z

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

XantreDev · 2024-04-19T08:41:42Z

@bacharSalleh I fixed it, it will be released soon (probably today). XantreDev/preact-signals#99

XantreDev · 2024-04-19T13:32:26Z

@bacharSalleh version 0.6.0 released now you can check it

ss-twieland · 2024-07-04T13:24:17Z

I'm bumping this ticket.

Can the preact team please support SWC?

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

XantreDev · 2024-07-04T14:46:27Z

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

rschristian · 2024-07-04T16:39:32Z

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 · 2024-07-05T07:37:29Z

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 · 2024-07-05T07:46:26Z

@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 · 2024-07-05T08:05:59Z

@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 · 2024-07-05T08:07:29Z

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 · 2024-07-05T08:22:47Z

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 · 2024-07-05T08:40:16Z

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 · 2024-07-05T09:19:36Z

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 · 2024-08-26T20:46:15Z

@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 · 2024-08-27T05:29:22Z

@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 · 2024-08-27T06:15:56Z

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 · 2024-08-27T14:33:40Z

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.

JoviDeCroock · 2024-12-17T19:55:12Z

As we are pushing people towards the Babel plugin and away from the automatic runtime I’ll close this issue.

XantreDev mentioned this issue Jan 19, 2023

Preact signals don't work with Next 13 appDir vercel/next.js#45054

Closed

1 task

paulpopus mentioned this issue Jul 26, 2023

Builds failing in Next13 fabian-hiller/modular-forms#104

Closed

XantreDev mentioned this issue Dec 23, 2023

react-signals with next.js 14 #466

Closed

kitajchuk mentioned this issue Aug 27, 2024

Next.js swc plugin not working for react hooks XantreDev/preact-signals#184

Closed

JoviDeCroock closed this as completed Dec 17, 2024

Not working with next 13 app directory. #297

Not working with next 13 app directory. #297

Comments

XantreDev commented Jan 16, 2023

wdcs-kushaltanna commented Jan 17, 2023

XantreDev commented Jan 17, 2023

wdcs-kushaltanna commented Jan 18, 2023

XantreDev commented Jan 19, 2023

XantreDev commented Apr 19, 2023

FleetAdmiralJakob commented Jun 4, 2023

vladnicula commented Sep 15, 2023

vladnicula commented Sep 15, 2023 • edited Loading

XantreDev commented Sep 15, 2023

XantreDev commented Sep 15, 2023

malinjr07 commented Sep 30, 2023 • edited Loading

Important Note

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

rschristian commented Oct 4, 2023

andrewiggins commented Oct 5, 2023

poorscousertommy8 commented Nov 29, 2023

XantreDev commented Nov 30, 2023

JonAbrams commented Dec 22, 2023

ynhhoJ commented Dec 22, 2023 • edited Loading

XantreDev commented Dec 22, 2023

XantreDev commented Dec 23, 2023

bacharSalleh commented Apr 19, 2024

XantreDev commented Apr 19, 2024 • edited Loading

XantreDev commented Apr 19, 2024

ss-twieland commented Jul 4, 2024

XantreDev commented Jul 4, 2024

rschristian commented Jul 4, 2024

ss-twieland commented Jul 5, 2024

JoviDeCroock commented Jul 5, 2024

XantreDev commented Jul 5, 2024

JoviDeCroock commented Jul 5, 2024

rschristian commented Jul 5, 2024 • edited Loading

XantreDev commented Jul 5, 2024

JoviDeCroock commented Jul 5, 2024

kitajchuk commented Aug 26, 2024

XantreDev commented Aug 27, 2024

rschristian commented Aug 27, 2024

kitajchuk commented Aug 27, 2024

JoviDeCroock commented Dec 17, 2024

vladnicula commented Sep 15, 2023 •

edited

Loading

malinjr07 commented Sep 30, 2023 •

edited

Loading

ynhhoJ commented Dec 22, 2023 •

edited

Loading

XantreDev commented Apr 19, 2024 •

edited

Loading

rschristian commented Jul 5, 2024 •

edited

Loading