Pre-compile more dependencies (#32742)

This ncc's some remaining dependencies bringing us under 20 install time dependencies (including nested dependencies), this also reduces install size by another `2.75 MB`. A follow-up PR will investigate a custom install script for our swc packages to allow us to remove the `optionalDependencies` which is slowing down install time as well. 

x-ref: #32679
x-ref: #32627
x-ref: #31887
x-ref: vercel/styled-jsx#770

Author: ijjk

packages/next/build/babel/loader/get-config.ts

@@ -77,7 +77,10 @@ function getPlugins(
     : null
   const reactRefreshItem = hasReactRefresh
     ? createConfigItem(
-        [require('react-refresh/babel'), { skipEnvCheck: true }],
+        [
+          require('next/dist/compiled/react-refresh/babel'),
+          { skipEnvCheck: true },
+        ],
         { type: 'plugin' }
       )
     : null

packages/next/build/utils.ts

@@ -4,7 +4,7 @@ import getGzipSize from 'next/dist/compiled/gzip-size'
 import textTable from 'next/dist/compiled/text-table'
 import path from 'path'
 import { promises as fs } from 'fs'
-import { isValidElementType } from 'react-is'
+import { isValidElementType } from 'next/dist/compiled/react-is'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import {
   Redirect,

packages/next/build/webpack-config.ts

@@ -1,4 +1,4 @@
-import ReactRefreshWebpackPlugin from '@next/react-refresh-utils/ReactRefreshWebpackPlugin'
+import ReactRefreshWebpackPlugin from 'next/dist/compiled/@next/react-refresh-utils/ReactRefreshWebpackPlugin'
 import chalk from 'next/dist/compiled/chalk'
 import crypto from 'crypto'
 import { stringify } from 'querystring'
@@ -132,7 +132,8 @@ export function attachReactRefresh(
   targetLoader: webpack.RuleSetUseItem
 ) {
   let injections = 0
-  const reactRefreshLoaderName = '@next/react-refresh-utils/loader'
+  const reactRefreshLoaderName =
+    'next/dist/compiled/@next/react-refresh-utils/loader'
   const reactRefreshLoader = require.resolve(reactRefreshLoaderName)
   webpackConfig.module?.rules.forEach((rule) => {
     const curr = rule.use
@@ -496,7 +497,7 @@ export default async function getBaseWebpackConfig(
         ...(dev
           ? {
               [CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH]: require.resolve(
-                `@next/react-refresh-utils/runtime`
+                `next/dist/compiled/@next/react-refresh-utils/runtime`
               ),
               [CLIENT_STATIC_FILES_RUNTIME_AMP]:
                 `./` +
@@ -638,8 +639,7 @@ export default async function getBaseWebpackConfig(
             process: require.resolve('./polyfills/process'),
             // Handled in separate alias
             querystring: require.resolve('next/dist/compiled/querystring-es3'),
-            // TODO: investigate ncc'ing stream-browserify
-            stream: require.resolve('stream-browserify'),
+            stream: require.resolve('next/dist/compiled/stream-browserify'),
             string_decoder: require.resolve(
               'next/dist/compiled/string_decoder'
             ),
@@ -912,7 +912,8 @@ export default async function getBaseWebpackConfig(
     const externalType = isEsm ? 'module' : 'commonjs'
 
     if (
-      res.match(/next[/\\]dist[/\\]shared[/\\](?!lib[/\\]router[/\\]router)/)
+      res.match(/next[/\\]dist[/\\]shared[/\\](?!lib[/\\]router[/\\]router)/) ||
+      res.match(/next[/\\]dist[/\\]compiled[/\\].*\.[mc]?js$/)
     ) {
       return `${externalType} ${request}`
     }
@@ -1245,7 +1246,9 @@ export default async function getBaseWebpackConfig(
               ...codeCondition,
               use: hasReactRefresh
                 ? [
-                    require.resolve('@next/react-refresh-utils/loader'),
+                    require.resolve(
+                      'next/dist/compiled/@next/react-refresh-utils/loader'
+                    ),
                     defaultLoaders.babel,
                   ]
                 : defaultLoaders.babel,

packages/next/build/webpack/plugins/terser-webpack-plugin/src/index.js

@@ -6,7 +6,7 @@ import {
   sources,
 } from 'next/dist/compiled/webpack/webpack'
 import pLimit from 'next/dist/compiled/p-limit'
-import { Worker } from 'jest-worker'
+import { Worker } from 'next/dist/compiled/jest-worker'
 import { spans } from '../../profiling-plugin'
 
 function getEcmaVersion(environment) {

packages/next/build/webpack/require-hook.ts

@@ -125,6 +125,7 @@ const hookPropertyMap = new Map(
       '@babel/runtime/package.json',
       'next/dist/compiled/@babel/runtime/package.json',
     ],
+    ['node-fetch', 'next/dist/compiled/node-fetch'],
   ].map(([request, replacement]) => [request, require.resolve(replacement)])
 )
 

packages/next/client/index.tsx

@@ -330,7 +330,7 @@ export async function initNext(opts: { webpackHMR?: any } = {}) {
     CachedComponent = pageEntrypoint.component
 
     if (process.env.NODE_ENV !== 'production') {
-      const { isValidElementType } = require('react-is')
+      const { isValidElementType } = require('next/dist/compiled/react-is')
       if (!isValidElementType(CachedComponent)) {
         throw new Error(
           `The default export is not a React Component in page: "${page}"`