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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not working with next 13 app directory. #297

Not working with next 13 app directory. #297

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

XantreDev commented Sep 15, 2023

XantreDev commented Sep 15, 2023

malinjr07 commented Sep 30, 2023 •

edited

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

XantreDev commented Dec 22, 2023

XantreDev commented Dec 23, 2023

bacharSalleh commented Apr 19, 2024

XantreDev commented Apr 19, 2024 •

edited

XantreDev commented Apr 19, 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

XantreDev commented Sep 15, 2023

XantreDev commented Sep 15, 2023

malinjr07 commented Sep 30, 2023 • edited

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

XantreDev commented Dec 22, 2023

XantreDev commented Dec 23, 2023

bacharSalleh commented Apr 19, 2024

XantreDev commented Apr 19, 2024 • edited

XantreDev commented Apr 19, 2024

vladnicula commented Sep 15, 2023 •

edited

malinjr07 commented Sep 30, 2023 •

edited

ynhhoJ commented Dec 22, 2023 •

edited

XantreDev commented Apr 19, 2024 •

edited