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.