Preact support

[timothymiller]

Describe the bug
Latest version of NextAuthJS (v3.1.0) and Preact (10.5.5) do not play nicely together

Cannot read property 'context' of undefined

Steps to reproduce

• Install next-plugin-preact over base project
  https://www.npmjs.com/package/next-plugin-preact
• Node.js v12 (vercel latest)

Expected behavior
Drop in compatibility with Preact

Feedback
Works perfectly with React v17+, Preact's implementation of React Context seems to be the source of the issue.

[*] Could not find relevant documentation

[cryptiklemur]

fwiw, i am using preact with the latest version of NextAuthJS and not having an issue

[timothymiller]

@aequasi What versions of next, preact, nextauthjs, and node are you using?

[cryptiklemur]

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

[timothymiller]

Does it work on the latest version of [email protected]?

I will update this issue with a minimally reproducible repo. I am implementing the global Provider pattern in _app.tsx. Hopefully I'm able to show the bug without any external dependencies.

[cryptiklemur]

Yeah, just updated and its still working

[jembach]

@timothymiller did you solve the problem? I'm having the same problem and it is also regarding the context

[timothymiller]

@jembach no, had to drop Preact in the meantime. Ask @aequasi for more insight. Right now, it's a "BuT iT WoRks FoR mE" situation.

[cryptiklemur]

Yeah, unfortunately. I'll help with what I can, if you have questions

[deakster]

I am also getting TypeError: Cannot read property 'context' of undefined for what its worth, using the latest version of all dependencies as of today.

The error is thrown in Preact's useContext hook. Also, the exception stack shows the error starts in preact-render-to-string, so it appears to be when doing SSR.

[jembach]

hi,

it is a problem by preact. In preacts version 10.5.8 it is working but it contains a bug.
With Version 10.5.9 they solved it but this problem again occurs.
Im looking forward to find the problem because I don't want to switch back to react because of its bundle size.

One good solution would be if next-auth would replace its own preact dependency with react as dependency or as an peerDependency because it is used with next.js which is based on react. So it would be better for the developer to decide which to choose. The default approach for using next.js with preact is using next-plugin-preact which do all the stuff for replacing any react dependency with preact

[timothymiller]

@jembach Thank you for giving your input, but I don't think this is a viable solution.

It sounds like you're discarding Preact for React in the production dependencies.

My original error log from Preact version 10.0.x points to an issue with Preact's implementation of React Context.

The React team has been making a lot of changes lately (Suspense, concurrent mode, etc). It is much more than a virtual DOM diffing library as compared to when it first started. While the bundle size is an area for improvement, I think Preact needs more time to match the spec for React.

[jembach]

@timothymiller I have now looked in the changelogs of preact and the source code changes. Between version 10.5.8 and 10.5.9 they doesn't touched the context implementation and somehow with preact 10.5.8 next-auth is working but not with 10.5.9 of preact.

The I analyzed my yarn.lock.
Here is the content with preact@^10.5.8:

preact@^10.4.1, preact@^10.5.8:
  version "10.5.8"
  resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.8.tgz#96e71e2caadf60b5ff901f0e4772a46ba0756336"
  integrity sha512-8d0FfBX3O0ay34i15mTckXicSsvaQLemPUByXTyfQUxDeFqZhbtnftVZMNqX3zEJLHcy1bqRu9t+V4GqJtG1TQ==

And when I install preact@^10.5.9 the file looks like:

preact@^10.4.1:
  version "10.5.8"
  resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.8.tgz#96e71e2caadf60b5ff901f0e4772a46ba0756336"
  integrity sha512-8d0FfBX3O0ay34i15mTckXicSsvaQLemPUByXTyfQUxDeFqZhbtnftVZMNqX3zEJLHcy1bqRu9t+V4GqJtG1TQ==

preact@^10.5.9:
  version "10.5.9"
  resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.9.tgz#8caba9288b4db1d593be2317467f8735e43cda0b"
  integrity sha512-X4m+4VMVINl/JFQKALOCwa3p8vhMAhBvle0hJ/W44w/WWfNb2TA7RNicDV3K2dNVs57f61GviEnVLiwN+fxiIg==

So because next-auth is using another preact version yarn is installing both and somehow they are incompatible and the error occurs.
Because of the Webpack rewrites the following situation come up:

• The hole next.js project resolves by importing react every time the preact package installed by the package.json
• When next-auth imports something from react it resolves the additionally installed preact version defined by next-auth

How to solve it in your next.js with preact project temporary

Update your yarn.lock so it looks something like this:

preact@^10.4.1, preact@^10.5.9:
  version "10.5.9"
  resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.9.tgz#8caba9288b4db1d593be2317467f8735e43cda0b"
  integrity sha512-X4m+4VMVINl/JFQKALOCwa3p8vhMAhBvle0hJ/W44w/WWfNb2TA7RNicDV3K2dNVs57f61GviEnVLiwN+fxiIg==

Important is that their is only one preact version is installed.

How to solve it for the future of next-auth

I will suggest the same as here described

One good solution would be if next-auth would replace its own preact dependency with react as dependency or as an peerDependency because it is used with next.js which is based on react. So it would be better for the developer to decide which to choose. The default approach for using next.js with preact is using next-plugin-preact which do all the stuff for replacing any react dependency with preact

@timothymiller do you have another solution?

[timothymiller]

@jembach i wasn't aware next-auth specified a Preact version.

For consistency sake, I should mention the last time I updated this issue, I was referring to version 10.5.5 of Preact.

I will try your method of matching Preact versions in yarn.lock when I return from holiday break.

[cryptiklemur]

FYI, worth noting that Preact has no plans to support the React Server Components, while NextJS does, so it may enb up not be feasible to continue using preact in the future.

[timothymiller]

@aequasi care to share this magic code from 2 months ago that makes it all work?

[cryptiklemur]

There was no "magic code" unfortunately. I just didn't have the issue

[timothymiller]

@aequasi that's not how this works. That's not how any of this works.

[cryptiklemur]

I gave you a reference (#838 (comment)) as to what did work for me, to help you iron out where your problem may be coming from. Perhaps if you upload a reproducible test case, someone may be able to help out more efficiently

[deakster]

@aequasi Do any of your pages/components where you do auth use SSR? The errors I was getting was only during server side rendering (specifically with useContext); if the site was purely static it would have worked for me too.

[balazsorban44]

Can someone verify if this is still an issue?

[timothymiller]

@balazsorban44 Yes, this is still an issue. Please advise.

[balazsorban44]

so just out of curiosity have you tried upgrading next and next-auth to their latest versions?

Please also provide a reproduction repository.