Introduction⌗

Ever since graphql-upload v14, the maintainer has made the controversial decision to force deep imports. This means that you can no longer do this:

import {GraphQLUpload} from 'graphql-upload';

Now you have to change that to this:

import GraphQLUpload from 'graphql-upload/GraphQLUpload.mjs';

Although this is dubious at best, this seems like a quick fix. It is, except when you use TypeScript.

The Proposed “Solutions”⌗

Now I’m not going to document all the proposed solutions from the maintainer and the community alike here. I’ve spent quite a few hours trying to fix this myself. I’ve followed this, this, this, that and probably a lot more when I went deep into the rabbit hole. But nothing seemed to work, and even if it did, the “solutions” often meant changing your tsconfig.json to allow JavaScript and **** like that.

The Actual Solution⌗

Now whilst trying to solve this problem I stumbled on a graphql-upload alternative, namely graphql-upload-minimal. It’s a fork from graphql-upload which is literally a drop-in replacement. Even the TypeScript types are exactly like graphql-upload pre v14.

This meant I just had to remove graphql-upload and its types package and install this one. Then change lines like this:

import {FileUpload, GraphQLUpload} from 'graphql-upload';

To:

import {FileUpload, GraphQLUpload} from 'graphql-upload-minimal';

And boom, it works exactly like before.