You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I verified that the issue exists in the latest Next.js canary release
Provide environment information
Introduced in 13.2.2-canary.4
Specifically this change: https://github.com/vercel/next.js/pull/46571 "Fix CSS imports not included in entries with a custom extension"
This change should account for custom page extensions.
Still present in 13.2.4-canary.0
Which area(s) of Next.js are affected? (leave empty if unsure)
Create a page in /app. Import any .css file. See how it does not get imported into the page.
In the reproduction I have given, /app/page.tsx works when there is no custom extension, and /app/page.customextension.tsx does not import the CSS.
Describe the Bug
When not using custom page extensions, pages correctly import CSS:
When using a custom page extension, the CSS appears to be dropped completely:
I have a legacy NextJS application that relies on a custom extension of page.tsx to allow me to colocate components and other files in the /pages directory, as recommended in the docs.
Due to the size of the project, it is not feasible to migrate to /app or move all the components out of /pages quickly (though it is a long-term goal)
(Side note, the NextJS Typescript plugin also does not understanding custom page extensions - I intend to open a separate issue for that.)
Expected Behavior
CSS should import on files with custom page extensions, like mypage.page.tsx.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
The text was updated successfully, but these errors were encountered:
Winwardo
changed the title
Custom page extensions (e.g. page.page.tsx) do not import CSS
Custom page extensions (e.g. page.page.tsx) do not import CSS in AppDir
Mar 2, 2023
I can confirm this still happens in 13.2.4 and is blocking my ability to upgrade past 13.2.1.
FYI @shuding who has recently worked in this area with your change on CSS imports #46571
Also seeing this. I'd like to migrate parts of the pages over to the app dir, disabling the pageExtensions would require moving a bunch of tests and stuff around. 😄
Can confirm this is still the case in next@13.4.2! I have a similar situation as mentioned above where the page extension would be necessary to migrate an older app.
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue
https://stackblitz.com/edit/vercel-next-js-bxppz3
To Reproduce
In
next.config.js
, add a custom extension that looks like this:pageExtensions: ['customextension.tsx', 'customextension.ts'],
This works with any extension of this format, but the version recommended in the stable NextJS docs recommend
page.tsx
: https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directoryCreate a page in
/app
. Import any.css
file. See how it does not get imported into the page.In the reproduction I have given,
/app/page.tsx
works when there is no custom extension, and/app/page.customextension.tsx
does not import the CSS.Describe the Bug
When not using custom page extensions, pages correctly import CSS:
When using a custom page extension, the CSS appears to be dropped completely:
I have a legacy NextJS application that relies on a custom extension of
page.tsx
to allow me to colocate components and other files in the/pages
directory, as recommended in the docs.Due to the size of the project, it is not feasible to migrate to
/app
or move all the components out of/pages
quickly (though it is a long-term goal)(Side note, the NextJS Typescript plugin also does not understanding custom page extensions - I intend to open a separate issue for that.)
Expected Behavior
CSS should import on files with custom page extensions, like
mypage.page.tsx
.Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
The text was updated successfully, but these errors were encountered: