I have a react web app which is compiled with webpack 5. I am using material-ui as a component library.

In my code I have always used require() to import components.

for example:

const { IconButton, ThemeProvider, createTheme, Box } = require('@material-ui/core');

However, I need to move over to use import instead of require.

So it should look like this:

import { IconButton, ThemeProvider, createTheme, Box } from '@material-ui/core';

When doing so, webpack successfully bundles everything, but when I try loading the app in chrome, I just get an error:

Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./src/component/App.js

What needs to be true in order to be able to make this work? I am sure I need to provide more information about either my webpack configuration or how my react app was created, but I am kind of clueless to what to look for, so If someone could start asking for the information I am missing in this question, then I will update with more information.

Thanks!