question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Types are broken with `compilerOptions.module` set to `nodenext` due to imports missing file extensions

See original GitHub issue

Intended outcome:

Projects with TypeScript config compilerOptions.module set to nodenext or node16 should be able to import @apollo/client modules with working types. This is critical for using TypeScript correctly with modern Node.js packages or projects that use the package exports field, ESM in .mjs files, etc.

Actual outcome:

Types are broken for @apollo/client modules that have types that import other modules/types without correctly specifying the file extensions in the imports.

How to reproduce the issue:

In package.json:

{
  "name": "demo",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.6.9"
  }
}

In jsconfig.json:

{
  "compilerOptions": {
    "maxNodeModuleJsDepth": 10,
    "module": "nodenext",
    "noEmit": true,
    "strict": true
  }
}

In demo.mjs:

// @ts-check

import { ApolloLink } from "@apollo/client/link/core/ApolloLink.js";

new ApolloLink((request) => {
  console.log(request);
})

Notice how the types are incomplete for the ApolloLink constructor arguments and fall back to any:

Screen Shot 2022-07-07 at 6 29 01 pm

If you dig into the types for it, you can see that the RequestHandler type is being imported incorrectly (missing the file extension) from ./types, and TypeScript is unable to tell what its type is:

Screen Shot 2022-07-07 at 6 30 23 pm

If you change the import path to ./types.js (add the missing file extension), the types start to work:

Screen Shot 2022-07-07 at 6 30 34 pm

Ultimately fixing the types where ApolloLink is being constructed in the project:

Screen Shot 2022-07-07 at 6 31 09 pm

All imports, including for type only imports, should specify the full path including the file name for the module being imported.

As a side note, type only imports should use the type keyword but currently they don’t:

https://github.com/apollographql/apollo-client/blob/289336a5e126cb4b4ca9ec08badc68c9cd3e50fd/src/link/core/ApolloLink.ts#L4-L10

E.g:

import type {
  NextLink,
  Operation,
  RequestHandler,
  FetchResult,
  GraphQLRequest
} from './types.js';

Versions

  • Node.js: v18.4.0
  • typescript: v4.7.4
  • @apollo/client: v3.6.9

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:7
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
shauncocommented, Dec 21, 2022

Any updates on this? This is causing us quite a bit of pain as we try to move from CJS to ESM, and it seems like a pretty simple fix for the Apollo client…

1reaction
GeenCo86commented, Nov 15, 2022

We were able to resolve this same issue for AS4 via apollographql/apollo-server#6731

What is the result of this. Is there a fix in the client library or will it ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - How to resolve Node.js ES6 (ESM) Modules with ...
In the short term you can work around it by specifying the output file: in main.ts specify the .js extension and path: import...
Read more >
TSConfig Reference - Docs on every TSConfig option
When set to true, allowUmdGlobalAccess lets you access UMD exports as globals from inside module files. A module file is a file that...
Read more >
jsconfig.json Reference - Visual Studio Code
js doesn't reference a file b.ts explicitly (either using import or CommonJS modules), there is no common project context between the two files....
Read more >
Announcing TypeScript 4.7 - Microsoft Developer Blogs
directives; however, we received some feedback on import type and ... and .cjs files are always CommonJS modules, and there's no way to ......
Read more >
TypeScript errors and how to fix them
error TS1095: A 'set' accessor cannot have a return type annotation. ... of a file when that file is a module, but this...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found