Support sveltekit (vite)

Intended outcome: Apollo Client to work with sveltekit

Actual outcome: I’m attempting to use Apollo Client with sveltekit, I can run the dev server just fine, but when I build the project and run it using node I get an error

Directory import '/Users/.../node_modules/@apollo/client/core' is not supported resolving ES modules imported from /Users/.../.svelte-kit/output/server/app.js
Did you mean to import @apollo/client/core/core.cjs.js?

Now if I instead import the Apollo Client from @apollo/client instead of @apollo/client/core I don’t get this issue, I suspect because of this line in the Apollo Client package.json "module": "./index.js" (but I’m no expert)

However I cannot import the client directly from @apollo/client because it is dependent upon the react module, and since sveltekit does server side rendering the react package explodes in a node environment. here’s a related issue discussing this in the Vite repo (sveltekit uses Vite internally)

I guess my best bet would be to attempt to instruct the build process to replace @apollo/client/core with @apollo/client/core/index.js at build time, which I will attempt to look into as a fix.

Are there any other suggested approaches fix this issue?

How to reproduce the issue: Download the sveltekit starter npm init svelte@next my-app Include the Apollo Client package Attempt to build I created a reproducible repo here Versions

System: OS: macOS 11.3 Binaries: Node: 16.0.0 - /usr/local/bin/node Yarn: 1.22.10 - ~/Documents/eddystone/node_modules/.bin/yarn npm: 7.10.0 - /usr/local/bin/npm Browsers: Chrome: 90.0.4430.212 Safari: 14.1 npmPackages: @apollo/client: ^3.3.18 => 3.3.18

[cudr]

Hi, @benjamn! I’ve checked @apollo/client@beta and have the same problem. Thinking this issue is related to https://github.com/sveltejs/kit/issues/612. If we need an import scope submodule, we need to add some export information, like https://github.com/ReactiveX/rxjs/pull/6192/files do.

In my case, adding these lines to @apollo/client package.json solved the problem:

"exports": {
    ".": {
      "node": "./main.cjs.js",
      "default": "./index.js"
    },
    "./cache": {
      "node": "./cache/cache.cjs.js",
      "default": "./cache/index.js"
    },
    "./core": {
      "node": "./core/core.cjs.js",
      "default": "./core/index.js"
    },
    "./link/schema": {
      "node": "./link/schema/schema.cjs.js",
      "default": "./link/schema/index.js"
    },
    "./link/http": {
      "node": "./link/http/http.cjs.js",
      "default": "./link/http/index.js"
    }
  },

What is your opinion on this?

[benmccann]

Thanks for all your help! And yes I can confirm it’s working now. Here’s is a fork of the repo posted above where it’s working: https://github.com/benmccann/sveltekit-apollo-build-bug/tree/working-version

All that is needed is an updated version of @apollo/client and then change the import from @apollo/client/core to @apollo/client/core/index.js

What do you think about a PR to add an exports map to support importing from @apollo/client/core as a slightly nicer API? Or would that be too breaking of a change?