Amplify-js: GraphQL always gets bundled (webpack)

[jadbox]

These are the only imports I have of Amplify, and I'm not using any of the GraphQL features. However, when using Webpack Bundle Analyzer, I see that almost 150kb of my project hundle is the GraphQL module that Amplify imports. I did try to tell Webpack to exclude the module from my build, but then Amplify fails to load because it explicitly imports GraphQL in one of its files (there was no stack trace given). Again, below are the only imports my project uses:

import Auth from '@aws-amplify/auth';
import { Hub, ConsoleLogger } from '@aws-amplify/core';

aws-amplify 1.1.4
aws-amplify-react 2.0.5

[powerful23]

@jadbox can you try removing aws-amplify and only installing @aws-amplify/auth?

i.e. npm install --save @aws-amplify/auth

[jadbox]

@powerful23 So installed @aws-amplify/core' (I need it for Hub unless there's another way to get it) and @aws-amplify/auth. However, I forgot I was importing aws-amplify-react for the hosted UI redirect feature and now it complains about missing all sorts of amplify modules... I didn't get through them all but a good guess might be that graphql might be one of them. This is my only import for amplify-react:
import { withOAuth } from 'aws-amplify-react';

Once I removed aws-amplify-react from my project, the build dropped by 500kb. However, my Analyzer is broken now and I'm not sure if this ended up also removing graphql.

Is there a better way to just get withOAuth? Is aws-amplify-react modular too?

[jadbox]

With a little more snooping, I'm 80% sure it's 'aws-amplify-react' that's importing graphql, even when it's unused. Is there a roadmap item to make aws-amplify-react modular so that only parts can be imported?

[zyzski]

graphql is bundled in mine even after removing aws-amplify-react. here's a screenshot of my bundle generated by create-react-app.

this is my only import statement:
import Amplify, { Auth } from 'aws-amplify';

[powerful23]

The root cause is the aws-amplify which will import all the modules. And if you are using aws-amplify-react, you have to import the whole aws-amplify library for now.

[zyzski]

thanks for the quick response. is there any way to configure the auth module with cognito pool info without including Amplify?

[Foosballfan]

Hi,
I've got the same issue. Here is the console output when attempting to only import the Auth part of aws-amplify in my application while using aws-amplify-react.

[kadrach]

@aws-amplify/api always required bundling graphql as well. It would be nice if the aws4 signature process for REST endpoints (e.g. Lambda) could be loaded individually.

[dave-irvine]

Is anyone still looking into this? I'm still getting all of GraphQL bundled even though I don't access any GraphQL features.

It looks like this line:

import { OperationDefinitionNode, GraphQLError } from 'graphql';

from
https://github.com/aws-amplify/amplify-js/blob/master/packages/api/src/API.ts#L13

gets compiled down to:

var graphql_1 = require("graphql");
...snip...
error = new graphql_1.GraphQLError('No graphql endpoint provided.');

when transpiled from TS to JS, so instead of just importing the parts needed to create a GraphQLError, you get the entire library.

[samparnell]

The root cause is the aws-amplify which will import all the modules. And if you are using aws-amplify-react, you have to import the whole aws-amplify library for now.

Will this be resolve at some point? If you are just using Amplify for Auth in a React app then there is an excessive amount of additional stuff that gets included.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.