MUI v6 with material-pigment-css createSvgIcon compiling error

[Kretiss]

I migrated my project to @mui/material v6 and started using @mui/material-pigment-css. Now I am getting errors with compiling @mui/icons-material. Are icons supported by pigment-css? I havent found any info about this topic. Thanks!

This is the error I am talking about:

[vite] Internal server error: Cannot read properties of undefined (reading 'createSvgIcon') in/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/.vite/deps/@mui_icons-material_OpenInNew.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/src/pages/specimensOverview/components/Calendar.tsx

  Plugin: vite-plugin-zero-runtime
  File: /Users/tomaskretek/inQool/zpristupnovaci-modul/src/pages/specimensOverview/components/Calendar.tsx
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:224:13)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
      at newRequire (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:65:12)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/src/pages/specimensOverview/components/Calendar.tsx:10:41
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/src/pages/specimensOverview/components/Calendar.tsx:223:3
      at Script.runInContext (node:vm:148:12)
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
      at evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/evaluators/index.js:14:5)
      at BaseAction.evalFile (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/transform/generators/evalFile.js:35:43)
      at evalFile.next (<anonymous>)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:78
      at EventEmitter.action (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/utils/EventEmitter.js:25:22)
      at BaseAction.emitAction (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:131:39)
      at nextFn (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:66:32)
      at processNext (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:111:28)
      at Object.next (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/transform/actions/BaseAction.js:120:9)
      at asyncActionRunner (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:39:102)
      at asyncActionRunner (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/transform/actions/actionRunner.js:46:28)
      at async Object.transform (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/transform.js:107:20)
      at async TransformPluginContext.transform (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:174:24)
      at async PluginContainer.transform (file:///Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:49000:18)
      at async loadAndTransform (file:///Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51822:27)

I have tried adding library to transformLibraries in pigmentConfig in vite.config.ts, but it showed another errors:

[vite] Internal server error: _interopRequireDefault is not a function in/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/createPalette.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/createTheme.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/defaultTheme.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/useTheme.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/zero-styled/index.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/SvgIcon/SvgIcon.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/SvgIcon/index.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/utils/createSvgIcon.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/utils/index.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/icons-material/utils/createSvgIcon.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/icons-material/ErrorOutline.js
| /Users/tomaskretek/inQool/zpristupnovaci-modul/src/components/ShowInfoMessage.tsx

  Plugin: vite-plugin-zero-runtime
  File: /Users/tomaskretek/inQool/zpristupnovaci-modul/src/components/ShowInfoMessage.tsx
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:224:13)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
      at newRequire (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:65:12)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/createTheme.js:14:45
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/createTheme.js:92:3
      at Script.runInContext (node:vm:148:12)
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
      at newRequire (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:65:12)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/defaultTheme.js:9:43
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/defaultTheme.js:12:3
      at Script.runInContext (node:vm:148:12)
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
      at newRequire (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:65:12)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/useTheme.js:11:44
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/styles/useTheme.js:23:3
      at Script.runInContext (node:vm:148:12)
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
      at newRequire (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:65:12)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/zero-styled/index.js:35:40
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/zero-styled/index.js:61:3
      at Script.runInContext (node:vm:148:12)
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
      at newRequire (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:65:12)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/SvgIcon/SvgIcon.js:14:19
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/SvgIcon/SvgIcon.js:245:3
      at Script.runInContext (node:vm:148:12)
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
      at newRequire (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:65:12)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/SvgIcon/index.js:23:39
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/SvgIcon/index.js:38:3
      at Script.runInContext (node:vm:148:12)
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
      at newRequire (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:65:12)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/utils/createSvgIcon.js:10:39
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/utils/createSvgIcon.js:33:3
      at Script.runInContext (node:vm:148:12)
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)
      at newRequire (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@pigment-css/vite-plugin/build/index.js:65:12)
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/utils/index.js:114:45
      at /Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@mui/material/node/utils/index.js:139:3
      at Script.runInContext (node:vm:148:12)
      at Module.evaluate (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:209:14)
      at require.Object.assign.ensure (/Users/tomaskretek/inQool/zpristupnovaci-modul/node_modules/@wyw-in-js/transform/lib/module.js:118:7)

This is basic example:

import React, { FC } from 'react'

import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
import Container from '@mui/material-pigment-css/Container'
import Box from '@mui/material-pigment-css/Box'

type TShowErrorProps = {
  message: string
}

const ShowInfoMessage: FC<TShowErrorProps> = ({ message }) => {
  return (
    <Container
      sx={{ marginTop: '50px', marginBottom: '50px', textAlign: 'center' }}
    >
      <ErrorOutlineIcon
        fontSize="large"
        sx={{ display: 'block', margin: '0 auto', marginBottom: '10px' }}
      />
      <Box component="span">{message}</Box>
    </Container>
  )
}

export default ShowInfoMessage

Search keywords: pigment-css, icons-material