amplify-js: [aws-amplify/amplify-js] export 'default' (imported as 'Amplify') was not found in 'aws-amplify'

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

REST API

Amplify Categories

auth

Environment information

 System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
    Memory: 1.33 GB / 7.88 GB
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.44)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @aws-amplify/ui-react: ^4.4.0 => 4.4.0
    @aws-amplify/ui-react-internal:  undefined ()
    @testing-library/jest-dom: ^5.16.5 => 5.16.5
    @testing-library/react: ^13.4.0 => 13.4.0
    @testing-library/user-event: ^13.5.0 => 13.5.0
    aws-amplify: ^5.0.20 => 5.0.20
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    react-scripts: 5.0.1 => 5.0.1
    web-vitals: ^2.1.4 => 2.1.4
  npmGlobalPackages:
    @aws-amplify/cli: 11.0.2
    yarn: 1.22.19

Describe the bug

Running this on a Windows 10 environment.

Following this tutorial – > https://www.youtube.com/watch?v=Sk9HMuAaTmQ

Failed to compile.

Attempted import error: 'aws-amplify' does not contain a default export (imported as 'Amplify').
ERROR in ./src/index.js 12:0-14
export 'default' (imported as 'Amplify') was not found in 'aws-amplify' (possible exports: API, APIClass, AWSCloudWatchProvider, AWSKinesisFirehoseProvider, AWSKinesisProvider, AWSPinpointProvider, AmazonPersonalizeProvider, Amplify, Analytics, Auth, AuthModeStrategyType, Cache, ClientDevice, DataStore, Geo, Hub, I18n, Interactions, Logger, Notifications, Predicates, Predictions, PubSub, ServiceWorker, Signer, SortDirection, Storage, StorageClass, graphqlOperation, syncExpression, withSSRContext)

Expected behavior

Expecting the Login Page to be rendered as per the tutorial I have followed.

Reproduction steps

When i run the command “npm start” from the command line.

Code Snippet

// Put your code below this line.

**App.js**

import logo from './logo.svg';
import './App.css';
import { Amplify } from 'aws-amplify'

import { withAuthenticator, signOut  } from '@aws-amplify/ui-react';

function App({ signOut }) {
  return (
    <div className="App">
      <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>


      </header>
      <signOut />
    </div>
  );
}

export default withAuthenticator(App);

Additional configuration

package.json

{
  "name": "react-cognito-api",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^4.4.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^5.0.20",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 15 (9 by maintainers)

Most upvoted comments

@nadetastic @helgabalashova . Worked like a charm. Thank you both for the support.

@akbarm I noticed in your code that you call Amplify.config(config) instead of Amplify.configure(config). Can you please fix it and let us know if it fixes the problem you have.