Compiling / Loading app results in Error: EISDIR: illegal operation on a directory, read

[jbogedahl-st]

Steps to reproduce

I am unable to get this to fail in a codesandbox that I've setup with a similar structure. However, I'm hoping that by looking over the screenshots of logs and code, you might be able to help pinpoint where the problem is coming from. The problem occurs when compiling while webpack, pigment-css and wyw-in-js are loading the modules in my project.

Current behavior

As it loads the modules, it is hitting the error EISDIR: illegal operation on a directory, read because it is trying to read a directory as a file. The path is not coming from any of my code, but looks to be coming from pigment-css. The directory it is trying to read as a file is: ...@mui/utils/generateUtilityClass (see screenshot)

Hoping that maybe it's some sort of type-o in the code somewhere that you can just search for and fix? I couldn't find it anywhere.

Expected behavior

Should compile and load without errors.

Context

I'm trying to use nextjs app router with React Server Controls and using pigment-css for the css for these controls. I am also using client controls and MUI styles and themes for these client controls. I'm trying to get this to all work together and keep hitting a number of problems that I've been working around to try to get an app up and running. If I debug and change the path it's trying to read, then it works.

Your environment

System: OS: Windows 11 10.0.22621 Binaries: Node: 22.1.0 - C:\Program Files\nodejs\node.EXE npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD pnpm: 9.4.0 - ~\AppData\Local\pnpm\pnpm.EXE Browsers: Chrome: Not Found Edge: Chromium (126.0.2592.68)

In addition, here is some additional context from debugging...

As the modules are being loaded, this is where we hit the error - when loading @mui/utils/index.js

These log results are coming from this code in @pigment-css > unplugin > build > index.js > async transform()

The error is happening here in @wyw-in-js > transform > lib > transform > Entrypoint.helpers.js > loadAndParse()

Search keywords: EISDIR: Illegal operation on a directory

[o-alexandrov]

We’ve encountered this error with Pigment (wyw-in-js) and vite for months. The same error happens to us every time we clear vite’s cache (reinstall node_modules). What works for us to resolve the issue is:

1. wait ~20 seconds until vite processes as many modules as possible and stops throwing errors in the console
2. stop the vite’s run in the console
3. run it again

After 2-3 such iterations, it starts to run without errors. I guess Pigment expects that @mui/material is processed (transformed) and thus fail in initial runs and works after first couple runs.

[brijeshb42]

@jbogedahl-st You can also provide a Github repo with the reproducible error.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[o-alexandrov]

Provided reproducible example in #170 (comment)

• see issue 3 in the comment there