withPigment causes tsconfig compiler path option to not work

[inuwan]

Steps to reproduce

1. With a Next.js 13+ project, configure withPigment in next.config.js
2. In the typescript tsconfig.json file, specify the compiler path option of "paths": {"src/": ["./src/"]},`
3. Add an import such as: import {getStateName from 'src/common/utils' 4 When compiling the next app, the errorEvalError: Cannot find module 'src/common/utils' will be experienced
4. Eliminating withPigment will eliminate the error (but styles will be broken). Changing the import to a relative path will correct the error

Current behavior

Compiler error of EvalError: Cannot find module

Expected behavior

No compiler error

Context

Use a typescript remapped path

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: withPigment typescript path Next.js

[brijeshb42]

What version of @pigment-css/nextjs-plugin are you using ?

[inuwan]

@brijeshb42 I'm using version 0.0.16 of @pigment-css/nextjs-plugin

[jpmaga]

I am getting the same error on nextjs 14 and 15. (didn't try 13)

tsconfig paths:

    "paths": {
      "@/*": [
        "./src/*"
      ]
    },

and the following on a component:

import { factory } from "@/lib/utils/factory"

const Flex = styled(factory.div)({
    "@layer base": {
        display: "flex",
    },
})

If I change the import line to ../../lib/utils/factory it then works as expected.

I'm using "@pigment-css/nextjs-plugin": "^0.0.17".

[brijeshb42]

Thanks everyone. I've found the issue and am currently working on a fix.

[brijeshb42]

@inuwan Can you try this build where I have tried to fix the issue. Instead of using 0.0.16 in the version, use this -

1. For @pigment-css/react - @pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/cfe48ebe/@pigment-css/react
2. Fors @pigment-css/nextjs-plugin - @pigment-css/react@https://pkg.csb.dev/mui/pigment-css/commit/cfe48ebe/@pigment-css/nextjs-plugin

[jpmaga]

For what is worth, this seems to mostly work. However, if you are in dev mode and change the path to "@/something/something" it it will produce the same error. A server restart fixes the issue.

[codemilli]

Same error as below

at Module.evaluate (/node_modules/@wyw-in-js/transform/lib/module.js:224:13)
    at evaluate (/node_modules/@wyw-in-js/transform/lib/evaluators/index.js:14:5)
    at BaseAction.evalFile (/node_modules/@wyw-in-js/transform/lib/transform/generators/evalFile.js:35:43)

[inuwan]

works for me

[jpmaga]

I found another issue related to this. If you import a component using "@/" (in my case, this is what i have in tsconfig) and try to use the sx prop on it, you get the same error. And then you have to go all the way up the three and remove wherever you have those imports and change them to relative paths.

[aleksakojadinovic]

Same problem when using pure js with jsconfig and baseUrl option.

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

In dev mode most changes require complete restart of the dev server, production builds fail for random baseUrl-relative imports.

[rhoiyds]

I'm getting the exact same problem. The behavior is isolated and definitely caused by pigment bundling. Using @pigment-css/nextjs-plugin version 0.0.20.

Server restarts don't work as @jpmaga suggested.

@brijeshb42 Anything on getting that PR resolved?