From 51d962d60f19056eab4f1d6be44310b8f7aeaddd Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sat, 7 May 2022 15:37:14 +0200 Subject: [PATCH] Leverage pageExtensions for resolving in loader (#36747) ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` --- packages/next/build/entries.ts | 26 +++++++++++++------ packages/next/build/index.ts | 1 + .../build/webpack/loaders/next-view-loader.ts | 26 ++++++++----------- packages/next/server/dev/hot-reloader.ts | 3 +++ 4 files changed, 33 insertions(+), 23 deletions(-) diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts index 3adfc98268df..c93a660e4dd9 100644 --- a/packages/next/build/entries.ts +++ b/packages/next/build/entries.ts @@ -245,6 +245,7 @@ interface CreateEntrypointsParams { target: 'server' | 'serverless' | 'experimental-serverless-trace' viewsDir?: string viewPaths?: Record + pageExtensions: string[] } export function getEdgeServerEntry(opts: { @@ -285,13 +286,12 @@ export function getEdgeServerEntry(opts: { return `next-middleware-ssr-loader?${stringify(loaderParams)}!` } -export function getViewsEntry(opts: { pagePath: string; viewsDir: string }) { - const loaderParams = { - pagePath: opts.pagePath, - viewsDir: opts.viewsDir, - } - - return `next-view-loader?${stringify(loaderParams)}!` +export function getViewsEntry(opts: { + pagePath: string + viewsDir: string + pageExtensions: string[] +}) { + return `next-view-loader?${stringify(opts)}!` } export function getServerlessEntry(opts: { @@ -358,7 +358,16 @@ export function getClientEntry(opts: { } export async function createEntrypoints(params: CreateEntrypointsParams) { - const { config, pages, pagesDir, isDev, target, viewsDir, viewPaths } = params + const { + config, + pages, + pagesDir, + isDev, + target, + viewsDir, + viewPaths, + pageExtensions, + } = params const edgeServer: webpack5.EntryObject = {} const server: webpack5.EntryObject = {} const client: webpack5.EntryObject = {} @@ -401,6 +410,7 @@ export async function createEntrypoints(params: CreateEntrypointsParams) { server[serverBundlePath] = getViewsEntry({ pagePath: mappings[page], viewsDir, + pageExtensions, }) } else if (isTargetLikeServerless(target)) { if (page !== '/_app' && page !== '/_document') { diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts index 5884545a12ed..187ac67d8218 100644 --- a/packages/next/build/index.ts +++ b/packages/next/build/index.ts @@ -376,6 +376,7 @@ export default async function build( target, viewsDir, viewPaths: mappedViewPaths, + pageExtensions: config.pageExtensions, }) ) diff --git a/packages/next/build/webpack/loaders/next-view-loader.ts b/packages/next/build/webpack/loaders/next-view-loader.ts index 6085337c49b9..1f4ca331584f 100644 --- a/packages/next/build/webpack/loaders/next-view-loader.ts +++ b/packages/next/build/webpack/loaders/next-view-loader.ts @@ -37,26 +37,22 @@ async function resolveLayoutPathsByPage({ return layoutPaths } -const extensions = [ - ...NODE_RESOLVE_OPTIONS.extensions, - ...NODE_RESOLVE_OPTIONS.extensions.map((ext) => `.server${ext}`), - ...NODE_RESOLVE_OPTIONS.extensions.map((ext) => `.client${ext}`), -] -const resolveOptions: any = { - ...NODE_RESOLVE_OPTIONS, - extensions, -} - const nextViewLoader: webpack.LoaderDefinitionFunction<{ pagePath: string viewsDir: string + pageExtensions: string[] }> = async function nextViewLoader() { - const loaderOptions = this.getOptions() || {} + const { viewsDir, pagePath, pageExtensions } = this.getOptions() || {} + + const extensions = pageExtensions.map((extension) => `.${extension}`) + const resolveOptions: any = { + ...NODE_RESOLVE_OPTIONS, + extensions, + } const resolve = this.getResolve(resolveOptions) - const viewsDir = loaderOptions.viewsDir const layoutPaths = await resolveLayoutPathsByPage({ - pagePath: loaderOptions.pagePath, + pagePath: pagePath, resolve: async (pathname) => { try { return await resolve(this.rootContext, pathname) @@ -87,11 +83,11 @@ const nextViewLoader: webpack.LoaderDefinitionFunction<{ // Add page itself to the list of components componentsCode.push( - `'${pathToUrlPath(loaderOptions.pagePath).replace( + `'${pathToUrlPath(pagePath).replace( new RegExp(`/page\\.+(${extensions.join('|')})$`), '' // use require so that we can bust the require cache - )}': () => require('${loaderOptions.pagePath}')` + )}': () => require('${pagePath}')` ) const result = ` diff --git a/packages/next/server/dev/hot-reloader.ts b/packages/next/server/dev/hot-reloader.ts index 2fa7844e8f09..8d8e7651f76a 100644 --- a/packages/next/server/dev/hot-reloader.ts +++ b/packages/next/server/dev/hot-reloader.ts @@ -421,6 +421,7 @@ export default class HotReloader { pagesDir: this.pagesDir, previewMode: this.previewProps, target: 'server', + pageExtensions: this.config.pageExtensions, }) ) @@ -488,6 +489,7 @@ export default class HotReloader { pagesDir: this.pagesDir, previewMode: this.previewProps, target: 'server', + pageExtensions: this.config.pageExtensions, }) ).client, hasReactRoot: this.hasReactRoot, @@ -605,6 +607,7 @@ export default class HotReloader { relative(this.viewsDir!, absolutePagePath) ), viewsDir: this.viewsDir!, + pageExtensions: this.config.pageExtensions, }) : request, })