Amplify-js: @aws-amplify/api: export 'GraphQLError' was not found in 'graphql'

Created on 13 Nov 2019 · 7Comments · Source: aws-amplify/amplify-js

Describe the bug
When I try to build my typescript react app, I get the following error:

ERROR in ./node_modules/@aws-amplify/api/lib-esm/API.js 543:40-52
"export 'GraphQLError' was not found in 'graphql'
 @ ./node_modules/@aws-amplify/api/lib-esm/index.js
 @ ./node_modules/aws-amplify/lib/index.js
 @ ./src/pages/ForgotPassword/index.tsx
 @ ./src/routes.ts
 @ ./src/components/Routes.tsx
 @ ./src/App.tsx
 @ ./src/client/index.tsx
 @ multi regenerator-runtime/runtime ./src/client/index.tsx

ERROR in ./node_modules/@aws-amplify/api/lib-esm/API.js 560:41-53
"export 'GraphQLError' was not found in 'graphql'
 @ ./node_modules/@aws-amplify/api/lib-esm/index.js
 @ ./node_modules/aws-amplify/lib/index.js
 @ ./src/pages/ForgotPassword/index.tsx
 @ ./src/routes.ts
 @ ./src/components/Routes.tsx
 @ ./src/App.tsx
 @ ./src/client/index.tsx
 @ multi regenerator-runtime/runtime ./src/client/index.tsx

ERROR in ./node_modules/@aws-amplify/api/lib-esm/API.js 607:65-77
"export 'GraphQLError' was not found in 'graphql'
 @ ./node_modules/@aws-amplify/api/lib-esm/index.js
 @ ./node_modules/aws-amplify/lib/index.js
 @ ./src/pages/ForgotPassword/index.tsx
 @ ./src/routes.ts
 @ ./src/components/Routes.tsx
 @ ./src/App.tsx
 @ ./src/client/index.tsx
 @ multi regenerator-runtime/runtime ./src/client/index.tsx

It looks like aws-amplify can't find graphql components.

To Reproduce
Steps to reproduce the behavior:

npm run install
npm run dev (ts-node -T -O '{\"module\": \"commonjs\"}' --transpileOnly internal/scripts/build -- --optimize)

pending-close-response-required to-be-reproduced

Source

piraka9011

👍4 👀3

Most helpful comment

Update: I solved this by updating my webpack config.
I moved .mjs to come before .js in my resolve extensions, and I also did not have .mjs files excluded in my file-loader config

resolve: {
  extensions: ['.mjs', '.js', '.json', '.jsx', '.css']
}

and my file loader:

const fileLoader = {
  exclude: [/\.(js|jsx|ts|tsx|css|mjs|html|ejs|json)$/],
  use: [
    {
      loader: require.resolve('file-loader'),
      options: {
        name: 'assets/[name].[hash:8].[ext]'
      }
    }
  ]
}

Hope this helps!

Also, if anyone has an explanation as to why the order of resolve extensions matters, I'd love to know.

RyanWarner on 13 Dec 2019

👍3 ❤2 🎉2

All 7 comments

Hey @piraka9011 have you made any progress figuring this out? I've been blocked by this for a few days and nothing I've tried has helped.

RyanWarner on 12 Dec 2019

@RyanWarner No I have not. I have tried using an older version of aws-amplify but it looks like the issue is related to the version of GraphQL and @BennettDixon has provided a potential fix.

Using his fix probably means you will have to have your own version of amplify in a node-modules folder until it is merged.

piraka9011 on 12 Dec 2019

@RyanWarner @piraka9011 I am taking a look now.

elorzafe on 12 Dec 2019

Update: I solved this by updating my webpack config.
I moved .mjs to come before .js in my resolve extensions, and I also did not have .mjs files excluded in my file-loader config

resolve: {
  extensions: ['.mjs', '.js', '.json', '.jsx', '.css']
}

and my file loader:

const fileLoader = {
  exclude: [/\.(js|jsx|ts|tsx|css|mjs|html|ejs|json)$/],
  use: [
    {
      loader: require.resolve('file-loader'),
      options: {
        name: 'assets/[name].[hash:8].[ext]'
      }
    }
  ]
}

Hope this helps!

Also, if anyone has an explanation as to why the order of resolve extensions matters, I'd love to know.

RyanWarner on 13 Dec 2019

👍3 ❤2 🎉2

@RyanWarner thanks for your comment, for me is not failing probably because I have a different webpack config. I am using standard create-react-app with typescript

elorzafe on 16 Dec 2019

@piraka9011 Did you try the fix above from RyanWarner? Let us know if you are still facing this issue.