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

Global CSS cannot be imported from within node_modules #5775

Open
owen-sellner opened this issue Mar 14, 2025 · 1 comment
Open

Global CSS cannot be imported from within node_modules #5775

owen-sellner opened this issue Mar 14, 2025 · 1 comment
Labels
bug Something isn't working react

Comments

@owen-sellner
Copy link

owen-sellner commented Mar 14, 2025 •
edited
Loading

Description

I am using Next v15.2.2 and I am unable to build my project while I have @primer/react components in my project.

./node_modules/@primer/react/lib-esm/ActionList/Group-436842dc.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@primer/react/lib-esm/ActionList/Group.module.css.js

Import trace for requested module:
./node_modules/@primer/react/lib-esm/ActionList/Group-436842dc.css
./node_modules/@primer/react/lib-esm/ActionList/Group.module.css.js
./node_modules/@primer/react/lib-esm/ActionList/Group.js
./node_modules/@primer/react/lib-esm/ActionList/index.js
./node_modules/@primer/react/lib-esm/index.js

Steps to reproduce

  1. npx create-next-app@latest
  2. Add _app.tsx
import { BaseStyles, ThemeProvider } from "@primer/react";
import { AppProps } from "next/app";
import Head from "next/head";

export default function App({ Component, pageProps, router }: AppProps) {
  return (
    <ThemeProvider>
      <BaseStyles>
        <Head>
          <title>project-title</title>
          <meta name='viewport' content='width=device-width, initial-scale=1' />
          <link rel='icon' href='/favicon.ico' />
        </Head>
        <Component key={router.route} {...pageProps} />
      </BaseStyles>
    </ThemeProvider>
  );
}
  1. Add button to pages/index.tsx
import { Button } from "@primer/react";

export default function Home() {
  return (
    <div>
      <Button></Button>
    </div>
  );
}
  1. npm run build

Version

v37.14.0

Browser

Chrome
@owen-sellner owen-sellner added the bug Something isn't working label Mar 14, 2025
@joshblack
Copy link
Member

Hi there @owen-sellner! 👋 Thanks for taking the time to make this issue 🙏

When looking at the snippets you were sharing, I wanted to ask if you were using Pages Router in Next.js? 👀

If so, unfortunately this is unsupported and would require App Router in order to work 😞 My understanding of this is from this RFC: vercel/next.js#27953 where the solution at to use the app directory.

Hope this helps to answer your question, let me know if not and I can help to figure out what might be going on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working react
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@joshblack @owen-sellner