I have the following code in React MUI:

import React from 'react'
import { TextField } from '@mui/material'


function MyComponent() {
    return (
        <div>
            <TextField></TextField>
        </div>

    )
}

export default MyComponent

However, this gives me the following runtime error: Uncaught TypeError: can't access property "jsx", J is undefined

Now, if I comment out the line <TextField></TextField>, the error disappears.

I then tried to change the import statement from

import { TextField } from '@mui/material'

to

import TextField from '@mui/material/TextField';

And now I get this error in the build:

Module not found: Error: Can't resolve '@mui/material/TextField' in '/home/user/Development/src/frontend-app/components'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@mui/material/TextField' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

This is probably a settings error or something. What can be done to fix it?

Thank you.