I'm developing a React App and pushing the files using Clasp to my google scripts webapp. Parcel.js is being used for compiling. Here's a basic React App that works:

index.js

import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App />);

App.js

//app.js
const App = () => {
    return <div>Hello App!</div>
}

export default App

But as soon as I add one @mui/material/ import into App.js I'm getting an error.

import Button from "@mui/material/Button"

const App = () => {
    return <div>Hello App!</div>
}

export default App

Notice that I'm not even using the Button. Locally there's no error but when running on google scripts webapp, I get a console error:

Uncaught SyntaxError: missing ) after argument list

Obviously, Parcel is not compiling something correctly but I can't figure it out. Thanks in advance for the help.