Vite Uncaught TypeError when using Library that requires @emotion/styled

153 views Asked by At

I am currently using Vite to run some micro frontends;

I am using the following versions required to use material-react-table (1.15.1 latest stable version) :

"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.15",
"@mui/material": "^5.14.15",
"vite": "^4.4.5"

When I try to run the project in Dev it works, but if I build it and run it in preview I get the following error :

createSvgIcon-ddfc5f24.js:9 Uncaught TypeError: St is not a function

The error appears to be caused by @emotion/styled at:

const St = await ie("@emotion/styled");
function $t(e, t) {
    return St(e, t)
}

All the different micro-frontends have the needed packages instaled an shared in the vite config.

I tried to use older version of @emotion/styled but got other errors. I also tried setting jsxImportSource with "@emotion/react" in the Vite defineConfig (and compilerOptions, also configured the @emotion/babel-plugin but got the same error everytime.

Any suggestions ?

0

There are 0 answers