Next-Preact Plugin Breaks with Preact X and/or Next 8.1.0

[kenk2]

I'm a little new to OSS so please bear with me...

This is more or less a bringing to attention of the fact that the next-preact plugin still hasn't been published, but that upgrading the next-preact example to either the latest version of Next (8.1.0 as of writing this) or Preact X latest (10.0.0-beta.2 as of writing this) break the example. Since the publish was never done after the merge request, I ended creating my own example of using nextjs with Preact in this repository (First Preact App).

I wanted to use hooks with preact and nextJS, which is only available in Preact X, but doing so breaks the repository with the following error (Next held at 8.0.3):

/home/USER/first-preact-app/node_modules/preact-compat/dist/preact-compat.js:52
VNode.prototype.$$typeof = REACT_ELEMENT_TYPE;
      ^

TypeError: Cannot read property 'prototype' of undefined

With a bunch of errors about where's the error. If I maintain preact at the current latest version of 8.4.2, but upgrade nextjs to the current latest at 8.1.0, I get the following error:

/home/USER/first-preact-app/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:841
var ReactCurrentDispatcher = ref.ReactCurrentDispatcher;
                                 ^

TypeError: Cannot read property 'ReactCurrentDispatcher' of undefined

From what I read in another issue, this second error is because Suspense isn't in Preact's latest version, but is in the next version. So by installing Preact 10.0.0-beta.2 and use Next 8.1.0, I am unable to build altogether with the following error:

> first-preact-app@1.0.0 build /home/kenny/first-preact-app
> next build

internal/modules/cjs/loader.js:670
    throw err;
    ^

Error: Cannot find module 'react'

So I'm unable to find a setup that allows me to use Preact, NextJS and Preact Hooks at the meantime. My other option is to not use hooks and continue working with Next 8.0.3 and Preact 8.4.2 as it's been proven stable enough for my hobbyism, but I like the simple interface of hooks in React and want to experiment with them in Preact.

Any ideas how to resolve this?

[hectorromo]

@kennykimjr I had the same problem, but I found this repo that seems to be working. https://github.com/aomkirby123/nextjs-preactX

[kenk2]

@hectorromo So I cloned the repo and I ended up getting this familiar error when trying to build:

$ next build
The module 'react' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install --save react'
The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your 'package.json'. To add it, run 'npm install --save react-dom'
internal/modules/cjs/loader.js:670
    throw err;
    ^

Error: Cannot find module 'react'

@aomkirby123 Would be nice to advise me if I'm not doing this right, or if I have some kind of environment/configuration error.

[jedahan]

I was able to get it working by requiring alias.js and calling it in the next script in dist and in next-server's script. Ugly but it worked.

[kenk2]

@jedahan Can you show an example of that solution? My project doesn't have the same structure (no dist or next-server) so I'd like to see I can adapt your solution works in my repository or aomkirby's.

[SaltyAom]

I'm not sure how Next.js build work, but I update my repo, which add React and React DOM as dev-depencies to trick Next.js that we have React, but we actually use Preact.

Also, I remove alias.js, now instead of require('./alias.js'), we require('module-alias') instead.

This should be working for now, I'll read more about Next.js Build to see if I can change something.

Also, feels free to create issue on nextjs-preactx repo, I'll always be grateful to be clear your question.

[jedahan]

@kennykimjr the latest changes @aomkirby123 made are way less hacky, and work better for me.

[kenk2]

... So Preact a few hours ago as of this writing released the beta.3, which broke the hooks API from beta.2 in my example project first-preact-app. Error resulting from upgrading to beta 3: TypeError: Cannot read property '__H' of undefined

It shouldn't be a problem as long as you avoid the use of hooks in beta.3 but I imagine that a lot of people are going to want to utilize it. So I'm thinking of a couple of things here:

Do we gear this plugin for 8.4.2, 10.0.0-beta.2, or 10.0.0-beta.3? Ultimately I'm interested in attempting to update this plugin for the latest version of Next and Preact but I'd like some advice before doing that.

[marvinhagemeister]

@kennykimjr We forgot to update preact-render-to-string alongside preact itself. Published a new version of preact-render-to-string that fixes it 👍 Already made a PR against your repo: https://github.com/kennykimjr/first-preact-app/pull/11 🍀

[kenk2]

Thanks Marvin! Now that that's taken care of I'll see if I can work on updating this plugin using PreactX and the fixes you made and from everyone else.

[kenk2]

Okay, so I'm back. I created a generic npm package called next-preactx-plugin because I'm not exactly sure what to do about updating the current next-preact plugin since this would break backwards compatibility with the current latest version of preact (8.4.2) in favor of the current beta (10.0.0) which is actively getting to stability. This change to make it compatible with preactX would also require an additional step of adding module aliases to your package.json.

I can simply copy the code to a new version of next-preact and designated as a "next" version so as to not break stability for the people using the current version of the next-preact plugin. What do you guys think is the best way to go forward here?

[SaltyAom]

I want to create a PR but that would took me 13 hours until I can do it, so I’ll leave a guide here then.
I recommended add React and React DOM as dev dependencies so that build process would be smaller.
Also in alias.js, alias React, React-dom to Preact/compat and react-ssr-prepass to preact-ssr-prepass. Don’t forget to mention to include alias.js in server.
With alias.js, _moduleAliases in package.json wouldn’t be require to be added.
Lastly, mention that change from React and React dom to dev dependencies on project that will use this plugin.
Other than this should be working like a charm.
If there’s a problem, I’ll create a PR to fix that.

[kenk2]

So I've attempted to do everything that you've suggested with only 1 issue @aomkirby123 . NPM/Yarn doesn't install devDependencies of Dependencies, so I'd have to either install react/react-dom as devDependencies of my main project, or install them as dependencies of the plugin. Although at this point I'd argue that react/react-dom aren't really devDependencies since you cannot build without "tricking" NextJS. Some production systems however still install developer dependencies before pruning them after the initial build/run scripts have completed.

The plus to the first approach is that it keeps the "interface" the same as the current version of zeit's next-preact but it fully installs react as a dependency which drags out installation time.

The plus to the second approach is that doesn't weight down the build process as much but it adds a second installation step of adding react/react-dom as devDependencies. But I think at this point it may be an acceptable cost as the LTS and beta versions of Preact as so far apart from each other. However building will fail if you use something like npm/yarn install with the production option set to true as that production option will skip installing the devDependencies.

EDIT: next-preactx-plugin has been updated to 1.1.3. I plan to eventually use that exact code as the "next" version of @zeit/next-preact version 2. I can't really find a good way to maintain the same build instructions so I've decided that at least for my personal plugin, this is an acceptable cost to ask the user to add react/react-dom as devDependencies on their main project. You can submit an issue if you'd like or suggest a better course of action.

[marvinhagemeister]

FYI: From the looks of it we'll likely move out of Beta with version X soon 👍