TypeError: Cannot read property 'tap' of undefined

Error

I was trying your example, using this package.json (1)

{
  "name": "nextjs-preact-demo",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build && next export -o build",
    "start": "NODE_ENV=production next start"
  },
  "devDependencies": {
    "@prefresh/next": "1.4.4"
  },
  "dependencies": {
    "@prefresh/webpack": "3.0.1",
    "next": "^9.5.4",
    "preact": "^10.5.7",
    "preact-render-to-string": "^5.1.4",
    "react": "npm:@preact/compat",
    "react-dom": "npm:@preact/compat",
    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.0.1",
    "webpack": "^5.0.0-beta.22"
  },
  "license": "MIT"
}

And then npm run dev throws the following error:

> nextjs-preact-demo@1.0.0 dev
> next

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

ready - started server on http://localhost:3000
TypeError: Cannot read property 'tap' of undefined
    at E:\projects\js\hell\example\node_modules\@prefresh\webpack\src\index.js:78:61
    at SyncHook.eval [as call] (eval at create (E:\projects\js\hell\example\node_modules\next\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (E:\projects\js\hell\example\node_modules\next\node_modules\tapable\lib\Hook.js:154:20)
npx browserslist@latest --update-db
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

ready - started server on http://localhost:3000
TypeError: Cannot read property 'tap' of undefined
    at E:\projects\js\hell\example\node_modules\@prefresh\webpack\src\index.js:78:61
    at SyncHook.eval [as call] (eval at create (E:\projects\js\hell\example\node_modules\next\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (E:\projects\js\hell\example\node_modules\next\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.newCompilation (E:\projects\js\hell\example\node_modules\next\node_modules\webpack\lib\Compiler.js:631:26)
    at E:\projects\js\hell\example\node_modules\next\node_modules\webpack\lib\Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\projects\js\hell\example\node_modules\next\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (E:\projects\js\hell\example\node_modules\next\node_modules\tapable\lib\Hook.js:154:20)
    at Compiler.compile (E:\projects\js\hell\example\node_modules\next\node_modules\webpack\lib\Compiler.js:662:28)
    at E:\projects\js\hell\example\node_modules\next\node_modules\webpack\lib\Watching.js:77:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\projects\js\hell\example\node_modules\next\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:13:1)
npm ERR! code 1
npm ERR! path E:\projects\js\hell\example
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c next

Reproduction

Clone your example Replace the existing package.json by (1) Run npm i Run npm run dev

Spec

Windows 10 npm v7.5.4

---

Now it’s been 2 days that I’ve been trying to find the right config to run nextjs + preact (with hooks) + hot-reloading. What a pain. Anyway. 💩 Am I doing something wrong? Am I using the wrong versions? Thank you in advance for your help

[JoviDeCroock]

Hey @geisterfurz007 very much appreciated, I also worked on an error message when we are working with differing versions of webpack 😃

[geisterfurz007]

Just as an update; this occurs between very wild package resolution which are not caused by this package. Storybook declares react and react-dom as dependencies which seem to be picked up by next for some reason. If I no-hoist both those packages, next doesn’t start anymore because it cannot find react which for no reason is in packages/web/node_modules instead of node_modules where react-dom sits. Either way this appears to be an issue with Yarn or Next or not sure what and not this plugin 😃

If I finally figure out how to set things up so that next and storybook work next to each other, I will update this post to maybe help someone in the future (or be able to look it up myself).
I ended up using nohoist: ["next", "next/**"] in my web package (that contains the next page) of the monorepo. This reliably makes next use the aliased packages while storybook still works with its desired actual react packages.