chore(precompile): re-add watchpack to the precompile (#60309)

Per @styfle suggestion, #58038 has been split into multiple PRs for
easier review.

- Re-add precompile `watchpack`
- Next.js has stopped bundling the `watchpack` since
#50792. Currently, `watchpack` is
a direct dependency of Next.js. The PR adds the pre-compile back.

Co-authored-by: Steven <steven@ceriously.com>

packages/next/package.json

@@ -98,8 +98,7 @@
     "caniuse-lite": "^1.0.30001406",
     "graceful-fs": "^4.2.11",
     "postcss": "8.4.31",
-    "styled-jsx": "5.1.1",
-    "watchpack": "2.4.0"
+    "styled-jsx": "5.1.1"
   },
   "peerDependencies": {
     "@opentelemetry/api": "^1.1.0",

packages/next/src/server/lib/router-utils/setup-dev-bundler.ts

@@ -36,7 +36,7 @@ import fs from 'fs'
 import url from 'url'
 import path from 'path'
 import qs from 'querystring'
-import Watchpack from 'watchpack'
+import Watchpack from 'next/dist/compiled/watchpack'
 import { loadEnvConfig } from '@next/env'
 import isError from '../../../lib/is-error'
 import findUp from 'next/dist/compiled/find-up'
@@ -1870,7 +1870,7 @@ async function startWatcher(opts: SetupOpts) {
         const watchTimeChange =
           watchTime === undefined ||
           (watchTime && watchTime !== meta?.timestamp)
-        fileWatchTimes.set(fileName, meta.timestamp)
+        fileWatchTimes.set(fileName, meta?.timestamp)
 
         if (envFiles.includes(fileName)) {
           if (watchTimeChange) {

packages/next/src/server/lib/start-server.ts

@@ -14,7 +14,7 @@ import path from 'path'
 import http from 'http'
 import https from 'https'
 import os from 'os'
-import Watchpack from 'watchpack'
+import Watchpack from 'next/dist/compiled/watchpack'
 import * as Log from '../../build/output/log'
 import setupDebug from 'next/dist/compiled/debug'
 import { RESTART_EXIT_CODE, checkNodeDebugType, getDebugPort } from './utils'

packages/next/taskfile.js

@@ -569,7 +569,13 @@ export async function ncc_next_font(task, opts) {
 }
 
 // eslint-disable-next-line camelcase
-externals['watchpack'] = 'watchpack'
+externals['watchpack'] = 'next/dist/compiled/watchpack'
+export async function ncc_watchpack(task, opts) {
+  await task
+    .source(relative(__dirname, require.resolve('watchpack')))
+    .ncc({ packageName: 'watchpack', externals })
+    .target('src/compiled/watchpack')
+}
 
 // eslint-disable-next-line camelcase
 externals['jest-worker'] = 'next/dist/compiled/jest-worker'
@@ -2312,6 +2318,7 @@ export async function ncc(task, opts) {
         'ncc_terser',
         'ncc_text_table',
         'ncc_unistore',
+        'ncc_watchpack',
         'ncc_web_vitals',
         'ncc_web_vitals_attribution',
         'ncc_webpack_bundle5',

packages/next/types/misc.d.ts

@@ -174,10 +174,6 @@ declare module 'next/dist/compiled/babel/preset-env' {
   const anyType: any
   export default anyType
 }
-declare module 'watchpack' {
-  const anyType: any
-  export default anyType
-}
 declare module 'next/dist/compiled/babel/core' {
   export * from '@babel/core'
 }