amplify-js: Can't import the named export 'Amplify' from non EcmaScript module (only default export is available)

How did you install the Amplify CLI?

npm

If applicable, what version of Node.js are you using?

Amplify CLI Version

11.0.3

What operating system are you using?

Mac

Did you make any manual changes to the cloud resources managed by Amplify? Please describe the changes made.

Following this tutorial - https://amplify.aws/learn/courses/Fullstack-for-Frontend-Developers-e7319/lessons/1

Describe the bug

I’m new to Amplify and am following a tutorial to set up a React app. I’ve deployed using Studio, installed the Amplify CLI, according to the tutorial, but when I use npm run start I keep on getting these errors.

Looking online a lot of places are saying this is a webpack issue, but while webpack is in node_modules, there is no webpack.config file in the project.

Expected behavior

The project should build locally

Reproduction steps

Set up project with data schema etc on Amplify Studio, then:

npx create-react-app notes
cd notes
CLI previously installed
`amplify pull’ command as detailed in Studio
npm i aws-amplify @aws-amplify/ui-react
adding import { Amplify } from 'aws-amplify'; import { AmplifyProvider } from '@aws-amplify/ui-react'; import config from './aws-exports'; Amplify.configure(config) to index.js
Changing the return in App.js to return ( <></> )
npm run start

Project Identifier

No response

Log output

# Put your logs below this line

Additional information

No response

Before submitting, please confirm:

I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
I have removed any sensitive information from my code snippets and submission.

About this issue

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

Most upvoted comments

This issue is happening mainly for older version react-scripts Follow the following troubleshooting guide for resolving this issue

https://ui.docs.amplify.aws/react/getting-started/troubleshooting

for extending CRA config u can use following package https://www.npmjs.com/package/@craco/craco

here is text from given link

Create React App v4 is not officially supported by Amplify UI. When you use it, you may get the following error ./node_modules/@aws-amplify/ui-react/dist/esm/components/..\/\*.mjs

Can’t import the named export ‘Amplify’ from non EcmaScript module (only default export is available) To resolve the error, you may either (1) upgrade to Create React App version 5 (Migration Guide), or (2) override the webpack config using tools like React App Rewired, Craco to add the following rule:

{
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      }
    ]
  }
}

om2345 on Apr 10, 2023

Since the issue here seems to be around an older version of react-scripts, i’ll go ahead and mark this issue as closed.

Thanks!

nadetastic on Apr 14, 2023

@lciano1 from what you shared it looks like you are using react-scripts: ^2.1.3 could you try updating to the latest version of react-scripts?

https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md#migrating-from-40x-to-500

This is the correct solution for me, CRA used version 2.1.3 of react-scripts I changed it to latest version(5.0.1) delete node_modules and rerun npm install and it fixed the issue

boyepanthera on Apr 11, 2023

Glad it worked @lciano1 😄

@om2345 from your comments, I am assuming that you were able to get things working as well, but let me know if that is incorrect

nadetastic on Apr 11, 2023

That fixed it! Thanks!

lciano1 on Apr 11, 2023

{
  "name": "underscore-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.7.11",
    "@aws-amplify/ui-react": "^4.5.1",
    "aws-amplify": "^5.0.25",
    "aws-amplify-react": "^5.1.43",
    "aws-appsync": "^4.1.9",
    "aws-appsync-auth-link": "^2.0.2",
    "chart.js": "^4.2.1",
    "clsx": "^1.0.4",
    "dayjs": "^1.11.7",
    "editorjs-blocks-react-renderer": "^1.3.0",
    "eslint": "^5.12.0",
    "graphql-tag": "^2.10.3",
    "history": "^4.9.0",
    "immutability-helper": "^3.1.1",
    "lodash": "^4.17.21",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "qs": "^6.9.4",
    "query-string": "^6.12.1",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.0",
    "react-chartjs-2": "^5.2.0",
    "react-contenteditable": "^3.3.6",
    "react-copy-to-clipboard": "^5.1.0",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.2.0",
    "react-draggable": "^4.4.5",
    "react-editor-js": "^2.0.6",
    "react-moment": "^1.1.2",
    "react-perfect-scrollbar": "^1.5.3",
    "react-popper": "^2.2.5",
    "react-router-dom": "^6.10.0",
    "react-router-hash-link": "^2.4.3",
    "react-scripts": "^5.0.1",
    "react-table": "^7.7.0",
    "react-toastify": "^9.0.3",
    "react-window": "^1.8.6",
    "styled-components": "^5.3.9"
  },
  "devDependencies": {
    "@craco/craco": "^5.9.0",
    "@testing-library/react": "^14.0.0",
    "@types/chart.js": "^2.9.35",
    "@types/faker": "^6.6.9",
    "@types/jest": "^27.4.0",
    "@types/lodash": "^4.14.178",
    "@types/node": "^17.0.15",
    "@types/react": "^18.0.33",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^18.0.11",
    "@types/react-router-dom": "^5.3.3",
    "@types/react-router-hash-link": "^2.4.5",
    "@types/react-table": "^7.7.10",
    "@types/react-toastify": "^4.1.0",
    "@types/react-window": "^1.8.5",
    "@types/styled-components": "^5.1.22",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier": "^1.17.1",
    "prettier-eslint": "^8.8.2",
    "prettier-eslint-cli": "^7.1.0",
    "typescript": "^4.9.5"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

om2345 on Apr 10, 2023