next.js
fix(next@15): use the asset prefix when loading a CSS in App Router
#72095
Merged
Overview
Commits
5
Changes
View On GitHub

fix(next@15): use the asset prefix when loading a CSS in App Router #72095

ijjk merged 5 commits into vercel:canary from noreiller:fix-dynamic-css-with-asset-prefix
noreiller
noreiller202 days ago (edited 194 days ago)

What

This PR fixes a bug when using next@15, next/dynamic and assetPrefix config in App Router.

Why

The current behavior loads the CSS with only the pathname and so, it results with a 404.

How

The new behavior uses the full url of the asset.

Fixes #72470

ijjk ijjk added tests
ijjk ijjk added type: next
ijjk
ijjk202 days ago (edited 159 days ago)

Allow CI Workflow Run

  • approve CI run for commit: 761a02c

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

noreiller noreiller changed the title fix(next): use the asset prefix when loading a CSS in App Router fix(next@15): use the asset prefix when loading a CSS in App Router 202 days ago
ijjk
ijjk202 days ago (edited 159 days ago)

Tests Passed

ijjk
ijjk202 days ago (edited 159 days ago)

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
buildDuration 18.6s 15.6s N/A
buildDurationCached 14.7s 12.3s N/A
nodeModulesSize 410 MB 410 MB ⚠️ +1.05 kB
nextStartRea..uration (ms) 468ms 467ms N/A
Client Bundles (main, webpack)
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
1187-HASH.js gzip 50.8 kB 50.8 kB N/A
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.36 kB 5.36 kB N/A
bccd1874-HASH.js gzip 53 kB 53 kB N/A
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 232 B 235 B N/A
main-HASH.js gzip 34 kB 34 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 0 B 0 B ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB ✓
Overall change 39.4 kB 39.4 kB ✓
Client Pages
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
_app-HASH.js gzip 193 B 193 B ✓
_error-HASH.js gzip 193 B 193 B ✓
amp-HASH.js gzip 512 B 510 B N/A
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB ✓
edge-ssr-HASH.js gzip 265 B 265 B ✓
head-HASH.js gzip 363 B 362 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.49 kB 4.49 kB N/A
index-HASH.js gzip 268 B 268 B ✓
link-HASH.js gzip 2.35 kB 2.34 kB N/A
routerDirect..HASH.js gzip 328 B 328 B ✓
script-HASH.js gzip 397 B 397 B ✓
withRouter-HASH.js gzip 323 B 326 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 3.59 kB 3.59 kB ✓
Client Build Manifests
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
_buildManifest.js gzip 747 B 746 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
index.html gzip 524 B 522 B N/A
link.html gzip 539 B 537 B N/A
withRouter.html gzip 520 B 519 B N/A
Overall change 0 B 0 B ✓
Edge SSR bundle Size
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
edge-ssr.js gzip 128 kB 128 kB N/A
page.js gzip 203 kB 203 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
middleware-b..fest.js gzip 671 B 666 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.2 kB 31.2 kB N/A
edge-runtime..pack.js gzip 844 B 844 B ✓
Overall change 844 B 844 B ✓
Next Runtimes
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
523-experime...dev.js gzip 322 B 322 B ✓
523.runtime.dev.js gzip 314 B 314 B ✓
app-page-exp...dev.js gzip 323 kB 323 kB ✓
app-page-exp..prod.js gzip 127 kB 127 kB ✓
app-page-tur..prod.js gzip 140 kB 140 kB ✓
app-page-tur..prod.js gzip 135 kB 135 kB ✓
app-page.run...dev.js gzip 313 kB 313 kB ✓
app-page.run..prod.js gzip 123 kB 123 kB ✓
app-route-ex...dev.js gzip 37.3 kB 37.3 kB ✓
app-route-ex..prod.js gzip 25.4 kB 25.4 kB ✓
app-route-tu..prod.js gzip 25.4 kB 25.4 kB ✓
app-route-tu..prod.js gzip 25.2 kB 25.2 kB ✓
app-route.ru...dev.js gzip 38.9 kB 38.9 kB ✓
app-route.ru..prod.js gzip 25.2 kB 25.2 kB ✓
pages-api-tu..prod.js gzip 9.67 kB 9.67 kB ✓
pages-api.ru...dev.js gzip 11.6 kB 11.6 kB ✓
pages-api.ru..prod.js gzip 9.66 kB 9.66 kB ✓
pages-turbo...prod.js gzip 21.7 kB 21.7 kB ✓
pages.runtim...dev.js gzip 27.4 kB 27.4 kB ✓
pages.runtim..prod.js gzip 21.7 kB 21.7 kB ✓
server.runti..prod.js gzip 916 kB 916 kB ✓
Overall change 2.36 MB 2.36 MB ✓
build cache Overall increase ⚠️
vercel/next.js canary noreiller/next.js fix-dynamic-css-with-asset-prefix Change
0.pack gzip 2.05 MB 2.05 MB ⚠️ +3.63 kB
index.pack gzip 72.6 kB 71.4 kB N/A
Overall change 2.05 MB 2.05 MB ⚠️ +3.63 kB
Diff details
Diff for main-HASH.js

Diff too large to display

Commit: 7992f33
noreiller noreiller force pushed from 6fd4fcab to 4b07171f 197 days ago
noreiller noreiller force pushed from 4b07171f to 6651e4dd 197 days ago
noreiller noreiller force pushed from 6651e4dd to c86a2acd 195 days ago
noreiller
noreiller noreiller closed this 194 days ago
noreiller noreiller deleted the fix-dynamic-css-with-asset-prefix branch 194 days ago
noreiller noreiller restored the head branch 194 days ago
noreiller noreiller reopened this 194 days ago
noreiller noreiller force pushed from c86a2acd to d0a7744d 194 days ago
noreiller noreiller force pushed from d0a7744d to 07d4a736 187 days ago
noreiller
noreiller commented on 2024-11-18
Conversation is marked as resolved
Show resolved
packages/next/src/build/webpack/config/blocks/css/index.ts
620620 if (typeof _N_E_STYLE_LOAD === 'function') {
621621 const { href, onload, onerror } = linkTag
622 _N_E_STYLE_LOAD(new URL(href).pathname).then(
622
 _N_E_STYLE_LOAD(new URL(href).toString()).then(
noreiller183 days ago

Hi @sokra, is there any blocker to revert to the full href instead of the pathname for the asset URL?
You made the change in the commit 77e6b03 of the PR #66500.

sokra183 days ago

It probably needs path name for SSR. During SSR we don't have the full href.

But you could try to change it and check the test cases

noreiller183 days ago

This change is the only one impacting the runtime code, all the others are related to tests using App Router and next/dynamic.

Moreover, it's included in a isClient condition so it wouldn't impact the SSR.

nikhiledmingle167 days ago👍 2

Hello @noreiller and @sokra .

This fix seems really required as assetsPrefix is breaking in such cases. What can be best way to fix this?

noreiller162 days ago

Hi @sokra, what can I do more than the current fix? The issue blocks my team from upgrading to next@15.

sokra162 days ago

Sounds good to me

sokra162 days ago
Suggested change
_N_E_STYLE_LOAD(new URL(href).toString()).then(
_N_E_STYLE_LOAD(href).then(
noreiller162 days ago

@sokra Thanks, the suggestion is applied.

noreiller fix(next): use the asset prefix when loading a CSS in App Router
6df6f066
noreiller fix: use href with no URL transformation
619a7e67
noreiller noreiller force pushed from cc58d748 to 619a7e67 161 days ago
sokra
sokra approved these changes on 2024-12-11
vercel vercel deleted a comment from ijjk on 2024-12-11
vercel vercel deleted a comment from ijjk on 2024-12-11
ijjk Merge branch 'canary' into fix-dynamic-css-with-asset-prefix
c0f15211
noreiller fix: only use the full URL when the asset origin is not the same than…
761a02c1
noreiller
noreiller commented on 2024-12-12
packages/next/src/build/webpack/config/blocks/css/index.ts
619619 insert: function (linkTag: HTMLLinkElement) {
620620 if (typeof _N_E_STYLE_LOAD === 'function') {
621621 const { href, onload, onerror } = linkTag
622 _N_E_STYLE_LOAD(new URL(href).pathname).then(
622
 _N_E_STYLE_LOAD(
623
 href.indexOf(window.location.origin) === 0
624
 ? new URL(href).pathname
625
 : href
626
 ).then(
noreiller159 days ago

@sokra @ijjk I updated the fix to avoid a regression when the assetPrefix config is not used. I used the same kind of check than in the MiniCssExtractPlugin webpack plugin.

ijjk Merge branch 'canary' into fix-dynamic-css-with-asset-prefix
7992f333
ijjk
ijjk approved these changes on 2024-12-12
ijjk ijjk merged cfe66e74 into canary 159 days ago
github-actions github-actions added locked
github-actions github-actions locked as resolved and limited conversation to collaborators 145 days ago
noreiller noreiller deleted the fix-dynamic-css-with-asset-prefix branch 132 days ago

Login to write a write a comment.

Login via GitHub

Reviewers
Assignees
No one assigned
Labels
type: next locked tests
Milestone
No milestone
Terms Of Use Privacy Policy Refund Policy Impressum