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

aws-amplify-react is deprecated, so if you have this problem, just uninstall aws-amplify-react and install @aws-amplify/ui-react. It worked for me

Answer 2

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/

Answer 3

You should try Amplify version 4.3.11 and above, that is using graphql 15.8.0 which works with Webpack 5

Answer 4

It seems like amplify doesn't like webpack 5 which is being included in react-scripts@5.0.0