Global CSS cannot be imported from within node_modules

[oe-josh-martin]

Steps to reproduce

1. Follow steps outlined for Building reusable components
2. Load consuming application

Basic app available here, it's not identical to the README example, but it does the same thing (exports a basic component for consumption in a different app).

I note that if I remove the transformLibraries: ['@kt/pigmentcss'] declaration from the withPigment config the error goes away, but there are no styles applied (naturally).

Current behavior

Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/.pnpm/file+..+package_@types+react-dom@18.2.0_@types+react@18.2.0_react-dom@18.2.0_react@18.2.0_typescript@5.4.3/node_modules/@kt/pigmentcss/dist/index.mjs

Expected behavior

No response

Context

No response

Your environment

"dependencies": {
    "@kt/pigmentcss": "file:../package/",
    "@pigment-css/react": "^0.0.11",
    "@types/node": "20.11.24",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "next": "14.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "^5.4.3"
},
"devDependencies": {
    "@pigment-css/nextjs-plugin": "^0.0.11"
}

Search keywords: global imported node_modules

[siriwatknp]

You need to add transpilePackages to next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["@kt/pigmentcss"], // required for loading virtual node_modules
};

[oe-josh-martin]

Perfect, thank you @siriwatknp!