move webpack specific logic into a separate file (#53114)

### What?

move webpack specific code out of the `client/index.ts` file

### Why?

sharing with turbopack. Avoiding extra shims to fake webpack.

packages/next-swc/crates/next-core/js/src/build/client/app-bootstrap.ts

@@ -2,5 +2,5 @@
  * This is the runtime entry point for Next.js App Router client-side bundles.
  */
 
-import './shims'
+import '../shims'
 import 'next/dist/client/app-next'

packages/next-swc/crates/next-core/js/src/build/client/bootstrap.ts

@@ -2,5 +2,25 @@
  * This is the runtime entry point for Next.js Page Router client-side bundles.
  */
 
-import './shims'
-import 'next/dist/client/next'
+import '../shims'
+import { initialize, hydrate, version, router, emitter } from 'next/dist/client'
+
+declare global {
+  interface Window {
+    next: any
+  }
+}
+
+window.next = {
+  version: `${version}-turbo`,
+  // router is initialized later so it has to be live-binded
+  get router() {
+    return router
+  },
+  emitter,
+}
+;(self as any).__next_set_public_path__ = () => {}
+
+initialize({})
+  .then(() => hydrate())
+  .catch(console.error)

packages/next-swc/crates/next-core/js/src/entry/next-hydrate.tsx

@@ -9,6 +9,7 @@ import {
 import { formatWithValidation } from 'next/dist/shared/lib/router/utils/format-url'
 import { initializeHMR } from '../dev/client'
 import { subscribeToUpdate } from '@vercel/turbopack-ecmascript-runtime/dev/client/hmr-client'
+;(self as any).__next_set_public_path__ = () => {}
 
 async function loadPageChunk(assetPrefix: string, chunkData: ChunkData) {
   if (typeof chunkData === 'string') {

packages/next-swc/crates/next-core/js/src/internal/shims-client.ts

@@ -7,13 +7,3 @@ process.env.NODE_ENV = 'development'
 
 // This is a fix for web-vitals.js not being linked properly.
 globalThis.__dirname = ''
-
-// Next uses __webpack_require__ extensively.
-globalThis.__webpack_require__ = (name) => {
-  console.error(
-    `__webpack_require__ is not implemented (when requiring ${name})`
-  )
-}
-
-// initialize() needs `__webpack_public_path__` to be defined.
-globalThis.__webpack_public_path__ = undefined

packages/next/src/client/index.tsx

@@ -49,8 +49,6 @@ import onRecoverableError from './on-recoverable-error'
 
 /// <reference types="react-dom/experimental" />
 
-declare let __webpack_public_path__: string
-
 declare global {
   interface Window {
     /* test fns */
@@ -62,34 +60,6 @@ declare global {
     __NEXT_P: any[]
   }
 }
-
-const addChunkSuffix =
-  (getOriginalChunk: (chunkId: any) => string) => (chunkId: any) => {
-    return (
-      getOriginalChunk(chunkId) +
-      `${
-        process.env.NEXT_DEPLOYMENT_ID
-          ? `?dpl=${process.env.NEXT_DEPLOYMENT_ID}`
-          : ''
-      }`
-    )
-  }
-
-// ensure dynamic imports have deployment id added if enabled
-const getChunkScriptFilename = __webpack_require__.u
-// eslint-disable-next-line no-undef
-__webpack_require__.u = addChunkSuffix(getChunkScriptFilename)
-
-// eslint-disable-next-line no-undef
-const getChunkCssFilename = __webpack_require__.k
-// eslint-disable-next-line no-undef
-__webpack_require__.k = addChunkSuffix(getChunkCssFilename)
-
-// eslint-disable-next-line no-undef
-const getMiniCssFilename = __webpack_require__.miniCssF
-// eslint-disable-next-line no-undef
-__webpack_require__.miniCssF = addChunkSuffix(getMiniCssFilename)
-
 type RenderRouteInfo = PrivateRouteInfo & {
   App: AppComponent
   scroll?: { x: number; y: number } | null
@@ -122,10 +92,6 @@ let webpackHMR: any
 let CachedApp: AppComponent, onPerfEntry: (metric: any) => void
 let CachedComponent: React.ComponentType
 
-  // Ignore the module ID transform in client.
-  // @ts-ignore
-;(self as any).__next_require__ = __webpack_require__
-
 class Container extends React.Component<{
   children?: React.ReactNode
   fn: (err: Error, info?: any) => void
@@ -234,7 +200,7 @@ export async function initialize(opts: { webpackHMR?: any } = {}): Promise<{
   const prefix: string = initialData.assetPrefix || ''
   // With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
   // So, this is how we do it in the client side at runtime
-  __webpack_public_path__ = `${prefix}/_next/` //eslint-disable-line
+  ;(self as any).__next_set_public_path__(`${prefix}/_next/`) //eslint-disable-line
 
   // Initialize next/config with the environment configuration
   setConfig({

packages/next/src/client/next-dev.ts

@@ -1,4 +1,5 @@
 // TODO: Remove use of `any` type.
+import './webpack'
 import { initialize, hydrate, version, router, emitter } from './'
 import initOnDemandEntries from './dev/on-demand-entries-client'
 import initWebpackHMR from './dev/webpack-hot-middleware-client'

packages/next/src/client/next.ts

@@ -1,3 +1,4 @@
+import './webpack'
 import { initialize, hydrate, version, router, emitter } from './'
 
 declare global {

packages/next/src/client/webpack.ts

@@ -0,0 +1,36 @@
+declare let __webpack_public_path__: string
+
+const addChunkSuffix =
+  (getOriginalChunk: (chunkId: any) => string) => (chunkId: any) => {
+    return (
+      getOriginalChunk(chunkId) +
+      `${
+        process.env.NEXT_DEPLOYMENT_ID
+          ? `?dpl=${process.env.NEXT_DEPLOYMENT_ID}`
+          : ''
+      }`
+    )
+  }
+
+// ensure dynamic imports have deployment id added if enabled
+const getChunkScriptFilename = __webpack_require__.u
+// eslint-disable-next-line no-undef
+__webpack_require__.u = addChunkSuffix(getChunkScriptFilename)
+
+// eslint-disable-next-line no-undef
+const getChunkCssFilename = __webpack_require__.k
+// eslint-disable-next-line no-undef
+__webpack_require__.k = addChunkSuffix(getChunkCssFilename)
+
+// eslint-disable-next-line no-undef
+const getMiniCssFilename = __webpack_require__.miniCssF
+// eslint-disable-next-line no-undef
+__webpack_require__.miniCssF = addChunkSuffix(getMiniCssFilename)
+
+// Ignore the module ID transform in client.
+// @ts-ignore
+;(self as any).__next_require__ = __webpack_require__
+;(self as any).__next_set_public_path__ = (path: string) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  __webpack_public_path__ = path
+}