diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index fcbcbebe6f9e348..da365f2285f04c8 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -426,25 +426,27 @@ export default async function getBaseWebpackConfig(
     )
   }
 
-  const getPackagePath = (name: string, contextDirectory: string) => {
+  const getPackagePath = (name: string, relativeToPath: string) => {
     const packageJsonPath = require.resolve(`${name}/package.json`, {
-      paths: [contextDirectory],
+      paths: [relativeToPath],
     })
     return path.dirname(packageJsonPath)
   }
 
-  const nextPackagePath = getPackagePath('next', dir)
-  const reactPackagePath = getPackagePath('react', dir)
+  // const nextPackageMainPath = require.resolve('next', { paths: [dir] });
 
   // Packages which will be split into the 'framework' chunk.
   // Only top-level packages are included, e.g. nested copies like
   // 'node_modules/react-scroll-parallax/node_modules/prop-types' are not included.
   const topLevelFrameworkPaths = [
-    reactPackagePath,
+    getPackagePath('react', dir),
     getPackagePath('react-dom', dir),
-    getPackagePath('scheduler', reactPackagePath),
-    getPackagePath('prop-types', nextPackagePath),
-    getPackagePath('use-subscription', nextPackagePath),
+    getPackagePath('scheduler', require.resolve('react', { paths: [dir] })),
+    getPackagePath('prop-types', require.resolve('next', { paths: [dir] })),
+    getPackagePath(
+      'use-subscription',
+      require.resolve('next', { paths: [dir] })
+    ),
   ]
 
   // Contains various versions of the Webpack SplitChunksPlugin used in different build types