[pigment-css] Support module aliases in nextjs-plugin

[joshwcomeau]

Steps to reproduce

Link to live example: https://github.com/joshwcomeau/pigment-experiments

Steps:

1. Install dependencies and start a dev server
2. Visit localhost:3000
3. Notice the error in the terminal

(Sorry for lack of CodeSandbox! I tried to create one and it froze).

Current behavior

Next.js has built-in support for module aliases. The default alias works like this:

import random from '@/helpers/random';
// Equivalent to:
import random from '../src/helpers/random';

When I try to import a module using this default alias, I get the following error:

⨯ unhandledRejection: EvalError: Cannot find module '@/helpers/random'
Require stack:
/Users/joshu/work/pigment-experiments/src/app/page.tsx in/Users/joshu/work/pigment-experiments/src/app/page.tsx
at Module.evaluate (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/module.js:223:13)
at evaluate (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/evaluators/index.js:14:5)
at BaseAction.evalFile (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/transform/generators/evalFile.js:35:43)
at evalFile.next ()
at /Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78
at EventEmitter.action (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
at BaseAction.emitAction (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
at nextFn (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
at processNext (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
at Object.next (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)
at asyncActionRunner (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:39:102)
at async asyncActionRunner (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
at async Object.transform (/Users/joshu/work/pigment-experiments/node_modules/@wyw-in-js/transform/lib/transform.js:107:20)
at async Object.transform (/Users/joshu/work/pigment-experiments/node_modules/@pigment-css/unplugin/build/index.js:148:24)
at async Object.transform (/Users/joshu/work/pigment-experiments/node_modules/unplugin/dist/webpack/loaders/transform.js:108:15)

Expected behavior

The nextjs plugin should follow the same module resolution rules as Next.js:

• If no alias is specified in next.config.js, the default alias, @/, should be supported
• Ideally, it should also support custom aliases. See next.js docs for more information.

Context

I think in a lot of contexts, module aliases are kind of niche since they involve making custom tweaks to webpack config. For Next.js, though, this is built-in, and the default alias works without any config at all. So I do think the default alias, at least, should be supported.

I'm confident this is an issue with Pigment CSS because everything works when I remove the styled import/code from the homepage. The import then resolves correctly.

Your environment

npx @mui/envinfo

System:
OS: macOS 14.1
Binaries:
Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
pnpm: 8.15.4 - ~/.nvm/versions/node/v20.10.0/bin/pnpm
Browsers:
Chrome: 122.0.6261.128
Edge: Not Found
Safari: 17.1
npmPackages:
@emotion/react: 11.11.4
@emotion/styled: 11.11.0
@mui/private-theming: 5.15.12
@mui/styled-engine: 5.15.11
@mui/system: 5.15.12
@mui/types: 7.2.13
@mui/utils: 5.15.12
@types/react: ^18 => 18.2.64
react: ^18 => 18.2.0
react-dom: ^18 => 18.2.0
typescript: ^5 => 5.4.2

Search keywords: pigment-css nextjs

I can confirm this problem. The import works fine without withPigment( in next.config.mjs

import { withPigment } from "@pigment-css/nextjs-plugin";

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.externals.push("@node-rs/argon2", "@node-rs/bcrypt");
    return config;
  },
};

export default withPigment(nextConfig)

(The webpack externals are to get Drizzle working)

I have a default tsconfig.json from a new NextJs project.

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[mnajdova]

Thanks for the report, yes it is an issue with pigment-css, we have faced it ourselves too. I agree, that it's important to handle this, especially as everyone who would be using next.js will depend on this setup to work out of the box. I've added into our backlog with a high priority, we will look into it soon.