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

ashwinikumar07 commented 3 months ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Version

v6

Amplify Categories

api

Backend

CDK

Environment information

``` # Put output below this line System: OS: Windows 11 10.0.22631 CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz Memory: 8.31 GB / 31.73 GB Binaries: Node: 20.15.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.22621.3527 npmPackages: @aws-amplify/api: ^6.0.42 => 6.0.42 (5.4.12) @aws-amplify/api/internals: undefined () @aws-amplify/api/server: undefined () @babel/core: ^7.13.14 => 7.24.9 @babel/plugin-proposal-class-properties: ^7.13.0 => 7.18.6 @babel/plugin-proposal-object-rest-spread: ^7.13.8 => 7.20.7 @babel/plugin-syntax-dynamic-import: ^7.8.3 => 7.8.3 @babel/plugin-transform-property-literals: ^7.12.13 => 7.24.7 @babel/plugin-transform-runtime: ^7.14.5 => 7.24.7 @babel/preset-env: ^7.13.12 => 7.25.3 @babel/preset-react: ^7.13.13 => 7.13.13 @bugsnag/js: ^7.9.0 => 7.9.2 @bugsnag/plugin-react: ^7.9.0 => 7.9.2 @fortawesome/fontawesome-svg-core: ^1.2.35 => 1.2.35 @fortawesome/free-brands-svg-icons: ^5.15.3 => 5.15.3 @fortawesome/free-regular-svg-icons: ^5.15.3 => 5.15.3 @fortawesome/free-solid-svg-icons: ^5.15.3 => 5.15.3 @fortawesome/react-fontawesome: ^0.1.14 => 0.1.14 @rails/webpacker: ^5.4.0 => 5.4.4 @reduxjs/toolkit: ^1.6.1 => 1.6.1 @reduxjs/toolkit-query: 1.0.0 @reduxjs/toolkit-query-react: 1.0.0 @testing-library/dom: ^7.30.3 => 7.30.3 @testing-library/jest-dom: ^5.14.1 => 5.14.1 @testing-library/react: ^11.2.6 => 11.2.6 @testing-library/user-event: ^13.1.1 => 13.1.2 @tinymce/tinymce-react: ~3.8.4 => 3.8.4 @trussworks/react-uswds: ^2.0.0 => 2.0.0 @use-it/interval: ^1.0.0 => 1.0.0 @wojtekmaj/enzyme-adapter-react-17: ^0.6.0 => 0.6.1 antd: ^4.15.0 => 4.15.1 aws-amplify: ^5.3.20 => 5.3.20 axios: ^1.7.3 => 1.7.3 axios-mock-adapter: ^1.18.2 => 1.19.0 babel-eslint: ^10.1.0 => 10.1.0 babel-jest: ^29.7.0 => 29.7.0 babel-loader: ^8.3.0 => 8.3.0 chance: ^1.1.6 => 1.1.7 classnames: ^2.3.1 => 2.5.1 core-js: ^3.10.0 => 3.38.0 dayjs: ^1.11.3 => 1.11.3 downloadjs: ^1.4.7 => 1.4.7 enzyme: ^3.11.0 => 3.11.0 enzyme-adapter-react-16: ^1.15.6 => 1.15.6 es6-symbol: ^3.1.3 => 3.1.4 eslint: ^7.23.0 => 7.24.0 eslint-loader: ^4.0.2 => 4.0.2 eslint-plugin-jest: ^24.3.4 => 24.3.5 eslint-plugin-react: ^7.23.1 => 7.23.2 eslint-plugin-react-hooks: ^4.2.0 => 4.2.0 focus-trap-react: ^8.7.0 => 8.7.0 font-awesome: ^4.7.0 => 4.7.0 foreman: ^3.0.1 => 3.0.1 history: ^5.0.0 => 5.0.0 (4.10.1) hoist-non-react-statics: ^3.3.2 => 3.3.2 immutable: ^3.8.2 => 3.8.2 (4.3.7) jest: ^29.7.0 => 29.7.0 jest-environment-jsdom-sixteen: ^1.0.3 => 1.0.3 jest-enzyme: ^4.2.0 => 4.2.0 jest-fetch-mock: ^3.0.3 => 3.0.3 msw: ^0.28.1 => 0.28.1 nanoid: ^3.1.22 => 3.3.7 prettier: ^2.0.5 => 2.2.1 prop-types: ^15.7.2 => 15.8.1 pspdfkit: 2022.4.2 => 2022.4.2 react: ^17.0.2 => 17.0.2 (18.2.0) react-dayjs: ^0.3.2 => 0.3.2 react-dom: ^17.0.2 => 17.0.2 react-modal: ^3.11.2 => 3.13.1 react-popover: ^0.5.10 => 0.5.10 react-redux: ^7.2.3 => 7.2.3 react-router-dom: ^5.2.0 => 5.2.0 react-sortable-hoc: ^2.0.0 => 2.0.0 react-tooltip: ^4.2.21 => 4.2.21 react-transition-group: ^4.4.1 => 4.4.1 (2.9.0) react-transition-group/CSSTransition: undefined () react-transition-group/ReplaceTransition: undefined () react-transition-group/SwitchTransition: undefined () react-transition-group/Transition: undefined () react-transition-group/TransitionGroup: undefined () react-transition-group/TransitionGroupContext: undefined () react-transition-group/config: undefined () react-widgets: 4.5.0 => 4.5.0 redux: ^4.0.5 => 4.2.1 redux-immutable: ^4.0.0 => 4.0.0 redux-mock-store: ^1.5.4 => 1.5.4 redux-promise-middleware: ^6.1.2 => 6.1.2 redux-thunk: ^2.3.0 => 2.4.2 regenerator-runtime: ^0.13.7 => 0.13.11 (0.14.1) rosie: ^2.1.0 => 2.1.0 sinon: ^4.4.6 => 4.5.0 tinymce: ^5.10.9 => 5.10.9 url-polyfill: ^1.1.10 => 1.1.12 uuid: ^8.3.0 => 8.3.2 (3.4.0, 9.0.1, 7.0.3) webpack-bugsnag-plugins: ^1.4.3 => 1.8.0 webpack-dev-server: ^3.11.2 => 3.11.3 whatwg-fetch: ^3.6.2 => 3.6.2 npmGlobalPackages: @aws-amplify/cli: 12.12.4 create-react-app: 5.0.1 nodemon: 3.1.4 yarn: 1.22.22 ```

Describe the bug

I am integrating the aws appsync graphql api with my existing react project. Getting the below compile time error

Expected behavior

The project should build successfully.

Reproduction steps

npm install 'aws-amplify'

Code Snippet

// Put your code below this line.
import config from '../../../../amplify/aws-exports';
import { Amplify } from 'aws-amplify';
import { generateClient } from 'aws-amplify/api';
import { getdata } from '../../../../amplify/graphql/queries';

  Amplify.configure(config);
  const client = generateClient();

const handle = async () => {
    const result = await client.graphql({ query: getdata});
    console.log('graphql call: ', result.data.getdata);
  };

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

"@aws-amplify/api": "^6.0.42", "aws-amplify": "^5.3.20",

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

chrisbonifacio commented 3 months ago

Hi @ashwinikumar07 thank you for raising this issue.

This seems to be a bundling issue, possibly caused by the versions of your dependencies.

For example, you have aws-amplify@5.3.20 but your @aws-amplify/api@6.0.42 is more up to date and on v6.

I would recommend upgrading your aws-amplify package if you want to use generateClient

I also noticed that you are using create-react-app which is no longer being maintained and would recommend upgrading to a more modern bundling tool like vite

If you are starting a new project, you should also check out our Quickstart guide for Amplify Gen 2

https://docs.amplify.aws/react/start/quickstart/

There are template apps that you can use to quickly deploy and have an Amplify Gen 2 backend and/or sandbox environment to work with.

Let me know if that helps!

ashwinikumar07 commented 3 months ago

@chrisbonifacio I tried to upgrade the 'aws-amplify' to 6.4.3. But still getting the same compilation error.

chrisbonifacio commented 3 months ago

@ashwinikumar07 Would you be able to provide an app that reproduces this issue? The reproduction steps provided do not reproduce the issue because it would only install the latest version of aws-amplify but the issue might be related to bundler configuration because you're using Create React App which is no longer maintained so. If you can, we recommend switching to a modern bundler like Vite.

This seems to be more of a bundler issue than amplify library issue.

ashwinikumar07 commented 3 months ago

Thank @chrisbonifacio for your help. The issue has been resolved by adding the .mjs extension in webpack config file, just before .jsx extension.

chrisbonifacio commented 3 months ago

Thank @chrisbonifacio for your help. The issue has been resolved by adding the .mjs extension in webpack config file, just before .jsx extension.

Ah, thank you for following up with the solution! Glad you're unblocked 😁

aws-amplify / amplify-js