[12.0.4-canary.2], Preact - Local dev server fails with Error: Cannot find module 'scheduler/package.json'

[neeraj3029]

What version of Next.js are you using?

12.0.4-canaray.2 to 12.0.4-canaray.4

What version of Node.js are you using?

14.17.6

What browser are you using?

chrome

What operating system are you using?

macOS

How are you deploying your application?

.

Describe the Bug

Local dev server stops with an error: Error: Cannot find module 'scheduler/package.json'.

I assume this comes in relation with the recent changes in this line in webocket-config.js.

I believe we scheduler must be removed from topLevelFrameworkPaths to make it work correctly.

Complete error:

Error: Cannot find module 'scheduler/package.json'
Require stack:
- /Users/<path>/node_modules/next/dist/build/webpack-config.js
- /Users/<path>/node_modules/next/dist/server/dev/hot-reloader.js
- /Users/<path>/node_modules/next/dist/server/dev/next-dev-server.js
- /Users/<path>/node_modules/next/dist/server/next.js
- /Users/<path>/node_modules/next/dist/server/lib/start-server.js
- /Users/<path>/node_modules/next/dist/cli/next-dev.js
- /Users/<path>/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.mod._resolveFilename (/Users//<path>/node_modules/next/dist/build/webpack/require-hook.js:171:28)
    at Function.resolve (internal/modules/cjs/helpers.js:98:19)
    at getPackagePath (/Users/<path>/node_modules/next/dist/build/webpack-config.js:601:41)
    at Object.getBaseWebpackConfig [as default] (/Users/<path>/node_modules/next/dist/build/webpack-config.js:619:9)
    at async Promise.all (index 0)
    at async Span.traceAsyncFn (/Users/<path>/node_modules/next/dist/trace/trace.js:74:20)
    at async Span.traceAsyncFn (/Users/<path>/node_modules/next/dist/trace/trace.js:74:20)
    at async HotReloader.start (/Users/n<path>/node_modules/next/dist/server/dev/hot-reloader.js:325:25)
    at async DevServer.prepare (/Users/<path>/node_modules/next/dist/server/dev/next-dev-server.js:290:9) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/<path>/node_modules/next/dist/build/webpack-config.js',
    '/Users/<path>/node_modules/next/dist/server/dev/hot-reloader.js',
    '/Users<path>/node_modules/next/dist/server/dev/next-dev-server.js',
    '/Users/<path>/node_modules/next/dist/server/next.js',
    '/Users/<path>/node_modules/next/dist/server/lib/start-server.js',
    '/Users/<path>/node_modules/next/dist/cli/next-dev.js',
    '/Users/<path>p/node_modules/next/dist/bin/next'
  ]
}

To Reproduce

Package manager: yarn
dependencies:

"dependencies": {
    "next": "12.0.4-canary.2",
    "preact": "^10.5.13",
    "preact-render-to-string": "^5.1.19",
    "react": "npm:@preact/compat@^0.0.4",
    "react-dom": "npm:@preact/compat@^0.0.4"
  },

Upgrade next.js to version >= 12.0.4-canary.2.

[neeraj3029]

Hi @ijjk @elliottsj, I think concerns PR #21048

Should scheduler be removed from topLevelFrameworkPaths array? If yes, I'd be happy to send a PR for quick fix.

[elliottsj]

@neeraj3029 Can you provide a full repro? Which package manager are you using?

[neeraj3029]

Sure, I'm using yarn.
I created an application use create-next-app and set the next version to 12.0.4-canary.2, and started the server with yarn dev.

Edit: I am using preact instead of react, sorry for not mentioning it earlier

[neeraj3029]

Dependencies:

"dependencies": {
    "next": "12.0.4-canary.2",
    "preact": "^10.5.13",
    "preact-render-to-string": "^5.1.19",
    "react": "npm:@preact/compat@^0.0.4",
    "react-dom": "npm:@preact/compat@^0.0.4"
  },

[elliottsj]

Ah, I see. The override of react-dom with @preact/compat seems to be the issue, because the former has a dependency on scheduler, but the latter does not.

I am not sure if Vercel wants to officially support the use case of replacing the react / react-dom dependencies with a Preact compat layer.

As a workaround, you could define a webpack config in next.config.js which overrides the splitChunks.cacheGroups.framework.test function with a Preact-appropriate implementation.

[elliottsj]

Looks like Preact is supported by Next.js based on the presence of the example project.

I threw together a rough patch which may or may not work:

--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -755,9 +755,24 @@ export default async function getBaseWebpackConfig(
   }

   const getPackagePath = (name: string, relativeToPath: string) => {
-    const packageJsonPath = require.resolve(`${name}/package.json`, {
-      paths: [relativeToPath],
-    })
+    let packageJsonPath = ''
+    try {
+      packageJsonPath = require.resolve(`${name}/package.json`, {
+        paths: [relativeToPath],
+      })
+    } catch (error) {
+      // There are acceptable cases when the package with `name` is not found. e.g. when
+      // substituting 'react-dom' for '@preact/compat', the 'scheduler' package is not found
+      // relative to 'react-dom'.
+      // See: https://github.com/vercel/next.js/issues/31240
+      console.warn(
+        `Dependency '${name}' was not found relative to ${relativeToPath}. ` +
+          `Dependencies declared by the parent package may have changed, or the parent package has ` +
+          `been substituted for a compatible replacement (such as react-dom and @preact/compat). ` +
+          `Optimized chunk splitting will be unavailable for '${name}'.`
+      )
+      return ''
+    }
     // Include a trailing slash so that a `.startsWith(packagePath)` check avoids false positives
     // when one package name starts with the full name of a different package.
     // For example:
@@ -782,7 +797,7 @@ export default async function getBaseWebpackConfig(
       'use-subscription',
       require.resolve('next', { paths: [dir] })
     ),
-  ]
+  ].filter(Boolean)

   // Select appropriate SplitChunksPlugin config for this build
   const splitChunksConfig: webpack.Options.SplitChunksOptions | false = dev

Feel free to test it out and/or submit it as a pull request.

[neeraj3029]

Catching the error works. I'll share a PR too in some time!

[neeraj3029]

Hi @elliottsj, I was trying to do a workaround at my end while the PR is still in review.

It seems mutating the splitChunks.cacheGroups.framework.test function via webpack-config in next.config.js will not be much helpful, as getPackagePath is getting called from outside that function, when topLevelFrameworkPaths array is being initialized.

In my mind, I think shifting this array to splitChunks.cacheGroups.framework would be useful as one can update the array as per their needs through webpack-config. Thoughts?

[elliottsj]

In my mind, I think shifting this array to splitChunks.cacheGroups.framework would be useful as one can update the array as per their needs through webpack-config. Thoughts?

Makes sense to me 👍

[bcheidemann]

I have the same issue. My workaround until this is fixed is installing scheduler with npm install scheduler.

[balazsorban44]

This actually seems to be an issue in the next-plugin-preact package and is already reported here: preactjs/next-plugin-preact#49

[neeraj3029]

This actually seems to be an issue in the next-plugin-preact package and is already reported here: preactjs/next-plugin-preact#49

This is indeed not an issue with the next-preact-plugin, instead it occurs because next.js tries to split the package 'scheduler' package in the framework chunk, and the package is unavailable in preact, hence the error.

This PR #31264 tries to fix this issue, it'll be great to have reviews on this

[ijjk]

Hi, this has been updated in v12.0.11-canary.7 of Next.js, please update and give it a try!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.