next-plugin-preact icon indicating copy to clipboard operation
next-plugin-preact copied to clipboard

Published 20 hours ago • verified publisher icon preactjs

[BUG] fails in dev mode under monorepo structure

Open raulfdm opened this issue 3 years ago • 1 comments

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/*.

Full error log 
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

Main repo error log 
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

https://user-images.githubusercontent.com/12464600/118229794-e8dab300-b48c-11eb-9dce-5761d55dd806.mp4

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

raulfdm avatar May 14 '21 06:05 raulfdm

Update: if I try conditionally add withPreact (based on NODE_ENV prod), I then get another error which makes sense with the dependencies I've installed:

event - build page: /next/dist/pages/_error
TypeError: Cannot read property '__H' of undefined
    at p (/home/raulmelo/development/raulmelo-studio/node_modules/preact/hooks/dist/hooks.js:1:194)

raulfdm avatar May 14 '21 06:05 raulfdm