ERR_UNSUPPORTED_DIR_IMPORT with apollo-angular and @apollo/client

[andreialecu]

Describe the bug

I've been experimenting with migrating a test suite from jest over to vitest for an Angular project and ran into a weird issue. With jest everything works properly, as does with the angular cli (which doesn't use Vite yet, but they're migrating to it)

Error is:

Error: Directory import '/home/projects/vitest-dev-vitest-7x42dr/node_modules/@apollo/client/core' is not supported resolving ES modules imported from /home/projects/vitest-dev-vitest-7x42dr/node_modules/apollo-angular/fesm2022/ngApollo.mjs
Did you mean to import @apollo/client/core/core.cjs?

This could be vite related.

See below for a simple repro.

Reproduction

https://stackblitz.com/~/edit/vitest-dev-vitest-djnid1?initialPath=/__vitest__/

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (5) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm
  npmPackages:
    vite: latest => 5.0.12

Used Package Manager

npm

Logs

FAIL  test/basic.test.ts [ test/basic.test.ts ]
Error: Directory import '/home/projects/vitest-dev-vitest-7x42dr/node_modules/@apollo/client/core' is not supported resolving ES modules imported from /home/projects/vitest-dev-vitest-7x42dr/node_modules/apollo-angular/fesm2022/ngApollo.mjs
Did you mean to import @apollo/client/core/core.cjs?
 ❯ __node_internal_ ../../../blitz.26ebe8bf.js:36:5406
 ❯ new <anonymous> ../../../blitz.26ebe8bf.js:36:4168
 ❯ ../../../blitz.26ebe8bf.js:114:11863
 ❯ ../../../blitz.26ebe8bf.js:114:12159
 ❯ defaultResolve ../../../blitz.26ebe8bf.js:114:12167
 ❯ nextResolve ../../../blitz.26ebe8bf.js:248:2120
 ❯ ESMLoader.resolve ../../../blitz.26ebe8bf.js:248:7556
 ❯ ESMLoader.getModuleJob ../../../blitz.26ebe8bf.js:248:4387
 ❯ ../../../blitz.26ebe8bf.js:181:932
 ❯ _0x2de54a.link ../../../blitz.26ebe8bf.js:352:381740
 ❯ ../../../blitz.26ebe8bf.js:181:893

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[andreialecu]

The way apollo-angular is importing @apollo/client/core seems expected as per:

https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/#using-apollo-client-without-react

[hi-ogawa]

I think it's likely that apollo's documentation is "incorrect" in a sense that it's not considering less-forgiving NodeJs's ESM resolution.

It might have worked on Jest, but Vitest doesn't intercept the way apollo-angular importing @apollo/client/core in any ways, so it's simply surfacing the error from NodeJS's import. For example, this simple script also fails with a same error:

https://stackblitz.com/edit/vitest-dev-vitest-smbxnz?file=repro.mjs

// node repro.mjs
import * as Apollo from 'apollo-angular';
console.log(Apollo.APOLLO_NAMED_OPTIONS.toString());

To align with ESM resolution spec, probably it needs to be import "@apollo/client/core/index.js" and indeed I can see that some people write in this way (for example vuejs/apollo) https://github.com/search?q=%22%40apollo%2Fclient%2Fcore%2Findex.js%22&type=code

I expect the change is required on apollo side, but let's see how it goes kamilkisiela/apollo-angular#2172.

[hi-ogawa]

At least this doesn't look like a Vite issue, so let me close this.
If you have an issue when migrating from Jest to Vitest, I think it's usually better to report it on Vitest's issue or discussion first https://github.com/vitest-dev/vitest/issues, https://github.com/vitest-dev/vitest/discussions.

[andreialecu]

Thanks @hi-ogawa - I opened apollographql/apollo-client#11569

Is there any workaround I could use with Vitest meanwhile?

I'm new to Vite's config system and tried resolve.alias but it doesn't seem to help. It's not clear from the documentation, but it appears it does not take effect for things in node_modules.

[hi-ogawa]

Thanks for reporting the issue on Apollo. Interesting, they already had the same issue reported before. Hope you'll get some reaction there.

Is there any workaround I could use with Vitest meanwhile?
I'm new to Vite's config system and tried resolve.alias but it doesn't seem to help. It's not clear from the documentation, but it appears it does not take effect for things in node_modules.

Unfortunately resolve.alias is not expected to work to patch how apollo-angular imports @apollo/client/core. This applies both Vitest and Vite SSR since they don't try to modify "external" code (in this case apollo-angular) but simply let NodeJs import it, thus the error you see in this case should be same as simple node repro.mjs as I mentioned above.

You'll probably see the documentation saying "external" in many places (for example this warning https://vitejs.dev/config/shared-options.html#resolve-alias) and this is what it means by "external" or "externalized".

"Externalizing" is the default behavior but you can control it by server.deps.inline (Vitest https://vitest.dev/config/#server-deps-inline) or ssr.noExternal (Vite SSR https://vitejs.dev/guide/ssr.html#ssr-externals).

I just tested server.deps.inline: ["apollo-angular"] and also adding import '@angular/compiler' in the test, then it looks like it made through. But, I think apollo side should be aware of their packaging/documentation is not esm spec compliant.

https://stackblitz.com/edit/vitest-dev-vitest-5dnvv6?file=vite.config.ts