@mui/icons-material：Cannot use import statement outside a module

[iamzwq]

Steps to reproduce

https://stackblitz.com/edit/rr7-demo?file=app%2Froutes%2Fhome.tsx

Current behavior

Error when using mui-icons on a project created with create-react-router
the error message is: Cannot use import statement outside a module

Expected behavior

No response

Context

No response

Your environment

No response

Search keywords: icon, import

[aarongarciah]

@DiegoAndai I assume this will be solved in v7 once we ship ESM improvements (see #43629), but let me know if you know if there's a temporary workaround that can be applied. Using named export like import { AccessAlarm } from '@mui/icons-material' doesn't work either, it throws another error: Unexpected token 'export'.

[DiegoAndai]

Hey @iamzwq, thanks for the report. In the meantime, you can add ssr.noExternal to your config as such:

import { reactRouter } from '@react-router/dev/vite';
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
  plugins: [reactRouter(), tsconfigPaths()],
  ssr: {
    noExternal: ['@mui/icons-material'],
  },
});

This should fix the error.

---

I'm closing this as a duplicate of #44265

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@iamzwq How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.