0

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.
Andrija Gajic
  • 314
  • 3
  • 15

4 Answers4

3

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

3

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/

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

Andrija Gajic
  • 314
  • 3
  • 15
0

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

  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 16 '21 at 14:00