Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

When using pageExtensions like "page.jsx", global css import not working #48794

Closed
1 task done
sagarpreet-xflowpay opened this issue Apr 24, 2023 · 4 comments · Fixed by #48795
Closed
1 task done

When using pageExtensions like "page.jsx", global css import not working #48794

sagarpreet-xflowpay opened this issue Apr 24, 2023 · 4 comments · Fixed by #48795
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template.

Comments

@sagarpreet-xflowpay
Copy link
Contributor

sagarpreet-xflowpay commented Apr 24, 2023 •
edited
Loading

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T6000
    Binaries:
      Node: 12.22.8
      npm: 6.14.15
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 13.3.2-canary.3
      eslint-config-next: 13.3.2-canary.3
      react: 18.2.0
      react-dom: 18.2.0

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://codesandbox.io/p/sandbox/serene-meninsky-spizhp

To Reproduce

Steps to reproduce:

  1. Not using Page extensions in next config, css import in root layout working:
  1. Using Page extensions in next config, css import in root layout is not working:

Describe the Bug

When using pageExtensions in next@latest like:

pageExtensions: ["page.jsx", "page.js"],

Then in app directory, importing CSS does not work:

// File path: app/layout.page.tsx
import "../styles/globals.css";   // DOES NOT WORK

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Hence no CSS is loaded while running server.

Expected Behavior

When using pageExtensions, importing of CSS in app directory should work normally.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response
@sagarpreet-xflowpay sagarpreet-xflowpay added the bug Issue was opened via the bug report template. label Apr 24, 2023
@github-actions github-actions bot added the area: app App directory (appDir: true) label Apr 24, 2023
@sagarpreet-xflowpay sagarpreet-xflowpay mentioned this issue Apr 24, 2023
Merged
@icyJoseph
Copy link
Contributor

I see the red color, when I navigate to test.

@sagarpreet-xflowpay
Copy link
Contributor Author

sagarpreet-xflowpay commented Apr 25, 2023 •
edited
Loading

Hey @icyJoseph - can you please check now the above codesandbox link?
Please note - it is black in color when pageExtension is given in next.config (css import not working). and red in color when pageExtension is removed from next.config (css import working).

Let me know if you need more details.
Please also see the steps to reproduce section in issue description.

@sagarpreet-xflowpay
Copy link
Contributor Author

I have made 2 codesandboxe links to better explain the issue:

  1. Not using Page extensions in next config, css import in root layout working:
  1. Using Page extensions in next config, css import in root layout is not working:

cc @icyJoseph

feedthejim added a commit that referenced this issue Apr 28, 2023
@sagarpreet-xflowpay @feedthejim @kodiakhq
fixes #48794 : When using pageExtensions like "page.jsx", global css …
0918ebd 
…import not working (#48795)

fixes #48794 


<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation or adding/fixing Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md



## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->

---------

Co-authored-by: Jimmy Lai <laijimmy0@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 28, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: app App directory (appDir: true) bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
2 participants
@icyJoseph @sagarpreet-xflowpay