Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MUI v6 with material-pigment-css createSvgIcon compiling error #43486

Closed
Kretiss opened this issue Aug 27, 2024 · 5 comments
Closed

MUI v6 with material-pigment-css createSvgIcon compiling error #43486

Kretiss opened this issue Aug 27, 2024 · 5 comments
Assignees
@brijeshb42 @siriwatknp
Labels
package: pigment-css Specific to @pigment-css/* status: waiting for author Issue with insufficient information

Comments

@Kretiss
Copy link

Kretiss commented Aug 27, 2024 •
edited
Loading

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
@github-actions github-actions bot added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 27, 2024
@o-alexandrov
Copy link

I have the same issues, reported here:

@zannager zannager added the package: pigment-css Specific to @pigment-css/* label Aug 28, 2024
@siriwatknp
Copy link
Member

siriwatknp commented Aug 29, 2024 •
edited
Loading

@Kretiss Can you provide a repo or a reproducible sandbox? Also, can you update the @pigment-css/vite-plugin to 0.0.21 and make sure that all @mui/* packages are 6.0.0.

@siriwatknp siriwatknp added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 29, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Sep 6, 2024

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.

@github-actions github-actions bot closed this as completed Sep 6, 2024
@o-alexandrov o-alexandrov mentioned this issue Oct 11, 2024
Open
@mnajdova mnajdova reopened this Oct 14, 2024
@github-actions GitHub Actions
Copy link

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
Copy link

o-alexandrov commented Oct 14, 2024 •
edited
Loading

@mnajdova apologies for pinging about this issue; removed a note about this issue from this comment

@Kretiss
I just used the PigmentCSS Vite example, you can download as described here:

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-pigment-css-vite-ts
cd material-ui-pigment-css-vite-ts

Then, create the file you mentioned as the basic example and use it.

It works, so this issue should be closed
Screenshot 2024-10-14 at 7 19 11 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brijeshb42 brijeshb42

@siriwatknp siriwatknp

Labels
package: pigment-css Specific to @pigment-css/* status: waiting for author Issue with insufficient information
Projects
Material UI
Status: Done
Milestone
No milestone
Development

No branches or pull requests
6 participants
@brijeshb42 @mnajdova @o-alexandrov @siriwatknp @Kretiss @zannager