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

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.

Angular could provide a workaround but it seems that it is not their problem. Graphql-js should adapt their configuration for Webpack 5.

Ok I re-re-re read thru a lot of posts. Looks like 12.0.0-beta.0 with thefullySpecified: false vs listing out extensions got rid of the graphql errors.

crypto w/ cognito was still an issue. Its unclear if amplify needs crypto in the polyfill so I’ll dive into that further. Prior I had browser { crypto: false} in the package.json so I went ahead and added fallback: { crypto: false } to the custom-webpack.config.js. custom-webpack.config.js:

module.exports = {
    module: {
        rules: [
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false,
                    fallback: {
                        crypto: false
                    }
                }
            }
        ]
    }
}

angular.json really should be a yml or js file if we are going to get into heavy mods. No comments in JSON is disqualifying. 😃

Just left with -

/node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js depends on 'crypto-js/core'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Update: this was fixed by adding that package to my pre-existing list from Angular 11 (angular.json):

"architect": {
                "build": {
                    "builder": "@angular-builders/custom-webpack:browser",
                    "options": {
                        "customWebpackConfig": {
                            "path": "./custom-webpack.config.js",
                            "mergeRules": {
                                "module": {
                                    "rules": "prepend"
                                }
                            },
                            "replaceDuplicatePlugins": true
                        },
                        "allowedCommonJsDependencies": [
                            "uuid",
                            "ulid",
                            "url",
                            "lodash/get",
                            "lodash/isEmpty",
                            "lodash/isEqual",
                            "@aws-amplify/core",
                            "buffer",
                            "@aws-crypto/sha256-js",
                            "crypto-js/hmac-sha256",
                            "crypto-js/lib-typedarrays",
                            "crypto-js/core",
                            "zen-observable",
                            "js-cookie",
                            "isomorphic-unfetch",
                            "@aws-crypto/crc32",
                            "fast-xml-parser",
                            "@aws-crypto/sha256-browser",
                            "axios"
                        ],
                        ...

The custom webpack doesn’t work when compilng for production because it’s version 4, so this is what’s working for me now.

1. Install @angular-builders/custom-webpack@12.0.0-beta.0 - this includes webpack 5
2. create custom-webpack.config.js in your root folder with the following in it:

module.exports = {

    // This has been included because of graphql
    module: {
        rules: [

            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false,
                },
            }
        ]
    }
}

1. In angular.json, replace the following:

architect.build.builder: "@angular-builders/custom-webpack:browser"

configurations.production.aot: true

architect.serve.builder: "@angular-builders/custom-webpack:dev-server"

The problem is here : https://github.com/graphql/graphql-js/issues/2721