Preact with Next.js 12.0.3 doesn't dedupe

[timneutkens]

Originally posted by @JoviDeCroock in #30347 (comment):

Hey y'all,

I quickly dove into this and used the reproduction so kindly provided by @rayriffy (thank you 🙌 )! So upgrading @preact/compat to 17.0.3 removes the tracing issue. However it surfaces another issue, Next seems to have an issue with deduping packages.

This is mainly an assumption because I've seen it before when porting prefresh to next 12, I saw that as soon as I imported Preact from normal preact it would have two duplicate imports of our options hooks.

The new issue we run into then requires us to comment out the context import so we don't duplicate options hooks throughout the codebase 😅

EDIT: I've tried adding @preact/compat here which did not help

EDIT 2: oh it doesn't happen when we use non-static-generation
When I add the following:

export async function getServerSideProps() {
  return {
    props: { hello: 'world' }
  }
}

it works correctly, if I remove that and it moves to static generation we end up with:

The error

$ next build
info  - Checking validity of types  
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[    ] info  - Generating static pages (0/3)
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'context' of undefined
    at T (file:///Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact@10.5.15/node_modules/preact/hooks/dist/hooks.mjs:1:927)
    at file:///Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/storeon@3.1.4_ad5dcda1e50eccb25493ea568112b43e/node_modules/storeon/react/index.js:18:15
    at Object.Page (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/.next/server/pages/index.js:49:98)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2523)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:1576)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:1767)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
    at m (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/preact-render-to-string@5.1.19_preact@10.5.15/node_modules/preact-render-to-string/dist/commonjs.js:1:2667)
info  - Generating static pages (3/3)

> Build error occurred
Error: Export encountered errors on following paths:
        /
    at /Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/export/index.js:493:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Span.traceAsyncFn (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/trace/trace.js:74:20)
    at async /Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/build/index.js:962:17
    at async Span.traceAsyncFn (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/trace/trace.js:74:20)
    at async /Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/build/index.js:836:13
    at async Span.traceAsyncFn (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/trace/trace.js:74:20)
    at async Object.build [as default] (/Users/jovi/Documents/SideProjects/next-12-preact-issue-reproduction/node_modules/.pnpm/next@12.0.3_9bfab5d69556db861da30525f2351767/node_modules/next/dist/build/index.js:82:25)

[mvarendorff]

Hey, I am hitting this as well while clearing a bunch of security warnings and performing general maintenance on my project. Is there any way I can help with this? From what I understand this entirely breaks using Preact with Next.js 12 (when using hooks which arguably will be a common usecase).

Update: I "fixed" this by replacing all preact/hooks imports with react imports as a workaround. I am not sure this is the correct approach but certainly works for now!

[JoviDeCroock]

Any news on this @timneutkens, anything we can do to help out?

[drager]

Hey, I am hitting this as well while clearing a bunch of security warnings and performing general maintenance on my project. Is there any way I can help with this? From what I understand this entirely breaks using Preact with Next.js 12 (when using hooks which arguably will be a common usecase).

Update: I "fixed" this by replacing all preact/hooks imports with react imports as a workaround. I am not sure this is the correct approach but certainly works for now!

Doesn't work for me with latest next.js and latest preact... If I do that I get: Uncaught TypeError: Cannot read properties of undefined (reading 'context')...

Any news about this?

EDIT: Works fine if I add experimental: {esmExternals: false} to my next.config.js

[FleetAdmiralJakob]

Any updates here? Especially if I look at Next.js 13