Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './compat/server.browser' is not defined by "exports" in /XXX/node_modules/preact/package.json

[cheesycod]

• Check if updating to the latest Preact version resolves the issue
  No
  Describe the bug
  A clear and concise description of what the bug is.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './compat/server.browser' is not defined by "exports" in /XXX/node_modules/preact/package.json

To Reproduce
Nextjs 13, Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './compat/server.browser' is not defined by "exports" in /XXX/node_modules/preact/package.json is error
If possible, please provide a CodeSandbox/Codepen that demonstrates the issue. You can use the following template: https://codesandbox.io/s/preact-x-preact-cli-3-starter-vj285y2rn3

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. See error

Expected behavior
What should have happened when following the steps above?

[neverstew]

I spent a hot minute investigating this morning. Bottom line is, preact isn't ready for react 18 or Next 13 yet. In case you want to try it yourself, here's what I did...

ERR_PACKAGE_PATH_NOT_EXPORTED is saying exactly that - there's no key defined in the package.json file for the server.browser file. For whatever reason, the existing location of the file has changed to have this .browser suffix. You can get around this by manually editing node_modules/preact/package.json and including this:

"exports": {
  ...
  "./compat/server.browser": {
    "browser": "./compat/server.browser.js",
    "import": "./compat/server.mjs",
    "require": "./compat/server.js"
  },
  ...
}

This gets the ball rolling, but next we're faced with a version mismatch. NextJS 13 expects React 18. Preact is pinned to 17.0.2 - this is backed into all of the files. Again, you can fudge it by replacing every mention of 17.0.2 with 18.2.0 in the following files:

node_modules/preact/compat/src/index.js
node_modules/preact/compat/dist/compat.mjs
node_modules/preact/compat/dist/compat.module.js.map
node_modules/preact/compat/dist/compat.umd.js.map
node_modules/preact/compat/dist/compat.js
node_modules/preact/compat/dist/compat.umd.js
node_modules/preact/compat/dist/compat.js.map
node_modules/preact/compat/dist/compat.module.js

After you've done this - the server will run! 🎉

However, it won't actually serve you any pages. Preact (or more specifically, the nextjs compat layer) is missing some functions. Here's the error you'll end up with:

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

> nextjs-preact@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1023 ms (165 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 249 ms (194 modules)
error - TypeError: ReactDOMServer.renderToReadableStream is not a function
    at Object.renderToInitialStream (/home/matt/dev/experiments/nextjs-preact/node_modules/next/dist/server/node-web-streams-helper.js:124:27)
    at renderShell1 (/home/matt/dev/experiments/nextjs-preact/node_modules/next/dist/server/render.js:716:53)
    at Object.renderPage (/home/matt/dev/experiments/nextjs-preact/node_modules/next/dist/server/render.js:669:28)
    at Object.defaultGetInitialProps (/home/matt/dev/experiments/nextjs-preact/node_modules/next/dist/server/render.js:348:67)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:19:20)
    at Object.<anonymous> (/home/matt/dev/experiments/nextjs-preact/node_modules/next/dist/shared/lib/utils.js:84:33)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/home/matt/dev/experiments/nextjs-preact/node_modules/@swc/helpers/lib/_async_to_generator.js:23:28)
    at _next (/home/matt/dev/experiments/nextjs-preact/node_modules/@swc/helpers/lib/_async_to_generator.js:12:17)
    at /home/matt/dev/experiments/nextjs-preact/node_modules/@swc/helpers/lib/_async_to_generator.js:17:13 {
  page: '/'
}

At this point I stopped - it's clear there's some proper work here to be done. I think the only route forwards if you really want a next app at this point is to use an older version that's compatible with React 17.0.2

[cheesycod]

any update?

[cheesycod]

?

[superdeveloper]

Any updates ? The only way I have left with reducing the bundle size of my nextjs app is using preact. :D And I shouldn't be alone. Team preact, need to keep up with Nextjs updates. Any response much appreciated.

[cheesycod]

same

[skamarakas]

+1

[marvinhagemeister]

FYI: For everyone coming across this. We gave up on nextjs support a while back as we don't have a full time resource to spare to work on nextjs compat. With React 18 and Preact we're diverging more than we did in the past with us going more in the signals direction, so our focus lies there.

[lfre]

For anyone coming across this. I've been supporting Next.13 with Preact and 14 by patching Next, and now Preact on this repo https://github.com/lfre/next-13-preact. Hope that helps!

[rschristian]

Closing this out as I don't think we'll support this in the near future (if at all).