Importing from @mui/icons-material throws error

[ramiroazar]

Search keywords

module, cjs, mjs, icons, vite, remix

Latest version

• I have tested the latest version

Steps to reproduce

1. Open reproduction
2. Notice error

Current behavior

Importing an icon from @mui/icons-material throws the following warning and error.

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

SyntaxError: Cannot use import statement outside a module

Expected behavior

Importing an icon from @mui/icons-material shouldn't throw an error.

Context

We're trying to use @mui/icons-material in a Remix project.

Your environment

npx @mui/envinfo

System:
    OS: macOS 14.5
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.91
    Edge: Not Found
    Safari: 17.5
  npmPackages:
    @mui/core-downloads-tracker:  6.1.5 
    @mui/icons-material: ^6.1.5 => 6.1.5 
    @mui/material:  6.1.5 
    @mui/private-theming:  6.1.5 
    @mui/styled-engine:  6.1.5 
    @mui/system:  6.1.5 
    @mui/types:  7.2.18 
    @mui/utils:  6.1.5 
    @types/react: ^18.2.20 => 18.3.10 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.1.6 => 5.6.2

[joebochill]

In case this helps anyone else, I ran into the same error while trying to migrate a simple Vite project to use the new PigmentCSS engine (removing all of my ownerState instances). One of the overrides in my theme set a default property to a different icon. I read a little further ahead in the migration guide and after switching to using the DefaultPropsProvider, the error went away.