AWS amplify react - can't start the project

Question

I've installed aws-amplify and aws-amplify-react packages and this is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

When I try to start the app I get this error:

ERROR in ./node_modules/graphql/index.mjs 64:0-98:42
Module not found: Error: Can't resolve './utilities' in 'C:\Users\PC5\Desktop\WebVezbanje\blog-kurs\node_modules\graphql'
Did you mean 'index.mjs'?
BREAKING CHANGE: The request './utilities' 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.

Answer 1

In addition to Francisco's suggestion of updating packages,

You should also uninstall the aws-amplify-react package in favor of the new Amplify UI library. The peer dependencies of that legacy package being locked to older versions of the scoped packages will cause unwanted behaviors.

You can install the new ui components by running npm i @aws-amplify/ui-react

Here is a link to the new Amplify UI documentation for reference: https://ui.docs.amplify.aws/