next.js icon indicating copy to clipboard operation
next.js copied to clipboard

using-preact example / preact 18 compat in general does not work with next 13

Open kyle-ssg opened this issue 2 years ago • 3 comments

Verify canary release

  • [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

N/A

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

using-preact examples are using Preact 17.x, however NextJS needs >React 18.2.0.

Expected Behavior

I can use Preact with Next 13

Link to reproduction

N/A

To Reproduce

npx create-next-app@latest --example using-preact using-preact-app

kyle-ssg avatar Nov 06 '22 09:11 kyle-ssg

@kyle-ssg It looks like [email protected] added support for React 18 hooks, so I'll try to upgrade the alias package to support Next 13.

maxproske avatar Nov 06 '22 22:11 maxproske

Oh right, did that actually work? I took a look at installing preact latest prior to opening this. Trying that I ran into an issue where it thought compat/server.browser.js wasn't exported from package.json, https://github.com/preactjs/preact/blob/master/package.json#L73. I tried patching that then ran into loads more errors.

kyle-ssg avatar Nov 07 '22 13:11 kyle-ssg

The version bump is not enough. Next 13 expects a renderToReadableStream from react-dom, which is not currently supported in preact-render-to-string. This PR should hopefully unblock it: https://github.com/preactjs/preact-render-to-string/pull/259.

That one is a blocker for Remix to support Preact as well.

lfre avatar Nov 11 '22 15:11 lfre

Is there any update on Preact working on Nextjs 13?

Lucasvo1 avatar Jan 04 '23 09:01 Lucasvo1

Hiya! If you really must, I patched Next with the least amount of changes to work with Preact again https://github.com/lfre/next-13-preact. Have fun.

lfre avatar Jan 22 '23 03:01 lfre

Hiya! If you really must, I patched Next with the least amount of changes to work with Preact again https://github.com/lfre/next-13-preact. Have fun.

Excellent solution!

1997roylee avatar Mar 21 '23 19:03 1997roylee

I would like to keep using Preact, hope a fix can be merged soon

adiron avatar Apr 12 '23 14:04 adiron

Hi, just curios: What is the current state of this issue?

FleetAdmiralJakob avatar May 21 '23 14:05 FleetAdmiralJakob

Any update on this ?

sliceem88 avatar May 29 '23 08:05 sliceem88

This mostly works for me on the latest preact and react, but I do find an error in some places from a lack of React.use in preact. I searched around for a solution, but React.use is a troubling term to search for...

This is my (mostly) working next.config.js:

webpack: (config, { dev, isServer }) => {
    if (!isServer) {
      Object.assign(config.resolve.alias, {
        "react/jsx-runtime.js": "preact/compat/jsx-runtime",
        react: "preact/compat",
        "react-dom/test-utils": "preact/test-utils",
        "react-dom": "preact/compat",
      });
    }
    return config;
  },

Edit: You know, I realized, I barely have any server components in my project, and I doubt this works with server components at all...

CaptainN avatar Jun 21 '23 17:06 CaptainN

Any update on this?

mansisindhu avatar Aug 02 '23 11:08 mansisindhu

@mansisindhu Good question

FleetAdmiralJakob avatar Aug 02 '23 11:08 FleetAdmiralJakob

any update on future nextjs + preact compatability? since this is open for over a year and there are no updates about nextjs 13 and 14, can we at least get a word on future versions? or will this never work again? anything?

mtnhld avatar Dec 27 '23 08:12 mtnhld

using preact is a real performance boost It would be great if nextjs supports it!

thanks

sinafath avatar Dec 30 '23 15:12 sinafath

Hi everyone,

There was a separate larger issue thread (moved to :nextjs: Discussions) around this (with a working swc plugin solution to get Signals working) for using Preact with App Router.

Let me know if that helps!

If yes, I will be closing this issue in favor of keeping that discussion open.

samcx avatar Jan 07 '24 00:01 samcx

@samcx the issue / discussion as well as the plugin you've mentioned refer to integrating Preact Signals (the state management solution) with Next.js while still using React.

This issue, however, is about using Preact as a drop-in replacement for React with Next.js as illustrated originally in the official using-preact example. Since Next.js 13, this doesn't work with the pages nor app directory.

So, please do not close this issue. Instead, could you tell us whether Preact will work with Next.js 13 and onward at some point?

nilsmehlhorn avatar Jan 08 '24 09:01 nilsmehlhorn

@samcx the issue / discussion as well as the plugin you've mentioned refer to integrating Preact Signals (the state management solution) with Next.js while still using React.

This issue, however, is about using Preact as a drop-in replacement for React with Next.js as illustrated originally in the official using-preact example. Since Next.js 13, this doesn't work with the pages nor app directory.

So, please do not close this issue. Instead, could you tell us whether Preact will work with Next.js 13 and onward at some point?

I second this and have the same issue.

The give more detail: I created a simple next js app with react and no additional libraries and the app is hovering around 303kb uncompressed / 89kb compressed first load js bundle size. I am using static site generation with minimal prototype business logic. While i realize that next js represents a real boost in performance and seo capabilities, using preact for simpler projects would give users massive advantage imo, thats why i would love to see support. thank you

mtnhld avatar Jan 08 '24 09:01 mtnhld

@nilsmehlhorn @mtnhld Thanks for the clarification!

Instead, could you tell us whether Preact will work with Next.js 13 and onward at some point?

Not anytime soon I'm afraid → https://github.com/preactjs/preact/issues/4233. Unfortunately, it's not something Next.js can easily do to replace React and it's APIs we use with a simple plugin, and vice versa for the Preact team to maintain that plugin.

the app is hovering around 303kb uncompressed / 89kb compressed first load js bundle size

We still have room to improve here with Next.js! Although Preact is in a whole different bundle size territory than React + Next.js, I wouldn't be too hung up on bundle size, even for simple static sites built on Next.js. There isn't a direct correlation between bundle size and performance because the largest JS bundles load after the HTML, CSS, etc.

CleanShot 2024-01-16 at 18 44 50@2x

CleanShot 2024-01-16 at 18 43 45@2x

samcx avatar Jan 17 '24 02:01 samcx

It's not that you can't make a site work well/fast with react, it's that you have a LOT more room in your bundle, parse and init budgets if you use preact instead of react.

CaptainN avatar Feb 26 '24 20:02 CaptainN