From 4558fac29b5108807f9423d2a32e261125e1f134 Mon Sep 17 00:00:00 2001 From: Tobias Koppers Date: Mon, 24 Jul 2023 21:07:58 +0200 Subject: [PATCH] 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. --- .../js/src/build/client/app-bootstrap.ts | 2 +- .../js/src/build/client/bootstrap.ts | 24 +++++++++++-- .../next-core/js/src/build/client/shims.ts | 11 ------ .../next-core/js/src/entry/next-hydrate.tsx | 1 + .../next-core/js/src/internal/shims-client.ts | 10 ------ packages/next/src/client/index.tsx | 36 +------------------ packages/next/src/client/next-dev.ts | 1 + packages/next/src/client/next.ts | 1 + packages/next/src/client/webpack.ts | 36 +++++++++++++++++++ 9 files changed, 63 insertions(+), 59 deletions(-) delete mode 100644 packages/next-swc/crates/next-core/js/src/build/client/shims.ts create mode 100644 packages/next/src/client/webpack.ts diff --git a/packages/next-swc/crates/next-core/js/src/build/client/app-bootstrap.ts b/packages/next-swc/crates/next-core/js/src/build/client/app-bootstrap.ts index 6b4da5f7934bd..30bceae31aa47 100644 --- a/packages/next-swc/crates/next-core/js/src/build/client/app-bootstrap.ts +++ b/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' diff --git a/packages/next-swc/crates/next-core/js/src/build/client/bootstrap.ts b/packages/next-swc/crates/next-core/js/src/build/client/bootstrap.ts index a67e10a12624c..12e81a2415734 100644 --- a/packages/next-swc/crates/next-core/js/src/build/client/bootstrap.ts +++ b/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) diff --git a/packages/next-swc/crates/next-core/js/src/build/client/shims.ts b/packages/next-swc/crates/next-core/js/src/build/client/shims.ts deleted file mode 100644 index 15e50de625351..0000000000000 --- a/packages/next-swc/crates/next-core/js/src/build/client/shims.ts +++ /dev/null @@ -1,11 +0,0 @@ -import '../shims' - -// 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 diff --git a/packages/next-swc/crates/next-core/js/src/entry/next-hydrate.tsx b/packages/next-swc/crates/next-core/js/src/entry/next-hydrate.tsx index dd83c3d0c923c..94e32fff86d2a 100644 --- a/packages/next-swc/crates/next-core/js/src/entry/next-hydrate.tsx +++ b/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') { diff --git a/packages/next-swc/crates/next-core/js/src/internal/shims-client.ts b/packages/next-swc/crates/next-core/js/src/internal/shims-client.ts index b27bd5ce7c25c..e0681bed28d29 100644 --- a/packages/next-swc/crates/next-core/js/src/internal/shims-client.ts +++ b/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 diff --git a/packages/next/src/client/index.tsx b/packages/next/src/client/index.tsx index d1b1140616976..8b9a13e870544 100644 --- a/packages/next/src/client/index.tsx +++ b/packages/next/src/client/index.tsx @@ -49,8 +49,6 @@ import onRecoverableError from './on-recoverable-error' /// -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({ diff --git a/packages/next/src/client/next-dev.ts b/packages/next/src/client/next-dev.ts index 6a4a6c059d2e2..f767823092541 100644 --- a/packages/next/src/client/next-dev.ts +++ b/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' diff --git a/packages/next/src/client/next.ts b/packages/next/src/client/next.ts index 3e85e1b0cca56..3a832b9f8c56d 100644 --- a/packages/next/src/client/next.ts +++ b/packages/next/src/client/next.ts @@ -1,3 +1,4 @@ +import './webpack' import { initialize, hydrate, version, router, emitter } from './' declare global { diff --git a/packages/next/src/client/webpack.ts b/packages/next/src/client/webpack.ts new file mode 100644 index 0000000000000..23bb24ba2f7b4 --- /dev/null +++ b/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 +}