[nextjs] Fix tsconfig's path resolving

[brijeshb42]

when trying to interpolate a styled component in another
Fixes #171

• I have followed (at least) the PR section of the contributing guide.

[chrros95]

Can I support the progress of this PR in any way?
I'm interested in it because as far as I researched the usage of the resolverFactory fixes the issue #211 as well. Reason for that is, that the resolverFactory searches for index files and doesn't expect the imported path to be file or a package.

[chris-skibro]

Would be amazing to see progress with this PR. Issue #171 is a blocker for us starting to use Pigment CSS. Is there anything we can do to help get this PR reviewed?

[brijeshb42]

Would you be open to testing out the PR build package in your app and see if it's solving the issue for you ?

If yes, can you replace the Pigment CSS versions with these in your package.json ?

{
  "dependencies": {
    "@pigment-css/react": "https://pkg.csb.dev/mui/pigment-css/commit/76e39c75/@pigment-css/react",
  },
  "devDependencies": {
    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/76e39c75/@pigment-css/nextjs-plugin"
  }
}

[chris-skibro]

Hi @brijeshb42, I've just swapped to the PR versions just now and unfortunately that didn't fix it for us. I was about to create a repro but @effektsvk has already provided a perfect repro of our problem at https://github.com/effektsvk/pigment-css-repro-next-js.

[brijeshb42]

Thanks. I'll take a look.

[abriginets]

I've replaced

  "devDependencies": {
    "@pigment-css/nextjs-plugin": "^0.0.24"
  }

with

  "devDependencies": {
    "@pigment-css/nextjs-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/76e39c75/@pigment-css/nextjs-plugin"
  }

and it fixed EISDIR errors for me. Is it possible to merge this in order to resolve #211 and keep working on #171 in a separate PR?

[royporter7]

The solution from @abriginets also worked for resolving the constant EISDIR errors I've been experiencing. I'd also strongly suggest a swift approval for the suggested pull request.

[valleywood]

Really hope that this PR can be merge and that there will be an updated package available soon. We're running into the EISDIR as well and are a stucked with our Pigment css migration until this is resolved 🙏

[siriwatknp]

👍

[valleywood]

Do you know when this fix will be released? 🙏

[brijeshb42]

Already in the process - #308

[brijeshb42]

Released v0.0.26

[valleywood]

Tried version 0.0.26 and I'm not getting the EISDIR however it fails to resolve my TS aliases in my styled components:
The @components alias works in all other files when it is not used in files that wraps code with styled from @mui/material-pigment-css

Basic example:

Openingstatus.tsx

import { styled } from '@mui/material-pigment-css';
import { Chip } from '@components/mui/Chip'; // Alias to wrapped component fails
// import { Chip } from '../../../mui/Chip'; // <= Works!

export const StyledChip = styled(Chip)(({ theme }) => {
  return {
    marginRight: theme.spacing(0.5),
  };
});

Chip.tsx:

import React from 'react';
import { default as MuiChip, ChipProps } from '@mui/material/Chip';

export const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
  function Chip(props, ref) {
    return <MuiChip {...props} ref={ref} />;
  },
);

tsconfig.json:

....
"compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {     
      "@components/*": [
        "scripts/components/*"
      ],
      "@icons/*": [
        "scripts/components/shared/icons/*"
      ],
      "@pages/*": [
        "scripts/pages/*"
      ],
      "@styles/*": [
        "styles/*"
      ],
    },
   ...
   }
...
}

=>

Error:

 prefix: "error"
    err: {
      "type": "Error",
      "message": "Cannot find module '@components/mui/Chip'\nRequire stack:\n- /project/scripts/components/sales/stores/OpeningStatus/OpeningStatus.styled.tsx in/project/scripts/components/sales/stores/OpeningStatus/OpeningStatus.styled.tsx\n",
      "stack":
          EvalError: Cannot find module '@components/mui/Chip'
          Require stack:
          - /project/scripts/components/sales/stores/OpeningStatus/OpeningStatus.styled.tsx in/project/scripts/components/sales/stores/OpeningStatus/OpeningStatus.styled.tsx
        
              at Module.evaluate (/project/node_modules/@wyw-in-js/transform/lib/module.js:224:13)
              at evaluate (/project/node_modules/@wyw-in-js/transform/lib/evaluators/index.js:14:5)
              at BaseAction.evalFile (/project/node_modules/@wyw-in-js/transform/lib/transform/generators/evalFile.js:35:43)
              at evalFile.next (<anonymous>)
              at /project/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78
              at EventEmitter.action (/project/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
              at BaseAction.emitAction (/project/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
              at nextFn (/project/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
              at processNext (/project/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
              at Object.next (/project/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)
              at asyncActionRunner (/project/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:39:102)
              at asyncActionRunner (/project/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:28)
              at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
              at async Object.transform (/project/node_modules/@wyw-in-js/transform/lib/transform.js:107:20)
              at async Object.transform (/project/node_modules/@pigment-css/unplugin/build/index.js:268:24)
              at async Object.transform (/project/node_modules/unplugin/dist/webpack/loaders/transform.js:120:15)
              

NOTE: I've used resolution/overrides to force all dependencies up to the 0.0.26 version of @pigment-css/react to get @mui/material-pigment-css to use the correct version

[brijeshb42]

Could you share a POC with the error here ? It'll be easier to debug

[valleywood]

Could you share a POC with the error here ? It'll be easier to debug

You could use this repo pigment-css-repro-next-js

And just update these parts in package.json:

"@mui/material": "6.1.6",
"@mui/material-pigment-css": "6.1.6",
"@pigment-css/nextjs-plugin": "0.0.26",

"resolutions": {
"@pigment-css/react": "0.0.26"
}

[valleywood]

Could you share a POC with the error here ? It'll be easier to debug

@brijeshb42 Forked the other reproduction repo with updated (0.0.26) version here:
https://github.com/valleywood/pigment-css-repro-next-js