Error [ERR_UNSUPPORTED_DIR_IMPORT]

[happysalada]

Hi, thank you for the project!

Upon adding this to an almost brand-new svelte kit project with adapter static, I get the following error

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/raphael/dev/nyt/node_modules/.pnpm/svelte-apo
[email protected]_0797cffbf2a19052134926e8d6fad18a/node_modules/@apollo/client/core' is not supported resolving ES
 modules imported from /Users/raphael/dev/nyt/node_modules/.pnpm/[email protected]_0797cffbf2a1905213492
6e8d6fad18a/node_modules/svelte-apollo/dist/svelte-apollo.js
Did you mean to import @[email protected][email protected]/node_modules/@apollo/client/core/core.cjs?
    at new NodeError (internal/errors.js:322:7)
    at finalizeResolution (internal/modules/esm/resolve.js:314:17)
    at moduleResolve (internal/modules/esm/resolve.js:776:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:887:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
    at link (internal/modules/esm/module_job.js:75:36)

I've tried to check your example svelte-kit to see if there was anything different in the config, but couldn't find anything.
I've almost taken verbatim the code you had in your example.
this is the relevant part from my index.svelte

	import { ApolloClient, InMemoryCache, gql } from "@apollo/client/core";
	import { setClient, query, mutation } from "svelte-apollo";	
  import { AGENTS } from '$lib/queries'
	const client = new ApolloClient({
		uri: "https://yq4l7sc1.directus.app/gql",
		cache: new InMemoryCache()
	});
	setClient(client);

[cluplau]

I have experienced the same thing. @timhall any insight on this?

[j2l]

I took the zip of this great project, extracted the sveltekit example and run into the same issue.

Following proposed fixed, I tried:

import pkg from '@apollo/client/core/core.cjs';
const { InMemoryCache, gql } = pkg;
import { ApolloClient } from '@apollo/client/core/ApolloClient';

without luck, now with error in the apollo module itself .../node_modules/@apollo/client/utilities/globals/fix-graphql.js:1 import { remove } from "ts-invariant/process/index.js";

[lorensr]

Adding this to my svelte.config.js worked:

      optimizeDeps: {
        exclude: ['@apollo/client', 'svelte-apollo'],
      },
      ssr: {
        noExternal: ['@apollo/client', 'svelte-apollo'],
      },

to kit.vite