@graphql-yoga/apollo-link: ESM import issue with Next.js

[trevorblades]

Describe the bug

I'm trying to use @graphql-yoga/apollo-link in a Next.js project. It works in development, but when I try to build the site, it errors out and complains about the way that @apollo/client is imported in a dependency of this library.

Perhaps this issue should be opened on the @graphql-tools/executor-apollo-link repo, but I wanted to flag this problem and see if anyone has any suggestions on how to work around it.

Your Example Website or App

https://github.com/trevorblades/next-yoga

Steps to Reproduce the Bug or Issue

1. yarn
2. yarn build

Expected behavior

The build fails with the following error:

./node_modules/@graphql-tools/executor-apollo-link/esm/index.js
Attempted import error: '@apollo/client' does not contain a default export (imported as 'apolloImport').

I believe this is because I'm importing @graphql-yoga/apollo-link using import, which tells it to load from its ESM directory, which loads @graphql-tools/executor-apollo-link using ESM as well. Unfortunately, Next (most likely webpack) doesn't like the way that @apollo/client is imported in that file.

I can temporarily work around this by using require to import the Yoga link, but my linter isn't very happy about that:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { YogaLink } = require("@graphql-yoga/apollo-link");

Ideally, I would like to just import { YogaLink } from "@graphql-yoga/apollo-link/cjs", but that doesn't work either and I get the following error:

Package subpath './cjs' is not defined by "exports" in /Users/trevorblades/Sites/next-yoga/node_modules/@graphql-yoga/apollo-link/package.json

Screenshots or Videos

No response

Platform

• OS: macOS
• NodeJS: 16.18.0
• @graphql-yoga/apollo-link version: 1.0.1

Additional context

No response

[n1ru4l]

import { YogaLink } from "@graphql-yoga/apollo-link/cjs"

This seems more like an anti-pattern we should try to avoid in a cross-ESM/CJS scenario. ESM should always be resolved in an ESM context. CJS should always be resolved in an ESM context.

However, there is one problem here as @apollo/* packages do not properly specify an exports map and tools like Next.js try to resolve ESM without following the same way Node.js would resolve ESM. 😔

We can probably find workarounds for this... The cleanest solution would be if apollo client starts the adoption of a proper exports map or drop "fake" ESM.