From bdcca0ccff07c1356b317259b6d9ad5110bed4e6 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Wed, 14 Jun 2023 20:28:18 -0700 Subject: [PATCH] Fix CSS deploy id case (#51325) x-ref: [slack thread](https://vercel.slack.com/archives/C04MEB9L9RQ/p1686787663510239?thread_ts=1686770561.895939&cid=C04MEB9L9RQ) --- .github/workflows/build_and_deploy.yml | 5 +-- packages/next/src/client/app-index.tsx | 35 +++++++++++++------ packages/next/src/client/index.tsx | 32 +++++++++++------ .../deployment-id-handling/app/data.js | 3 ++ .../app/data.module.css | 3 ++ .../deployment-id-handling/app/next.config.js | 5 +++ .../app/pages/index.tsx | 3 +- .../app/pages/styles.module.css | 3 ++ .../deployment-id-handling/app/tsconfig.json | 25 +++++++++++++ .../deployment-id-handling.test.ts | 5 --- 10 files changed, 89 insertions(+), 30 deletions(-) create mode 100644 test/production/deployment-id-handling/app/data.module.css create mode 100644 test/production/deployment-id-handling/app/next.config.js create mode 100644 test/production/deployment-id-handling/app/pages/styles.module.css create mode 100644 test/production/deployment-id-handling/app/tsconfig.json diff --git a/.github/workflows/build_and_deploy.yml b/.github/workflows/build_and_deploy.yml index e9a0d585fa..68991b1b77 100644 --- a/.github/workflows/build_and_deploy.yml +++ b/.github/workflows/build_and_deploy.yml @@ -418,9 +418,6 @@ jobs: NEXT_TELEMETRY_DISABLED: 1 VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }} VERCEL_TEST_TEAM: vtest314-next-e2e-tests - # run all tests so we can see all failures even if - # some flake or aren't patched yet - NEXT_TEST_CONTINUE_ON_ERROR: 1 steps: - uses: actions/cache@v3 timeout-minutes: 5 @@ -439,7 +436,7 @@ jobs: - run: RESET_VC_PROJECT=true node scripts/reset-vercel-project.mjs name: Reset test project - - run: docker run --rm -v $(pwd):/work mcr.microsoft.com/playwright:v1.28.1-jammy /bin/bash -c "cd /work && NODE_VERSION=${{ env.NODE_LTS_VERSION }} ./scripts/setup-node.sh && npm i -g pnpm@${PNPM_VERSION} > /dev/null && VERCEL_TEST_TOKEN=${{ secrets.VERCEL_TEST_TOKEN }} VERCEL_TEST_TEAM=vtest314-next-e2e-tests NEXT_TEST_JOB=1 NEXT_TEST_MODE=deploy TEST_TIMINGS_TOKEN=${{ secrets.TEST_TIMINGS_TOKEN }} xvfb-run node run-tests.js --type e2e >> /proc/1/fd/1" + - run: docker run --rm -v $(pwd):/work mcr.microsoft.com/playwright:v1.28.1-jammy /bin/bash -c "cd /work && NODE_VERSION=${{ env.NODE_LTS_VERSION }} ./scripts/setup-node.sh && npm i -g pnpm@${PNPM_VERSION} > /dev/null && VERCEL_TEST_TOKEN=${{ secrets.VERCEL_TEST_TOKEN }} VERCEL_TEST_TEAM=vtest314-next-e2e-tests NEXT_TEST_JOB=1 NEXT_TEST_MODE=deploy TEST_TIMINGS_TOKEN=${{ secrets.TEST_TIMINGS_TOKEN }} NEXT_TEST_CONTINUE_ON_ERROR=1 xvfb-run node run-tests.js --type e2e >> /proc/1/fd/1" name: Run test/e2e (deploy) - name: Upload test trace diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx index e76d188b29..1bd78e7a78 100644 --- a/packages/next/src/client/app-index.tsx +++ b/packages/next/src/client/app-index.tsx @@ -39,21 +39,36 @@ declare global { const __webpack_require__: any } +const addChunkSuffix = + (getOriginalChunk: (chunkId: any) => string) => (chunkId: any) => { + return ( + getOriginalChunk(chunkId) + + `${ + process.env.__NEXT_DEPLOYMENT_ID + ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}` + : '' + }` + ) + } + // eslint-disable-next-line no-undef const getChunkScriptFilename = __webpack_require__.u const chunkFilenameMap: any = {} // eslint-disable-next-line no-undef -__webpack_require__.u = (chunkId: any) => { - return ( - encodeURI(chunkFilenameMap[chunkId] || getChunkScriptFilename(chunkId)) + - `${ - process.env.__NEXT_DEPLOYMENT_ID - ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}` - : '' - }` - ) -} +__webpack_require__.u = addChunkSuffix((chunkId) => + encodeURI(chunkFilenameMap[chunkId] || getChunkScriptFilename(chunkId)) +) + +// 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. // eslint-disable-next-line no-undef diff --git a/packages/next/src/client/index.tsx b/packages/next/src/client/index.tsx index cef2af77ee..402948ca67 100644 --- a/packages/next/src/client/index.tsx +++ b/packages/next/src/client/index.tsx @@ -63,20 +63,32 @@ declare global { } } +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 -__webpack_require__.u = (chunkId: any) => { - return ( - getChunkScriptFilename(chunkId) + - `${ - process.env.__NEXT_DEPLOYMENT_ID - ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}` - : '' - }` - ) -} +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 diff --git a/test/production/deployment-id-handling/app/data.js b/test/production/deployment-id-handling/app/data.js index 5c7a40e458..a181240ec0 100644 --- a/test/production/deployment-id-handling/app/data.js +++ b/test/production/deployment-id-handling/app/data.js @@ -1,3 +1,6 @@ +import styles from './data.module.css' + export const data = { now: Date.now(), + styles, } diff --git a/test/production/deployment-id-handling/app/data.module.css b/test/production/deployment-id-handling/app/data.module.css new file mode 100644 index 0000000000..cd7bf1da1d --- /dev/null +++ b/test/production/deployment-id-handling/app/data.module.css @@ -0,0 +1,3 @@ +.wrap { + display: flex; +} diff --git a/test/production/deployment-id-handling/app/next.config.js b/test/production/deployment-id-handling/app/next.config.js new file mode 100644 index 0000000000..affa3e6611 --- /dev/null +++ b/test/production/deployment-id-handling/app/next.config.js @@ -0,0 +1,5 @@ +module.exports = { + experimental: { + useDeploymentId: true, + }, +} diff --git a/test/production/deployment-id-handling/app/pages/index.tsx b/test/production/deployment-id-handling/app/pages/index.tsx index 671584dcee..2e0b085973 100644 --- a/test/production/deployment-id-handling/app/pages/index.tsx +++ b/test/production/deployment-id-handling/app/pages/index.tsx @@ -1,10 +1,11 @@ import testImage from '../public/test.jpg' import Image from 'next/image' +import styles from './styles.module.css' export default function Page() { return ( <> -

hello pages

+

hello pages

test image