search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.41k stars 2.11k forks source link

Can't import the named export 'Amplify' from non EcmaScript module (only default export is available) #11190

Closed andrew-ci closed 1 year ago

andrew-ci commented 1 year ago

How did you install the Amplify CLI?

npm

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

16

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.

Screenshot 2023-04-05 at 09 15 49 Screenshot 2023-04-05 at 09 16 08

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:

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

Project Identifier

No response

Log output

``` # Put your logs below this line ```

Additional information

No response

Before submitting, please confirm:

josefaidt commented 1 year ago

Hey @andrew-ci :wave: thanks for raising this! I'm going to transfer this to our amplify-js repository for better assistance

nadetastic commented 1 year ago

Hi @andrew-ci - could you share your package.json please? Interested to see what versions you are using.

andrew-ci commented 1 year ago

Hi @nadetastic , thanks for the reply. Here is what's in package.json

{ "name": "notes", "version": "0.1.0", "private": true, "dependencies": { "@aws-amplify/ui-react": "^4.4.3", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "aws-amplify": "^5.0.23", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^2.1.3", "typescript": "^5.0.3", "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" ] } }

I haven't added anything beyond what's in the tutorial.

nadetastic commented 1 year ago

@andrew-ci Thanks for sharing - I believe the issue here is that you are importing AmplifyProvider from @aws-amplify/ui-react instead of ThemeProvider. This has been renamed since version 2.18.3[1] and because you are using 4.4.3 you would need to import with the correct name.

import { ThemeProvider } from '@aws-amplify/ui-react';

Could you try updating your code and confirm the error goes away?

[1] https://ui.docs.amplify.aws/react/theming#getting-started

nadetastic commented 1 year ago

@andrew-ci Looking into this further, it actually looks like the issue is related to your version of react-scripts - more specifically some webpack configuration. I'd recommend upgrading to the latest version of react-scripts as well

andrew-ci commented 1 year ago

Ok, followed your two comments, updated to 'ThemeProvider' and updated react-scripts, and after a bit of messing around due to dependency conflicts it finally compiled.

Many thanks for your help!

Don't know who does those tutorials but it feels like there should be some extra info about some of these issues.

nadetastic commented 1 year ago

@andrew-ci glad you were unblocked! I'm reaching out internally to the owner so we can address this issue.

lciano1 commented 1 year ago

I was running into the same issue, but followed both of the recommendations. I am still getting the "Can't import the named export 'Amplify' from non EcmaScript module (only default export is available)"

om2345 commented 1 year ago

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'
      }
    ]
  }
}
nadetastic commented 1 year ago

@lciano1 could you please check/share your package.json to verify your dependency versions?

om2345 commented 1 year ago 
{
  "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"
    ]
  }
}
lciano1 commented 1 year ago 
{
  "name": "[app-name]",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@aws-amplify/ui-react": "^4.5.1",
    "@fontsource/inter": "^4.5.15",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify-react": "^5.1.43",
    "aws-appsync": "^4.1.9",
    "aws-appsync-auth-link": "^2.0.2",
    "aws-amplify": "^5.0.25",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^2.1.3",
    "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"
    ]
  }
}
nadetastic commented 1 year ago

@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

lciano1 commented 1 year ago

That fixed it! Thanks!

nadetastic commented 1 year ago

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

om2345 commented 1 year ago

Ya things are working well in my condition as i shared you the package.json file

boyepanthera commented 1 year ago

@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

nadetastic commented 1 year ago

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!