Element type is invalid error due to @mui/icons-material with react integration when running astro build
#6512
Comments
vemonet
changed the title
astro build for a basic app with react integration and material ui componentsreact-dom when running astro build for a basic app with react integration and material ui components
|
I tracked down the issue to be showing up as soon as an icon from import SearchIcon from '@mui/icons-material/Search';
<SearchIcon />The error message is Click here to see the full error outputWhich seems to point at an issue with So I tried to edit the vite build rollup config in import { defineConfig } from 'astro/config';
import react from "@astrojs/react";
import commonjs from '@rollup/plugin-commonjs';
export default defineConfig({
integrations: [react()],
vite: {
build: {
rollupOptions: {
plugins: [
commonjs(),
],
},
},
}
});Anyone has an idea how this issue with |
vemonet
changed the title
react-dom when running astro build for a basic app with react integration and material ui componentsElement type is invalid error due to @mui/icons-material with react integration when running astro build
|
I finally found the root of my problem, it is related to issue #4432 There is a proposed workaround to use Now the Which can be fixed by completely removing the So Astro seems to properly support most of I guess there are still some work to do to fully integrate existing popular UI libraries from external frameworks, but what we have already is really promising! Thanks a lot! |
|
I'm having the same issue, using React components from a Vite/TS project containing Material UI icons used as described above (
Is there any workaround for this that doesn't require using a
|
@ericpedia Hey guys, you can try import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import NoSsr from '@mui/material/NoSsr'
const icon = (
// prevent to use ssr render
<NoSsr>
<ExpandMoreIcon className="text-white" />
</NoSsr>
)It's work for me! |
check here: vitejs/vite#16201 |
What version of
astroare you using?2.1.0
Are you using an SSR adapter? If so, which one?
None
What package manager are you using?
Yarn 3 usually, but here all of them out of dispair!
What operating system are you using?
Linux Fedora 37
What browser are you using?
Firefox and Chromium, but this is not relevant, error happens at build time
Describe the Bug
Hi, I am trying to build an app with Astro + ReactJS + mui (material UI for react).
I used the
create astrocommand to create the repo and add the react integration. I am trying to build a generic static website (with no integration to any provider)How to reproduce
Not sure how to use astro.new and stackblitz tools, but everyone knows well git, so I put the code to reproduce on git! You can find the complete code to reproduce the issue here: https://github.com/MaastrichtU-IDS/knowledge-collaboratory/tree/astro-experiment
I made it really simple and succinct to try to narrow down where the issue comes from: there is just a basic navbar, main page and footer, I also removed the mui theme setup
You can easily try it running those commands,
devshould work andbuildshould fail:git clone -b astro-experiment https://github.com/MaastrichtU-IDS/knowledge-collaboratory cd knowledge-collaboratory yarn yarn dev yarn buildSetup versions
With yarn 3 and node 18
It works well with
yarn devand does not show any error or warning in the terminal or consoleBut if I try to build with
yarn buildI am getting an erroremStyled is not a functionClick here to see the full error output
I did some research and unfortunately could not find a lot of issues regarding
emStyled is not a function. And none of those issues responses were explaining the actual problem (it is usually "just update lib X to version Y to fix it")With npm or yarn 1
Running
devworks, so I tried running thebuildscript withnpm runandyarnv1 (yarn 3 has changed a lot from yarn 1 and seems to do a lot of things differently which is confusing, e.g. the cryptic error message it gave above).I also tried using node 16 and node 18 (cf. below for exact versions used). In this case we get a different error, a bit more explicit, which seems to be related to
react-dom:This error seems to point that an import is not done properly in the
react-dommodule. But I never usereact-domin my code, all the explicit imports to react areimport React from "react";or importing@mui/materialcomponentsWith pnpm
How convenient that we have so many npm package managers! With
pnpmthe error comes directly when runningpnpm dev(nice consistency)On node 16 pnpm embarassingly fails to do basic maths as it tells me that 16.17.1 is not superior or equal to 16.12.0
Then on node 18 pnpm forces me to install an unused dependency of a dependency, and then fails to find it (for a dependency which does not cause issues with
npmandyarnanyway).Click here to see the full error output
Questions
Note that
yarn buildwas working fine with the template generated bycreate astro. And from thenpm run buildoutput it seems like the issue comesreact-dom-serverAnyone has an idea why
astrofails to build? Why does it shows errors related to the react-dom when I don't use it? How could this be solved? Do I need to add specific configuration to theastro.config.mjs? Maybe to fix the react-dom configurationThanks a lot for this beautifully crafted tool!
Link to Minimal Reproducible Example
https://github.com/MaastrichtU-IDS/knowledge-collaboratory/tree/astro-experiment
Participation
The text was updated successfully, but these errors were encountered: