Estoy desarrollando una aplicación React y transfiriendo los archivos usando Clasp a mi aplicación web de scripts de Google. Parcel.js se está utilizando para compilar. Aquí hay una aplicación React básica que funciona:

índice.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 />);

Aplicación.js

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

Pero tan pronto como agrego una importación de @mui/material/ en App.js, aparece un error.

 import Button from "@mui/material/Button" const App = () => { return <div>Hello App!</div> } export default App

Tenga en cuenta que ni siquiera estoy usando el Botón. Localmente no hay ningún error, pero cuando se ejecuta en la aplicación web de scripts de Google, aparece un error en la consola:

SyntaxError no detectado: falta) después de la lista de argumentos

Obviamente, Parcel no está compilando algo correctamente, pero no puedo resolverlo. Gracias de antemano por la ayuda.