14

I have a project created with create-react-app with Typescript. And I am using yarn 3.3.0 as the package manager.

Now I am trying to shift from cras webpack to vite. I have bootstrapped a project with the yarn create vite command. And simply copy and paste the components from previous project to the new one.

When I run on the command line yarn tsc I am facing no error.

Also running yarn dev is okay in the terminal and the server starts successfully.

However, in the browser I am facing an weird error on the terminal which says:

Uncaught SyntaxError: Export 'import_react3' is not defined in module (at chunk-ALR5B6M7.js?v=aa4e0109:17143:3)

enter image description here

Nahidujjaman Hridoy
  • 1,175
  • 12
  • 28

2 Answers2

33

Apparently, since I am using Material UI I need to install @emotion/react and @emotion/styled as well.

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Nahidujjaman Hridoy
  • 1,175
  • 12
  • 28
  • 1
    Yeah the MUI docs are a bit misleading for Installation. It says default installation and emotion styles like you have it, and then right below, "With Styled Components..." one would assume separate from Emotion if you're not going to use it...BUT also required. – daviddavis Feb 18 '23 at 12:17
  • Issue is still not solving – Ahmad Hassan Mar 03 '23 at 07:20
  • https://github.com/mui/material-ui/blob/master/examples/material-cra-styled-components-ts/package.json This package setup in the examples seems to be saying that it is possible to not haave emotion while having styled components. Also, this doc: https://mui.com/material-ui/guides/styled-engine/ Defines that you should resolve one module by another in the resolution. Using vite, I haave not find how to yet... – Pomme De Terre Mar 12 '23 at 13:53
  • Just found that if you use MUI icons, they rely on emotion: https://mui.com/material-ui/material-icons/ – Pomme De Terre Mar 12 '23 at 14:06
  • installing these packages resolved the issue – Ashiq Dey May 20 '23 at 08:04
1

This is for those who are using MUI install the following

npm install --save @emotion/react

npm install --save @emotion/styled

after installing re-run your project

ShrutiLatthe
  • 21
  • 1