Thanks for a great-looking plugin, this is making me excited to switch my Next sites to Preact.

I'm not sure if this is an issue with your plugin, or something further upstream (maybe @developit knows?), but I can't seem to get server-side styles to render correctly with a third-party library (Material UI in my use-case) that uses className for passing CSS classes. From the docs, I would have expected @preact/compat to fix this out of the box, but it doesn't seem to work.

I suspect that there's an issue with how preact-render-to-string detects styles when using the className prop (which MUI uses internally). Perhaps there's an issue with how preact-render-to-string is configured that makes it fail to parse className props correctly? In any case, this unfortunately means that it seems like it's impossible to use existing third-party libraries that aren't already Preact compatible.

I can get styles to apply correctly if there's any re-render on the component (which is why I suspect preact-render-to-string), but on initial page load none of the HTML elements have classes applied.

Weirdly, if I add a class prop to one of the MUI components, the base styles are applied fine, but any class names I've added to the class prop aren't applied.

I've made a minimal repro here which you can clone: https://github.com/colophonemes/preact-next-mui-test

The site is also running on Vercel here for a live demo: https://next-preact-test.vercel.app/

Thanks in advance for any pointers you're able to give!

I'm trying to get Next.js working with both next-plugin-react and emotion.

In the with-emotion an example babel configuration is provided that overrides the @babel/preset-react importSource with @emotion/react which points to a patched version for the new jsx-runtime to work with Emotion.

When I try to combine that Babel configuration with the using-preact example that uses this plugin, I get the following error in the console: Module not found: Can't resolve 'react/jsx-dev-runtime'. This is imported in @emotion/react/jsx-runtime and @emotion/react/jsx-dev-runtime.

I would have expected the react aliases from next-plugin-preact to pick up on this and resolve correctly but that doesn't seem to be the case. What would be good way to make sure Emotion and Preact can be used together in Next.js?

I have a Nest.js + Next.js setup where Nest calls the next() function to start the framework where i pass withPreact(). However, i get the error Cannot find module 'preact/compat'. I've followed the instructions from the README. What am i doing wrong?

How i'm calling Next:

      this.server = next({
        dev: !isProduction,
        dir: "./src/client",
        conf: withPreact()
      });

When I run "npm install --save next next-plugin-preact preact react@npm:@preact/compat react-dom@npm:@preact/compat react-ssr-prepass@npm:preact-ssr-prepass preact-render-to-string", I get a dependency conflict error.

Reproduction

https://github.com/srdjan/next-repros

Steps to reproduce

npm run build

Expected Behavior

successful build

Actual Behavior

Build error occurred
{ Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._resolveFilename (/Users/srdjans/Code/next-repros/node_modules/module-alias/index.js:49:29)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (/Users/srdjans/Code/next-repros/node_modules/@prefresh/webpack/src/index.js:1:17)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (/Users/srdjans/Code/next-repros/node_modules/@prefresh/next/src/index.js:1:18)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10) code: 'MODULE_NOT_FOUND' }

Hey :)

im testing preact with next.js and its ok. but when i tried to add some dependency(react-hook-form) and build
"Cannot read property '__H' of undefined" appears!

• preactjs + react-hook-form ---> working wihtout any errors

• next.js + preactjs + react-hook-form --->Cannot read property '__H' of undefined

packages are latest version

hi, I am getting a webpack error when trying to run with this plugin in dev.
Production seems to be working fine.
Do you have any idea what might be causing it?

package.json

"webpack": "latest",
"next-plugin-preact": "^3.0.3",
"preact": "^10.5.10",
"preact-render-to-string": "^5.1.12",
"react": "npm:@preact/compat",
"react-dom": "npm:@preact/compat",
 "react-ssr-prepass": "npm:preact-ssr-prepass",

it happens only when using:

const withPreact = require('next-plugin-preact');

I seems that the aliases in package.json make it work even so, as the build size keeps reduced even if I disable it.

cheers, dan

Is this compatible with the latest nextjs? after I run npm run build nothing happens and it does not build and no errors are shown

error - ./styles/base.min.css
ReferenceError: self is not defined

Hi, I got this error with @zeit/next-css the css file import from _app.js

module.exports = withPreact(
   withCSS({
      webpack(config) {
         // retrieve the rule without knowing its order
         const jsLoaderRule = config.module.rules.find(
            (rule) => rule.test instanceof RegExp && rule.test.test(".js")
         );

         const linariaLoader = {
            loader: "linaria/loader",
            options: {
               displayName: process.env.NODE_ENV !== "production",
               sourceMap: false,
            },
         };
         if (Array.isArray(jsLoaderRule.use)) {
            jsLoaderRule.use.push(linariaLoader);
         } else {
            jsLoaderRule.use = [jsLoaderRule.use, linariaLoader];
         }
         return config;
      },
   })
);

warn  - Fast Refresh is disabled in your application due to an outdated `react` version. Please upgrade 16.10 or newer! Read more: https://err.sh/next.js/react-version

Can this be ignored?

Hey Guys, I'm trying to check which version this old legacy Next JS project can use the preact, there is nothing I can find about compatibility? the NextJS version of this old project is 9 ( unfortunately I want to do a little bit of booster in performance until we finish another new project lol )
Thanks guys! :D

Everytime I call Router.reload or Router.refresh, makes the preact render a new virtual DOM

Hi Preact team. First of all thanks for the amazing work 🌮

Describe the bug
Whenever using any hooks with webpack 5 / next / preact I'm observing the following error when running the dev server:

Error: Hook can only be invoked from render methods.
    at Object.preact__WEBPACK_IMPORTED_MODULE_0__.options.__h (/home/tbgse/dev/webpack-5-test/.next/server/pages/_document.js:1281:7106)

and this error when trying to build

Error occurred prerendering page "/". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot read property '__H' of undefined
    at hooks_m (/home/tbgse/dev/webpack-5-test/.next/server/pages/_app.js:46:208)
    at hooks_y (/home/tbgse/dev/webpack-5-test/.next/server/pages/_app.js:46:580)

I'm not sure if this is a problem with preact itself or possibly with the next-plugin-preact. This bug does only occur after making the switch to webpack5. Before everything worked just fine. This is not an issue of misusing the hook outside of a render method, the same code is working just fine when using react or preact + webpack4.

To Reproduce
I have created an example repo here:
https://github.com/tbgse/preact-webpack5-next

This includes the following steps

• Fresh nextjs project on latest version
• customized next.config.js to enable webpack 5
• add next-plugin-preact for preact support
• added a small hello world useEffect hook in pages/index.js

Expected behavior
Hooks should work correctly

Describe the bug
When an exception is throw in the render phase of a clientside rendered page the Next.JS pages/_error fails to render. I'm unsure if this is a bug in next, preact or next-plugin-preact happy to post elsewhere if there's a better place.

To Reproduce

• Repro: https://nextjs-preact-demo-wilsonpage.vercel.app/
• Source: https://github.com/wilsonpage/next-preact-error-handling-bug

Steps to reproduce the behavior:

1. Visit /
2. Click link to render /failing
3. Observe fails to JS console showing 5x render and exceptions

Expected behavior

• Should only invoke pages/failing render once
• Should then render pages/_error

I hope I am in the right place here; let me know if I am not.

Background

For the past couple of days I have been trying to get fast-refresh, next.js and Preact to run together. For that I tried using the using-preact example from next.js directly.

Problem / Reproduction

1. In an empty directory (or any directory that doesn't have a web directory under it) run the following commands:

npx create-next-app --example using-preact web
cd web
yarn dev

2. Open the browser on http://localhost:3000.
3. See a blank page
4. Open the JS Console
5. See three errors:

Uncaught TypeError: __webpack_require__(...) is not a function
    js NextJS
    Webpack 20
react-refresh.js:1796:264
---
Uncaught TypeError: __webpack_require__(...) is not a function
    js NextJS
    Webpack 19
_app.js:8933:264
---
Uncaught TypeError: __webpack_require__(...) is not a function
    js NextJS
    Webpack 19
index.js:9043:264

Expected behaviour

The page is displayed properly and no errors come up in the console.

Versions and stuff

OS: Windows 10 64-bit
Node: 14.15.3
npm: 6.14.9

Libraries (copied from an attempt to fix things; they aren't identical to the using-preact example but neither of them works)

next: 10.0.5
next-plugin-preact: 3.0.3
preact: 10.5.11
preact-render-to-string: 5.1.12
react: npm:@preact/compat@^0.0.4
react-dom: npm:@preact/compat@^0.0.4

Stuff I tried

Run in a Linux VM. Running the reproduction steps in a Kali VM I had around, worked without problems, fast refresh works without issues.
Remove next-plugin-preact from next.config.js. The project displays a working website, a change in source files is detected and triggers a loading icon but the content of the website doesn't change (which makes sense with prefresh not being included, I guess).
Copy an older version of next.config.js. They produced the same result as including the plugin directly.
Run in WSL. Works just as well with the Kali VM but is a huge pain to set up, check the IP of the WSL VM and is a problem for me because I regularly work with VirtualBox which doesn't allow me to run WSL next to it (so I have to change the Windows Features and restart each time I want to work on the other).
Ask a friend to run the reproduction steps on his computer (Windows 10 64-bit as well). Behaves in the same way.

Chances are I am just missing something blatantly obvious here but after days of trying to find an answer to my problem or even someone else with the same issue, I gave up... If there is any information missing, let me know and I will provide it asap!

Summary

The plugin doesn't work with a fresh create-next-app install (anymore).

Reproduction

Minimal Reproduction

I've tested this both in StackBlitz and locally (Ubuntu 20). The steps are as you might expect:

• Follow the nextjs install guide (run create-next-app)
• Follow this plugin install guide

Error

➜  nextjs-preact git:(main) ✗ npm run dev

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './compat/server.browser' is not defined by "exports" in /home/matt/dev/experiments/nextjs-preact/node_modules/preact/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:683:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.mod._resolveFilename (/home/matt/dev/experiments/nextjs-preact/node_modules/next/dist/build/webpack/require-hook.js:23:32)
    at Function.Module._resolveFilename (/home/matt/dev/experiments/nextjs-preact/node_modules/module-alias/index.js:49:29)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Notes

This might be similar to #52
I don't think this is related to #55

The recent upgrade to Next 12.2 introduced an error in the console.

Warning: next-head-count is missing. https://nextjs.org/docs/messages/next-head-count-missing 5 [next-dev.js:24:25](webpack://_N_E/node_modules/.pnpm/[email protected]_tp5llvuvk3nymhndaus7enixm4/node_modules/next/dist/client/next-dev.js?cd99)
    error next-dev.js:24
    updateElements head-manager.js:96
    updateHead head-manager.js:42
    updateHead head-manager.js:41
    emitChange side-effect.js:12
    SideEffect side-effect.js:45
    Preact 2

It also causes a undefined tag to appear in the body:

Relevant package.json sections:

{
  "dependencies": {
    "next": "12.2.0",
    "next-plugin-preact": "^3.0.7",
    "preact": "^10.7.1",
    "preact-render-to-string": "^5.1.21",
    "react": "npm:@preact/[email protected]",
    "react-dom": "npm:@preact/[email protected]",
    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.2.0"
  },
  "devDependencies": {
    "@prefresh/babel-plugin": "^0.4.0",
    "preact-ssr-prepass": "^1.2.0",
    "webpack": ">=4.0.0 <5.0.0 || >=5.0.0 <6.0.0"
  },
  "peerDependencies": {
    "@prefresh/babel-plugin": "^0.4.0",
    "preact-ssr-prepass": "^1.2.0"
  }
}

pages/_document.tsx

import Document, { Head, Html, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

pages/index.tsx

import type { NextPage } from 'next'
import Head from 'next/head'
import { Header } from '~/components/Header'
import { HomeMain } from '~/components/HomeMain'

const Home: NextPage = () => (
  <>
    <Head>
      <title>TITLE</title>
      <meta name="description" content="DESCRIPTION" />
    </Head>

    <Header />

    <HomeMain />
  </>
)

export default Home

Description

When using next-plugin-preact, <option> elements are given a duplicate selected attribute in the document source, resulting in HTML validation errors when run through a tool like https://validator.w3.org/.

Steps to reproduce

1. CodeSandbox demo: https://codesandbox.io/s/nextjs-swr-preact-forked-fmojde?file=/pages/index.js.
2. Navigate to the URL directly: https://fmojde.sse.codesandbox.io/.
3. View page source (e.g., Ctrl+U on Windows).
4. Search for selected.
5. Observe this HTML: <option selected value="b" selected>b</option>.
6. Visit https://validator.w3.org/nu/?doc=https%3A%2F%2Ffmojde.sse.codesandbox.io%2F to view the validation report. Observe that one of the errors is: Duplicate attribute selected.

The source code for the repro sandbox is very simple:

const values = ["a", "b", "c"];

export default function Home() {
  return (
    <label>
      Pick a value
      <select defaultValue={values[1]}>
        {values.map((value) => (
          <option key={value} value={value}>
            {value}
          </option>
        ))}
      </select>
    </label>
  );
}

Environment

• Nextjs version: 12.1.4
• Plugin version: 3.0.6

Additional context

• Not observed without the Preact plugin/on a fresh Next.js install.
• SSR/SSG doesn't make a difference.
• Observed on Next 12. Haven't tested versions < 12.

Repro: https://github.com/lfre/preact-render-to-string-issue

preact-render-to-string 5.2.4+ throws errors in Development mode. Three things cause this:

• The esmExternals experiment property is set to false. This is needed to resolve related issues: #53 #25
• The preact/debug entry added in development. Ref
• The usage of interpolated variables in components. E.g:

function MyComponent({ name }) {
    return <div>My {name}</div>
}

Hey :),

im testing next.js v10 with preact and geting this error TypeError: h.render is not a function  with fast refresh.

If you need a repository to check the steup, i can provide you one

I'm using NextJS v10 with DatoCMS. Currently, I want to use this plugin to improve the bundle sizes but I realized that the lazy loading in the Image component from https://github.com/datocms/react-datocms not work.

Error: Cannot find module 'react-dom/server.browser'
Require stack:

• /home/projects/nextjs-preact-webpack5-t2s3fm/node_modules/next/dist/bin/next
  at Function.Module._resolveFilename (https://nextjs-preact-webpack5-t2s3fm.w.staticblitz.com/blitz.1becece65fb9e6d89d27bbe87eedd4d64b37a3a4.js:6:217231)

  https://stackblitz.com/edit/nextjs-preact-webpack5-t2s3fm?file=package.json

Summary

After I install next-plugin-preact with yarn (berry version), I get dependency not found warnings in yarn log.

Respectively peerDeependencies:

• next and webpack are of @prefresh/next
• react and react-dom are of next
• @prefresh/babel-plugin and webpack are of @prefresh/webpack

They should be added in package.json

Versions

• next-plugin-preact: 3.0.6

Steps Reproduce

1. yarn init -y
2. yarn set version berry
3. yarn add preact preact-render-to-string preact-ssr-prepass next-plugin-preact
4. See yarn log

Results

Actual

yarn log:

➤ YN0000: ┌ Resolution step
➤ YN0002: │ next-plugin-preact@npm:3.0.6 [99790] doesn't provide @prefresh/babel-plugin (p48563), requested by @prefresh/webpack
➤ YN0002: │ next-plugin-preact@npm:3.0.6 [99790] doesn't provide next (p7b6b4), requested by @prefresh/next
➤ YN0002: │ next-plugin-preact@npm:3.0.6 [99790] doesn't provide webpack (p67555), requested by @prefresh/next
➤ YN0002: │ next-plugin-preact@npm:3.0.6 [99790] doesn't provide webpack (p99d5e), requested by @prefresh/webpack
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ next-plugin-preact@npm:3.0.6 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ preact-render-to-string@npm:5.1.19 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ preact-ssr-prepass@npm:1.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ preact@npm:10.5.14 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ pretty-format@npm:3.8.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0007: │ next-plugin-preact@npm:3.0.6 [99790] must be built because it never has been before or the last one failed
➤ YN0000: └ Completed
➤ YN0000: Done with warnings

Expect

No warning in yarn log.

Workaround

Add in .yarnrc.yml:

packageExtensions:
  "@prefresh/next@*":
    dependencies:
      next: "*"
      react: "*"
      react-dom: "*"
      webpack: "*"
  "@prefresh/webpack@*":
    dependencies:
      "@prefresh/babel-plugin": "*"
      webpack: "*"
...

With the recent release of next v12, using preact with Next.js seems a bit difficult. I am looking for some workarounds to accomplish this. Read more here: vercel/next.js#31240

So, just gave this a try. I'm getting "Circular structure in "getInitialProps" result of page "X"" errors now, and I don't even have "getInitialProps".

Commenting out getStaticProps removes the error, but there is nothing circular in there

Bug report

Describe the bug

I have a monorepo structure which uses lerna + yarn workspaces. When I tried to use next-plugin-preact, surprisingly it works in build time but not in dev time.

Error: Cannot find module 'webpack/lib/dependencies/ConstDependency'

Context

I'm not sure why this happens but ONLY when I run next-dev with next-plugin-preact enabled it breakins with this message of cannot find module webpack/lib/*.

yarn run v1.22.5
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://nextjs.org/docs/messages/react-version
info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
Error: Cannot find module 'webpack/lib/dependencies/ConstDependency'
Require stack:
- /home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/@prefresh/webpack/src/index.js
- /home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/@prefresh/next/src/index.js
- /home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next-plugin-preact/index.js
- /home/raulmelo/development/open-source/next-plugin-preact-monorepo/apps/next-demo/next.config.js
- /home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/next-server/server/config.js
- /home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/server/next.js
- /home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/server/lib/start-server.js
- /home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/cli/next-dev.js
- /home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.mod._resolveFilename (/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
    at Function.Module._resolveFilename (/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/module-alias/index.js:49:29)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at ReloadPlugin.webpack5 (/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/@prefresh/webpack/src/index.js:60:29)
    at ReloadPlugin.apply (/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/@prefresh/webpack/src/index.js:159:14)
    at createCompiler (/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/compiled/webpack/bundle5.js:137406:12)
    at /home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/compiled/webpack/bundle5.js:137376:48 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/@prefresh/webpack/src/index.js',
    '/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/@prefresh/next/src/index.js',
    '/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next-plugin-preact/index.js',
    '/home/raulmelo/development/open-source/next-plugin-preact-monorepo/apps/next-demo/next.config.js',
    '/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/next-server/server/config.js',
    '/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/server/next.js',
    '/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/server/lib/start-server.js',
    '/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/cli/next-dev.js',
    '/home/raulmelo/development/open-source/next-plugin-preact-monorepo/node_modules/next/dist/bin/next'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

In my main repository, the error is slight different

arn run v1.22.5
$ scripty --scope=website
scripty > Executing "/home/raulmelo/development/raulmelo-studio/scripts/workspace/dev.sh":

┏━━━ 🧙🏻‍♀️ Dev: yarn dev  ━━━━━━━
$ /home/raulmelo/development/raulmelo-studio/node_modules/.bin/lerna run dev --stream --scope=website
lerna notice cli v4.0.0
lerna info versioning independent
lerna notice filter including "website"
lerna info filter [ 'website' ]
lerna info Executing command in 1 package: "yarn run dev"
website: $ scripty
website: scripty > Executing "/home/raulmelo/development/raulmelo-studio/apps/website/scripts/dev.sh":
website: Dev server...
website: Debugger listening on ws://127.0.0.1:9229/cbc24867-5c1d-45e9-a380-ee019225e612
website: For help, see: https://nodejs.org/en/docs/inspector
website: Getting data from Localhost
website: Site data generated!
website: Debugger listening on ws://127.0.0.1:9229/28d63eac-e6d1-45d4-9c80-cd61e7727fc2
website: For help, see: https://nodejs.org/en/docs/inspector
website: $ /home/raulmelo/development/raulmelo-studio/node_modules/.bin/next
website: Starting inspector on 127.0.0.1:9229 failed: address already in use
website: ready - started server on 0.0.0.0:3000, url: http://localhost:3000
website: info  - Loaded env from /home/raulmelo/development/raulmelo-studio/apps/website/.env
website: info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
website: Error: Cannot find module 'webpack/lib/RuntimeGlobals'
website: Require stack:
website: - /home/raulmelo/development/raulmelo-studio/node_modules/@prefresh/webpack/src/index.js
website: - /home/raulmelo/development/raulmelo-studio/node_modules/@prefresh/next/src/index.js
website: - /home/raulmelo/development/raulmelo-studio/node_modules/next-plugin-preact/index.js
website: - /home/raulmelo/development/raulmelo-studio/apps/website/next.config.js
website: - /home/raulmelo/development/raulmelo-studio/node_modules/next/dist/next-server/server/config.js
website: - /home/raulmelo/development/raulmelo-studio/node_modules/next/dist/server/next.js
website: - /home/raulmelo/development/raulmelo-studio/node_modules/next/dist/server/lib/start-server.js
website: - /home/raulmelo/development/raulmelo-studio/node_modules/next/dist/cli/next-dev.js
website: - /home/raulmelo/development/raulmelo-studio/node_modules/next/dist/bin/next
website:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
website:     at Function.mod._resolveFilename (/home/raulmelo/development/raulmelo-studio/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
website:     at Function.Module._resolveFilename (/home/raulmelo/development/raulmelo-studio/node_modules/module-alias/index.js:49:29)
website:     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
website:     at Module.require (internal/modules/cjs/loader.js:952:19)
website:     at require (internal/modules/cjs/helpers.js:88:18)
website:     at ReloadPlugin.webpack5 (/home/raulmelo/development/raulmelo-studio/node_modules/@prefresh/webpack/src/index.js:62:28)
website:     at ReloadPlugin.apply (/home/raulmelo/development/raulmelo-studio/node_modules/@prefresh/webpack/src/index.js:159:14)
website:     at createCompiler (/home/raulmelo/development/raulmelo-studio/node_modules/next/dist/compiled/webpack/bundle5.js:137406:12)
website:     at /home/raulmelo/development/raulmelo-studio/node_modules/next/dist/compiled/webpack/bundle5.js:137376:48 {
website:   code: 'MODULE_NOT_FOUND',
website:   requireStack: [
website:     '/home/raulmelo/development/raulmelo-studio/node_modules/@prefresh/webpack/src/index.js',
website:     '/home/raulmelo/development/raulmelo-studio/node_modules/@prefresh/next/src/index.js',
website:     '/home/raulmelo/development/raulmelo-studio/node_modules/next-plugin-preact/index.js',
website:     '/home/raulmelo/development/raulmelo-studio/apps/website/next.config.js',
website:     '/home/raulmelo/development/raulmelo-studio/node_modules/next/dist/next-server/server/config.js',
website:     '/home/raulmelo/development/raulmelo-studio/node_modules/next/dist/server/next.js',
website:     '/home/raulmelo/development/raulmelo-studio/node_modules/next/dist/server/lib/start-server.js',
website:     '/home/raulmelo/development/raulmelo-studio/node_modules/next/dist/cli/next-dev.js',
website:     '/home/raulmelo/development/raulmelo-studio/node_modules/next/dist/bin/next'
website:   ]
website: }
website: error Command failed with exit code 1.
website: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
website: scripty ERR! script failed: '/home/raulmelo/development/raulmelo-studio/apps/website/scripts/dev.sh'
website: scripty ERR! exit status: 1
website: error Command failed with exit code 1.
website: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run dev exited 1 in 'website'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
scripty ERR! script failed: '/home/raulmelo/development/raulmelo-studio/scripts/workspace/dev.sh'
scripty ERR! exit status: 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior

Expect to work out of the box.

Screenshots

System information

• OS: Pop!_OS
• Browser (if applies) [e.g. chrome, safari]: N/A
• Version of Next.js: [e.g. 10.0.1]: 10.2.0
• Version of next-plugin-preact: 3.0.4
• Version of Node.js: [e.g. 12.0.0]: 14.15.1

Additional context

Repository to check: https://github.com/devraul/next-plugin-preact-monorepo-bug

On startup with a new Next.js project (v10.2.2) configured with this plugin, and with the next.config.js using the future.webpack5 option in order to enforce webpack 5 (usually it falls back to webpack 4 if a custom webpack config is detected, as is the case with this plugin), the dev command fails with the following message.

The message goes away if I explicitly install webpack to the project.

...
info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
Error: Cannot find module 'webpack/lib/dependencies/ConstDependency'
Require stack:
- /Users/lunelson/Git/sandboxes/nextjs-preactx-test/node_modules/@prefresh/webpack/src/index.js
- /Users/lunelson/Git/sandboxes/nextjs-preactx-test/node_modules/@prefresh/next/src/index.js
- /Users/lunelson/Git/sandboxes/nextjs-preactx-test/node_modules/next-plugin-preact/index.js
- /Users/lunelson/Git/sandboxes/nextjs-preactx-test/next.config.js
- /Users/lunelson/Git/sandboxes/nextjs-preactx-test/node_modules/next/dist/next-server/server/config.js
- /Users/lunelson/Git/sandboxes/nextjs-preactx-test/node_modules/next/dist/server/next.js
- /Users/lunelson/Git/sandboxes/nextjs-preactx-test/node_modules/next/dist/server/lib/start-server.js
- /Users/lunelson/Git/sandboxes/nextjs-preactx-test/node_modules/next/dist/cli/next-dev.js
- /Users/lunelson/Git/sandboxes/nextjs-preactx-test/node_modules/next/dist/bin/next```

What is the status of the project?

A lot of unresolved issues for some time now, same for pull requests.

• Check if updating to the latest Preact version resolves the issue

Package subpath './compat/jsx-runtime.js' is not defined by "exports" in preact/package.json

I'm using preact in next js and tried updating to next 12, I'm using mdx-bundler which import "react/jsx-runtime" internally.

Error :

error - ./node_modules/mdx-bundler/dist/client.js:11:0
Module not found: Package path ./compat/jsx-runtime.js is not exported from package /Users/arpit/Developer/personal_website/node_modules/preact (see exports field in /Users/arpit/Developer/personal_website/node_modules/preact/package.json)

Import trace for requested module:
./node_modules/mdx-bundler/client/index.js
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found
error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './compat/jsx-runtime.js' is not defined by "exports" in /Users/arpit/Developer/personal_website/node_modules/preact/package.json

When I check the node_modules, I can see that "jsx-runtime" is inclued in the exports field.

	"exports": {
...
		"./jsx-runtime": {
			"browser": "./jsx-runtime/dist/jsxRuntime.module.js",
			"umd": "./jsx-runtime/dist/jsxRuntime.umd.js",
			"require": "./jsx-runtime/dist/jsxRuntime.js",
			"import": "./jsx-runtime/dist/jsxRuntime.mjs"
		},
		"./jsx-dev-runtime": {
			"browser": "./jsx-runtime/dist/jsxRuntime.module.js",
			"umd": "./jsx-runtime/dist/jsxRuntime.umd.js",
			"require": "./jsx-runtime/dist/jsxRuntime.js",
			"import": "./jsx-runtime/dist/jsxRuntime.mjs"
		},
...
}

When I try to install the plugin into our Next.js 11.1 project, I run into serious problems because of the dependency requirements of the plugin.

When I start up my next dev server, I get this message:

[preact] Missing/incorrect dependencies.
Please run:
  npm i react@npm:@preact/compat react-dom@npm:@preact/compat

or:

  yarn add react@npm:@preact/compat react-dom@npm:@preact/compat

So far so good - the problem is, when I completely override the react and react-dom dependencies in npm, the next.js build itself works just fine, but it breaks all unit tests in jest either using react-test-renderer or enzyme-adapter-react-16. The problem is that those testing libs try to access features inside the libaries which are not contained in preact/compat (for example react-dom/test-utils).

Is it really necessary to alias the react and react-dom modules "globally" for the whole project?

Hi guys, great library, it definitely saved me some time! 👍🏻

I encountered one issue while implementing it to the large mono-repo app: the validateDependencies method does not respect dependencies inheritance. So, if our application has the following structure:

<root>
packages/
  someService/package.json
  someOtherService/package.json
package.json

and both someService and someOtherService inherit the dependencies from the root's package.json. It will exit with process.exit(-1) and display [preact] Missing/incorrect dependencies.. That is because neither of these packages has preact, next-plugin-preact, or any required library in the package.json - it is inherited from the root.

What's troubling me is the result of process.cwd(). It points to packages/someService/, but we run the start command from the root level, so it might be a bad lerna configuration 🤔 .

Anyhow, I managed to fix this by replacing join(process.cwd(), 'package.json') with join(__dirname, '..', '..', 'package.json');

Summary

After I install next-plugin-preact with yarn (berry version) as README, in yarn log I get dependency not found warnings (project doesn't provide preact-ssr-prepass requested by next-plugin-preact).

Solutions

In peerDependency of package.json replace react-ssr-prepass with preact-ssr-prepass
OR
Add to README preact-ssr-prepass to npm and yarn install commands. (It should be wrong because preact-ssr-prepass is already installed as react-ssr-prepass)

Versions

• next-plugin-preact: 3.0.6

Steps Reproduce

1. yarn init -y
2. yarn set version berry
3. yarn add next-plugin-preact preact preact-render-to-string react@npm:@preact/compat@* react-dom@npm:@preact/compat@* react-ssr-prepass@npm:preact-ssr-prepass@*
4. See yarn log

Results

Actual

yarn log:

➤ YN0000: ┌ Resolution step
➤ YN0002: │ next-plugin-preact@npm:3.0.6 [99790] doesn't provide @prefresh/babel-plugin (p48563), requested by @prefresh/webpack
➤ YN0002: │ next-plugin-preact@npm:3.0.6 [99790] doesn't provide next (p7b6b4), requested by @prefresh/next
➤ YN0002: │ next-plugin-preact@npm:3.0.6 [99790] doesn't provide webpack (p67555), requested by @prefresh/next
➤ YN0002: │ next-plugin-preact@npm:3.0.6 [99790] doesn't provide webpack (p99d5e), requested by @prefresh/webpack
➤ YN0002: │ yarnpreact@workspace:. doesn't provide preact-ssr-prepass (p28444), requested by next-plugin-preact
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ next-plugin-preact@npm:3.0.6 can't be found in the cache and will be fetched fro
➤ YN0013: │ preact-render-to-string@npm:5.1.19 can't be found in the cache and will be fetch
➤ YN0013: │ preact-ssr-prepass@npm:1.2.0 can't be found in the cache and will be fetched fro
➤ YN0013: │ preact@npm:10.5.14 can't be found in the cache and will be fetched from the remo
➤ YN0013: │ pretty-format@npm:3.8.0 can't be found in the cache and will be fetched from the
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0007: │ next-plugin-preact@npm:3.0.6 [99790] must be built because it never has been before or the last one failed
➤ YN0000: └ Completed
➤ YN0000: Done with warnings

Expect

No warning in yarn log.

Workaround

Add in .yarnrc.yml:

packageExtensions:
  next-plugin-preact@*:
    dependencies:
      preact-ssr-prepass: "*"
...

When I install the required packages, two problems happen.

First, the vulnerability fixes would introduce breaking changes.

$ npm install --save next next-plugin-preact preact react@npm:@preact/compat react-dom@npm:@preact/compat react-ssr-prepass@npm:preact-ssr-prepass preact-render-to-string

up to date, audited 1049 packages in 11s

50 packages are looking for funding
  run `npm fund` for details

7 vulnerabilities (3 low, 4 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

After this, I update my next.config.js:

const withPreact = require("next-plugin-preact");

module.exports = withPreact({});

When building the project, this happens:

$ npm run build

> [email protected] build
> next build

----------------------------------------------------------------------------------------------------------------------------------------------
[preact] Missing/incorrect dependencies.
Please run:
  npm i react@npm:@preact/compat react-dom@npm:@preact/compat

or:

  yarn add react@npm:@preact/compat react-dom@npm:@preact/compat
----------------------------------------------------------------------------------------------------------------------------------------------

Needless to say, these dependencies are already present. I honestly don't know what's happening. Tested with latest, FRESH install of NextJS.

My package dependencies:

 "dependencies": {
    "next": "^10.0.6",
    "next-plugin-preact": "^3.0.3",
    "preact": "^10.5.12",
    "preact-render-to-string": "^5.1.12",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.1.3"
  }

UPDATE: Now I tried with these dependencies:

    "next": "10.0.0",
    "next-plugin-preact": "^3.0.3",
    "preact": "^10.5.5",
    "preact-render-to-string": "^5.1.11",
    "react": "npm:@preact/[email protected]",
    "react-dom": "npm:@preact/[email protected]",
    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.1.2"

Deleted node_modules and package-lock.json, and npm i says:

$ npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"npm:@preact/[email protected]" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.6.0 || ^17" from [email protected]
npm ERR! node_modules/next
npm ERR!   next@"10.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

Versions and stuff:

• node v14.15.4
• npm 7.5.2
• Windows 10 + WSL2 installed Ubuntu

Got an error with next after fresh install of the plugin

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:54 PST 2021; root:xnu-8019.61.5~1/RELEASE_X86_64
    Binaries:
      Node: 16.13.2
      npm: 8.1.2
      Yarn: 1.22.17
      pnpm: 6.28.0
    Relevant packages:
      next: 12.0.10
      react: N/A
      react-dom: N/A

➜  archiver git:(main) ✗ yarn dev
yarn run v1.22.17
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error: Cannot find module 'scheduler/package.json'
Require stack:
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack-config.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/hot-reloader.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/next-dev-server.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/server/next.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/server/lib/start-server.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/cli/next-dev.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.mod._resolveFilename (/Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack/require-hook.js:183:28)
    at Function.Module._resolveFilename (/Users/matteogauthier/dev/archiver/node_modules/module-alias/index.js:49:29)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at getPackagePath (/Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack-config.js:548:41)
    at Object.getBaseWebpackConfig [as default] (/Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack-config.js:566:9)
    at async Promise.all (index 0)
    at async Span.traceAsyncFn (/Users/matteogauthier/dev/archiver/node_modules/next/dist/trace/trace.js:75:20)
    at async Span.traceAsyncFn (/Users/matteogauthier/dev/archiver/node_modules/next/dist/trace/trace.js:75:20)
    at async HotReloader.start (/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/hot-reloader.js:329:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack-config.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/hot-reloader.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/next-dev-server.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/next.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/lib/start-server.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/cli/next-dev.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/bin/next'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  archiver git:(main) ✗ yarn dev > error
Error: Cannot find module 'scheduler/package.json'
Require stack:
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack-config.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/hot-reloader.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/next-dev-server.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/server/next.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/server/lib/start-server.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/cli/next-dev.js
- /Users/matteogauthier/dev/archiver/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.mod._resolveFilename (/Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack/require-hook.js:183:28)
    at Function.Module._resolveFilename (/Users/matteogauthier/dev/archiver/node_modules/module-alias/index.js:49:29)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at getPackagePath (/Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack-config.js:548:41)
    at Object.getBaseWebpackConfig [as default] (/Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack-config.js:566:9)
    at async Promise.all (index 0)
    at async Span.traceAsyncFn (/Users/matteogauthier/dev/archiver/node_modules/next/dist/trace/trace.js:75:20)
    at async Span.traceAsyncFn (/Users/matteogauthier/dev/archiver/node_modules/next/dist/trace/trace.js:75:20)
    at async HotReloader.start (/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/hot-reloader.js:329:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/build/webpack-config.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/hot-reloader.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/dev/next-dev-server.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/next.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/server/lib/start-server.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/cli/next-dev.js',
    '/Users/matteogauthier/dev/archiver/node_modules/next/dist/bin/next'
  ]
}
error Command failed with exit code 1.

Hi!

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Since the last version of [email protected] when using webpack@5, during a build, I've been seeing the following error:

> Build error occurred
TypeError: Cannot read property 'framework' of undefined
    at Object.webpack (/Users/nick/dev/els-jhp/node_modules/next-plugin-preact/index.js:46:27)

I believe it has been caused by this change: vercel/next.js#25251.

When I log splitChunks in next-plugin-preact, I'm seeing two different instances of splitChunks, one of which doesn't contain cacheGroups. A simple check fixed the issue and passed the build for me. I'm not sure if this is the right place to fix the issue or it needs to be raised over at Next.js.

A reduced test case of the bug would be to npx create-next-app --example using-preact using-preact-app, install the latest version of Next.js and enable webpack@5 by adding future: { webpack5: true } in next.config.js, then running yarn/npm build.

Here is the diff that solved my problem:

diff --git a/node_modules/next-plugin-preact/index.js b/node_modules/next-plugin-preact/index.js
index e1ba250..30044ef 100644
--- a/node_modules/next-plugin-preact/index.js
+++ b/node_modules/next-plugin-preact/index.js
@@ -40,7 +40,7 @@ module.exports = function withPreact(nextConfig = {}) {
         // Move Preact into the framework chunk instead of duplicating in routes:
         const splitChunks =
           config.optimization && config.optimization.splitChunks;
-        if (splitChunks) {
+        if (splitChunks && 'cacheGroups' in splitChunks) {
           const cacheGroups = splitChunks.cacheGroups;
           const test = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/;
           if (cacheGroups.framework) {

This issue body was partially generated by patch-package.

Using an external import (react-hook-form is where I noticed the issue) which has a module export which internally uses imports from React leads to preact/compat to be re-imported as ESM. Since this is a completely separate import, errors such as not being able to use hooks occur.

This issue is not observed in vanilla React because it only contains a CJS export (afaik).

Setting experimental.esmExternals: false leads to the external being imported as CJS which leads to the same version of React as the base page being used, fixing the observed issues.

This of course won't work if a package only has a module export.

Should next-plugin-preact suggest experimental.esmExternals: false in next.config.js? Can we somehow tell webpack to always resolve imports from "react" to use CJS?

Image component (next/image) aren't lazy loaded when using preactjs

I create a website by using next.js and usenext-plugin-preact for smaller bundle size. I put a <link rel="canonical" key="canonical" href="this is from _app.tsx"/> in _app.tsx and put it again on some specific page <link rel="canonical" key="canonical" href="this is from special page"/> it print out duplicate canonical.

I open an issue to next.js repo but they said it seem to be issue with next-plugin-preact.

I create a repo with duplicate result here https://github.com/ekanant/nextjs-duplicate-in-head.

Hi,

I've been trying for a while now to use React in dev and Preact only in prod with React 17 but sadly to no avail. This is solely because I prefer the react devtools by far over the Preact devtools. However, with React 17 I'm not getting beyond this error when building:

ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in '...\src\pages'

Since it's included in preact/compat, I figured I could just add it to the existing aliases:

    aliases.react = aliases['react-dom'] = 'preact/compat';
    aliases['react/jsx-runtime'] = 'preact/jsx-runtime';

leading to the same error.

Anyways, this is the entire fn I'm applying in next.config.js currently:

const withPreact = (config, options) => {
  if (!options.dev) {
    const splitChunks = config.optimization && config.optimization.splitChunks;

    if (splitChunks) {
      const { cacheGroups } = splitChunks;
      const test = /[/\\]node_modules[/\\](preact|preact-render-to-string|preact-context-provider)[/\\]/u;
      if (cacheGroups.framework) {
        cacheGroups.preact = { ...cacheGroups.framework, test };
      }
    }

    if (options.isServer) {
      config.externals.push(
        /^(preact|preact-render-to-string|preact-context-provider)([/\\]|$)/u,
      );
    }

    const aliases = config.resolve.alias || (config.resolve.alias = {});
    // eslint-disable-next-line no-multi-assign
    aliases.react = aliases['react-dom'] =
      'preact/compat';
  }
};

which works fine in dev, but not in prod, clearly, so I'm locked to 16.14.0 atm.

Considering there's a bit more going on in the plugin here and abstracting this topic away seems like a good idea in general:

• is this possible at all with React 17?
• would it be possible to add a flag to withPreact from the plugin enabling that behaviour conditionally? could just be withPreact({ ...defaultConfig, preactEnabled: bool }, options }) defaulting to true