search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
772 stars 38 forks source link

EISDIR Errors with pigment migration when using transformLibraries #211

Open royporter7 opened 2 months ago

royporter7 commented 2 months ago

Steps to reproduce

Follow the the migration to pigment css example with a basic Next.js project.

Current behavior

Adding in a basic

royporter7 commented 2 months ago

From some more fiddling it looks like this cryptic error message is a result from providing a custom theme object that might not be valid to the createTheme function in next.config.mjs

royporter7 commented 2 months ago

Actually now that I removed the erroneous theme config that was causing a simple button to not work, I attempted to add a basic Autocomplete straight from the documentation, and I'm getting a very similar error to above. Again, commenting out transformLibraries: ['@mui/material'] causes the error to go away,

      <Autocomplete
        disablePortal
        options={top100Films}
        sx={{ width: 300 }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Movie"
          />
        )}
      />

The error

TypeError:/node_modules/@mui/material/FilledInput/FilledInput.js: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at iterateAndReplaceFunctions (/new/node_modules/@pigment-css/react/processors/chunk-RCGCH7H3.js:138:10)
    at/node_modules/@pigment-css/react/processors/chunk-RCGCH7H3.js:142:9
    at Array.forEach (<anonymous>)
    at iterateAndReplaceFunctions (/new/node_modules/@pigment-css/react/processors/chunk-RCGCH7H3.js:138:21)
    at/node_modules/@pigment-css/react/processors/chunk-RCGCH7H3.js:142:9
    at Array.forEach (<anonymous>)
    at iterateAndReplaceFunctions (/new/node_modules/@pigment-css/react/processors/chunk-RCGCH7H3.js:138:21)
    at Object.cssFnValueToVariable (/new/node_modules/@pigment-css/react/processors/chunk-RCGCH7H3.js:196:3)
    at StyledProcessor.processCss (/new/node_modules/@pigment-css/react/processors/styled.js:385:34)
    at StyledProcessor.processStyle (/new/node_modules/@pigment-css/react/processors/styled.js:306:31)
    at/node_modules/@pigment-css/react/processors/styled.js:209:12
    at Array.forEach (<anonymous>)
    at StyledProcessor.build (/new/node_modules/@pigment-css/react/processors/styled.js:208:20)
    at/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:26:17
    at/node_modules/@wyw-in-js/transform/lib/utils/getTagProcessor.js:384:5
    at Array.forEach (<anonymous>)
    at applyProcessors (/new/node_modules/@wyw-in-js/transform/lib/utils/getTagProcessor.js:375:10)
    at/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:25:42
    at EventEmitter.perf (/new/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:45:20)
    at collector (/new/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:24:16)
    at PluginPass.pre (/new/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:51:26)
    at transformFile (/new/node_modules/@babel/core/lib/transformation/index.js:73:27)
    at transformFile.next (<anonymous>)
    at run (/new/node_modules/@babel/core/lib/transformation/index.js:24:12)
    at run.next (<anonymous>)
    at/node_modules/@babel/core/lib/transform-ast.js:23:33
    at Generator.next (<anonymous>)
    at evaluateSync (/new/node_modules/gensync/index.js:251:28)
    at sync (/new/node_modules/gensync/index.js:89:14)
    at stopHiding - secret - don't use this - v1 (/new/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at Object.transformFromAstSync (/new/node_modules/@babel/core/lib/transform-ast.js:43:83)
    at BaseAction.collect (/new/node_modules/@wyw-in-js/transform/lib/transform/generators/collect.js:50:24)
    at collect.next (<anonymous>)
    at/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78
    at EventEmitter.action (/new/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
    at BaseAction.emitAction (/new/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
    at nextFn (/new/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
    at processNext (/new/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
    at Object.next (/new/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)
    at asyncActionRunner (/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:39:102)
    at asyncActionRunner (/new/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 (/new/node_modules/@wyw-in-js/transform/lib/transform.js:107:20)
    at async Object.transform (/new/node_modules/@pigment-css/unplugin/build/index.js:273:24)
    at async Object.transform (/new/node_modules/unplugin/dist/webpack/loaders/transform.js:108:15)

And the stack trace I posted in the original report proceeds after the above stack trace.

royporter7 commented 2 months ago

I'm not sure who needs to see this, but I've been continuing on with building my project. The application works fine when running next development server (npm run dev), however running a build results in the below error, which looks somewhat similar to what I've previously posted above.

Again, commenting out transformLibraries allows me to build the application, however as expected, in the output application the MUI components won't have the custom theme applied.

admin@Admins-MBP new % npm run build

> unnamed-project-new@1.0.0 build
> next build

  ▲ Next.js 14.2.6
  - Environments: .env.local
  - Experiments (use with caution):
    · instrumentationHook

   Creating an optimized production build ...
unhandledRejection Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (node:fs:751:3)
    at tryReadSync (node:fs:451:20)
    at readFileSync (node:fs:497:19)
    at get code [as code] (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.helpers.js:111:99)
    at new Entrypoint (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:41:30)
    at Entrypoint.innerCreate (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:129:27)
    at /Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:85:47
    at EventEmitter.perf (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:45:20)
    at Entrypoint.create (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:84:25)
    at Entrypoint.createChild (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/Entrypoint.js:176:23)
    at BaseAction.processImports (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/generators/processImports.js:22:44)
    at processImports.next (<anonymous>)
    at /Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78
    at EventEmitter.action (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
    at BaseAction.emitAction (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
    at nextFn (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
    at processNext (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
    at Object.next (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)
    at asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:39:102)
    at asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/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 asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async asyncActionRunner (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:22)
    at async Object.transform (/Users/admin/Repositories/unnamed-project/new/node_modules/@wyw-in-js/transform/lib/transform.js:107:20)
    at async Object.transform (/Users/admin/Repositories/unnamed-project/new/node_modules/@pigment-css/unplugin/build/index.js:273:24)
    at async Object.transform (/Users/admin/Repositories/unnamed-project/new/node_modules/unplugin/dist/webpack/loaders/transform.js:108:15)
royporter7 commented 2 months ago

Hmmm, it's looking like some of theses EISDIR error can be circumvented by running the development server with sudo. After doing so, some build time console errors and warnings showed, resolving them one by one allowed me to run the application as normal. From this I could use Tooltips. However, I'm still getting this issue when I attempt to use an Autocomplete component

brijeshb42 commented 2 months ago

Taking a look into this. From the error, it seems like Pigment is trying to read some path as a file but it is a directory. Doing a require.resolve before reading might help with the fix.

royporter7 commented 2 months ago

@brijeshb42 Super appreciate you looking into it! If there's something you'd like me to test with my build please let me know and I'll do my best to report back to you.

brijeshb42 commented 2 months ago

@rhoiyds Could you push your exact code that's resulting in the error to a github repo ?

royporter7 commented 2 months ago

@brijeshb42 I've spent the past hour attempting to strip out the sensitive elements of my project into a reproduction, however after stripping everything down, the problem doesn't seem to occur. There's a chance that there's some odd conflict with other logic occurring down the line, and pigment is for reason the one that logs the error. On the main project I'm working on, some things I attempt throw the error -but then starting and stopping the server sometimes fixes the problem. It's very hard to pinpoint the trigger unfortunately.

tripolskypetr commented 1 month ago

ADD FORCED CONSOLE LOG WHICH FILES ARE CIRCURED AND IGNORE ARRAY FOR NPM MODULES. So elegant solution

bmakan commented 1 month ago

I found out that having any import like import { useTheme } from '@mui/material'; would result in the below pasted error. I replaced all such imports with '@mui/material/styles';

(I am using vite.js.)

error during build:
[commonjs--resolver] /home/bmakan/ws/regressdb3/src/client/node_modules/@mui/material/FilledInput/FilledInput.js: Cannot convert undefined or null to object
file: /home/bmakan/ws/regressdb3/src/client/node_modules/@mui/material/FilledInput/FilledInput.js
TypeError: /home/bmakan/ws/regressdb3/src/client/node_modules/@mui/material/FilledInput/FilledInput.js: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at iterateAndReplaceFunctions (/home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/chunk-BSJ525HZ.js:138:10)
    at /home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/chunk-BSJ525HZ.js:142:9
    at Array.forEach (<anonymous>)
    at iterateAndReplaceFunctions (/home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/chunk-BSJ525HZ.js:138:21)
    at /home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/chunk-BSJ525HZ.js:142:9
    at Array.forEach (<anonymous>)
    at iterateAndReplaceFunctions (/home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/chunk-BSJ525HZ.js:138:21)
    at Object.cssFnValueToVariable (/home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/chunk-BSJ525HZ.js:196:3)
    at StyledProcessor.processCss (/home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/styled.js:385:34)
    at StyledProcessor.processStyle (/home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/styled.js:306:31)
    at /home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/styled.js:209:12
    at Array.forEach (<anonymous>)
    at StyledProcessor.build (/home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/react/processors/styled.js:208:20)
    at /home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:26:17
    at /home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/utils/getTagProcessor.js:384:5
    at Array.forEach (<anonymous>)
    at applyProcessors (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/utils/getTagProcessor.js:375:10)
    at /home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:25:42
    at EventEmitter.perf (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:45:20)
    at collector (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:24:16)
    at PluginPass.pre (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/plugins/collector.js:51:26)
    at transformFile (/home/bmakan/ws/regressdb3/src/client/node_modules/@babel/core/lib/transformation/index.js:73:27)
    at transformFile.next (<anonymous>)
    at run (/home/bmakan/ws/regressdb3/src/client/node_modules/@babel/core/lib/transformation/index.js:24:12)
    at run.next (<anonymous>)
    at /home/bmakan/ws/regressdb3/src/client/node_modules/@babel/core/lib/transform-ast.js:23:33
    at Generator.next (<anonymous>)
    at evaluateSync (/home/bmakan/ws/regressdb3/src/client/node_modules/gensync/index.js:251:28)
    at sync (/home/bmakan/ws/regressdb3/src/client/node_modules/gensync/index.js:89:14)
    at stopHiding - secret - don't use this - v1 (/home/bmakan/ws/regressdb3/src/client/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at Object.transformFromAstSync (/home/bmakan/ws/regressdb3/src/client/node_modules/@babel/core/lib/transform-ast.js:43:83)
    at BaseAction.collect (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/transform/generators/collect.js:50:24)
    at collect.next (<anonymous>)
    at /home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78
    at EventEmitter.action (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
    at BaseAction.emitAction (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
    at nextFn (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
    at processNext (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
    at Object.next (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)
    at asyncActionRunner (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:39:102)
    at asyncActionRunner (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:28)
    at async Object.transform (/home/bmakan/ws/regressdb3/src/client/node_modules/@wyw-in-js/transform/lib/transform.js:107:20)
    at async Object.transform (/home/bmakan/ws/regressdb3/src/client/node_modules/@pigment-css/vite-plugin/build/index.js:169:24)
    at async transform (file:///home/bmakan/ws/regressdb3/src/client/node_modules/rollup/dist/es/shared/node-entry.js:18830:16)
    at async ModuleLoader.addModuleSource (file:///home/bmakan/ws/regressdb3/src/client/node_modules/rollup/dist/es/shared/node-entry.js:19046:36)
error: "vite" exited with code 1