SyntaxError when using Material-UI (@mui) components (includes emotion)

[ShlomyTuby]

Version

0.1.5

Platform

Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64 x86_64

What steps will reproduce the bug?

Create a new bun project using react template

bun create react
cd react
bun add @mui/material @emotion/react @emotion/styled

Update src/App.jsx (use @mui/material/Button component):

import Button from "@mui/material/Button";

function App() {
  return (
    <Button variant="contained">Mui Button</Button>
  );
}

export default App;

Start the bun server and open the browser

bun dev
open http://localhost:3000

Open dev tools and look for the following error:

Uncaught SyntaxError: Export 'jsx' is not defined in module

How often does it reproduce? Is there a required condition?

No response

What is the expected behavior?

Material-UI button element without console errors:

What do you see instead?

SyntaxError in the console

Additional information

There is a reported bug for the same issue on the discord channel but I couldn't find a related GitHub issue.

[Jarred-Sumner]

I think the issue is that bun is interpreting the tsconfig.json file in the npm package and that is causing other things to break

[davidriverapericas]

Hi, I'm pretty sure it's not the best solution, but I would like to share how I sorted it out (manually):

Edit the file node_modules/@emotion/react/dist/emotion-react.browser.esm.js
[Line 135]
From: var jsx = function jsx(type, props) {
To: var jsxfn = function jsx(type, props) {

[Line 406]
From: export { ClassNames, Global, jsx as createElement, css, jsx, keyframes };
To: export { ClassNames, Global, jsxfn as createElement, css, jsxfn as jsx, keyframes };

Then you'll have your button ;)

I hope it helps a bit
Cheers
David

[drush]

@davidriverapericas Did you submit this as a patch to @emotion?

[duy211099]

i have the same problem

[Rodzman]

Hi! I'm having the same issue here. Is there any solution for this?

[davidriverapericas]

@davidriverapericas Did you submit this as a patch to @emotion?

Hi @drush, no I haven't. I just applied that change to my local and it worked.

It would be really good if somebody else can try my approach (#875 (comment))... @duy211099 & @Rodzman?

Thank you all!

[Rodzman]

Hi @davidriverapericas, Yeah, I've tried your approach and it worked well. But I agree with you that it isn't the best solution, just a temp workaround. I thought about filling an issue with emotion, but I think that only bun is having it, so maybe the solution would be to analyze and change the way that bun is reading and parsing that information. Thanks

[davidriverapericas]

Hi @davidriverapericas, Yeah, I've tried your approach and it worked well. But I agree with you that it isn't the best solution, just a temp workaround. I thought about filling an issue with emotion, but I think that only bun is having it, so maybe the solution would be to analyze and change the way that bun is reading and parsing that information. Thanks

Thank you @Rodzman for your comments.

@Jarred-Sumner, what do you think about that?

[davidriverapericas]

Hi all. I've tested again, creating a brand new React Project, this time with Bun 0.4.0 and it works perfectly, without any manual change in Emotion:

$ bun create react .
$ bun add @mui/material @emotion/react @emotion/styled
$ bun dev

It works to me ;)