Typescript compilation error in Node context

[chadxz]

Issue Description

Trying to upgrade from 3.4.17 to latest and have started running into this error as of 3.5.0:

index.ts:5:8 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@apollo/client")' call instead.
  To convert this file to an ECMAScript module, change its file extension to '.mts', or add the field `"type": "module"` to '/project/workspace/package.json'.

5 } from "@apollo/client";
         ~~~~~~~~~~~~~~~~

I have included a reproduction link. Simply using "module": "NodeNext" in tsconfig.json will cause this. This is the recommended setting for "modern Node.js projects" per the TypeScript documentation. Do you have any recommendations on how to address this? My project is not ESM today.

Link to Reproduction

https://codesandbox.io/p/devbox/recursing-yalow-s8fmpr

Reproduction Steps

Run tsc in the terminal of the repro. Main config setting to set is "module": "NodeNext" in tsconfig.json

@apollo/client version

3.10.4

[jerelmiller]

Hey @chadxz 👋

Thanks for opening this! I'll do my best to take a look at this today. I'm currently working on a reproduction for a potential React bug and I'm on vacation starting tomorrow for the next week. If not me, I'll see if one of the other maintainers has some bandwidth to take a look. Thanks!

[jerelmiller]

Thanks for your patience!

There are two things that look like would get this to work for you. Either you'll need to specify your app with type: "module" in package.json so that you aren't using CommonJS, or you'll need to update your import to ensure you'll getting the CommonJS build. You can do this using the main.cjs path.

import {
  ApolloClient,
  InMemoryCache,
  type NormalizedCacheObject,
} from "@apollo/client/main.cjs";

While this is less than ideal, this should get you what you need for now. We'll be adding proper ESM support in v4 to avoid this issue going forward. Hope this helps!

[chadxz]

Thanks for the suggestion @jerelmiller!

I tried this and it looks like that is incompatible with TypeScript as well, unless I'm still missing something:

This is using @apollo/[email protected]

The same is true on the reproduction link:

[jerelmiller]

@chadxz thats...odd. I used your original reproduction and forked it to check. Here is my fork: https://codesandbox.io/p/devbox/gifted-thompson-y875p2?file=%2Findex.ts%3A4%2C8

If you run npx tsc or yarn tsc (pick your favorite) in the terminal, it passes just fine.

Without /main.cjs:

With /main.cjs

Odd that you're still seeing that error in the reproduction 🤔

[chadxz]

If you hover over the 3 dots at the beginning of the package name in your screenshot you'll probably see the same message I am seeing.

I can confirm that compiling works fine in the reproduction, but I think that's because it has a minimal tsconfig.json. If you add "strict": true to the tsconfig.json it will spit out the error at compile time.

[je00037]

Also facing this issue, is there any progress?

Adding the .d.ts file for @apollo/core/main.cjs gets rid of TS's complaints, but doesn't feel quite right that it's necessary to do this...

To confirm, this is with module: 'Node16', moduleResolution: 'Node16', strict: true in the tsconfig, where I'm building a library that exposes some logging functionality for consumers, which makes use of the ApolloLink from @apollo/client

[ashleyww93]

+1.

I also have this issue with Node16.

[aorsten]

Same issue with NodeNext

+1

[xenonhammer]

you can add your own package.json "type": "module"

[HiranmayaGundu]

I just ran into this. Best I can tell, this is because in the package.json, the types point to the ESM types, and so typescript thinks its importing esm instead of cjs. This was fixed in the server package here, by explicitly shipping cjs types: apollographql/apollo-server#7614