apollographql / apollographql/apollo-client-integrations

Mismatched ESM and CommonJS causes query ref assertion failure

Open
#442 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

`@apollo/client-integration-react-router` is intended to be used with the React Router framework which uses the Vite build system.

While this repository’s packages are ESM, `@apollo/client `is packaged as CommonJS. It must be included in the Vite `noExternal` configuration for React Router projects to apply CommonJS transformations.

However, if this repository’s packages are not marked `noExternal` as well, mixing CommonJS and ESM results in the assertion failure `Expected a QueryRef object, but got something else instead` when using `@apollo/client` hooks which operate on transported query refs like `useReadQuery`.

Contributor guide

No contributing guide indexed for this repository

Research direction

Review the Vite noExternal configuration for React Router projects and the packaging boundary between this repository’s ESM packages and @apollo/client’s CommonJS package. Reproduce the useReadQuery transported-query-ref assertion, then verify that the configuration change prevents the ESM/CommonJS mismatch.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript, vite
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.