-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support sveltekit (vite) #8218
Comments
CC @brainkim as per email with Alex |
@AndreasHald If you look in {
"name": "@apollo/client/core",
"main": "core.cjs.js",
"module": "index.js",
"types": "index.d.ts"
} you'll see both a CommonJS My question is… why isn't Node.js automatically using |
Alternatively, if either sveltekit or Vite has a build option for targeting CommonJS |
I'm encountering this exact issue. I think that part of the complexity here is that SvelteKit needs the same source code (e.g. I got a slightly different error than OP:
System: Windows 10 |
@dennisjlee Try updating to |
@benjamn thanks - I won't have time to try that for a few days but I will report back when I can. |
Hi, @benjamn! I've checked 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? |
Are there any more thoughts on @cudr's solution now that 3.4 has dropped and this issue is still surfacing? (3.4.x is otherwise awesome by the way!) |
I'm using the latest beta of apollo-client ( {
"name": "@apollo/client/core",
"type": "module",
"main": "core.cjs",
"module": "index.js",
"types": "index.d.ts",
"sideEffects": false
} That is, it has type=module, which I thought was the thing that's required here. |
Adding the exports map above as @cudr suggested would be a good solution. One tweak to that: you should also export |
Sorry to dig up a stale thread, but wondering if there's been any update to a solution for using Have tried importing directly from the import { ApolloClient, InMemoryCache } from '@apollo/client/core/core.cjs.js' For some reason I'm still getting the same directory import error even though I'm specifying a file to import? How are people adding the |
@cchyung yes. I solved this problem by adding a pre-build step that reads @apollo-client package.json, adds common exports lines to it, and overwrites the existing file. But this is a trick |
@cudr Thanks for getting back to me :) For others who are curious, here's line I used in the script we set up. We were deploying to vercel which fortunately let's you define a custom #!/bin/bash
yarn # install dependencies first
sed -i.bak "s/\"dependencies\":/\"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\/context\":{\"node\":\".\/link\/context\/context.cjs.js\",\"default\":\".\/link\/context\/index.js\"},\".\/link\/http\":{\"node\":\".\/link\/http\/http.cjs.js\",\"default\":\".\/link\/http\/index.js\"}},\n\"dependencies\":/" ../node_modules/@apollo/client/package.json |
Svelte-kit and all this stuff will work if apollo would add exports map. Hope apollo will fix this soon. Until I would use @cudr and @cchyung workaround (but it's not I would like to open PR by myself and try to propose it as solution to this issue but I am not really into how apollo works under the hood, I opened Note: I've killed hours to make apollo (and svelte-apollo) work with svelte. If you are struggling too, make sure to clean-up old "solutions" and workarounds you had before (for example My imports:
My sed command for imports above: |
@cchyung @cudr thanks for the "tricks"/"hack". However, they did not work for me with Apollo version (3.5.5) and latest Sveltekit (1.0.0-next.201), but removing the "exports": {
".": {
"node": "./main.cjs",
"default": "./index.js"
},
"./core": {
"node": "./core/core.cjs",
"default": "./core/index.js"
},
"./link/http": {
"node": "./link/http/http.cjs",
"default": "./link/http/index.js"
},
"./package.json": "./package.json"
} A modified sed command that worked for me in a build step (I'm using this in a Dockerfile):
With the above, I'm able to have imports like this in the Sveltekit app: import { ApolloClient, InMemoryCache, } from '@apollo/client/core';
import { HttpLink } from '@apollo/client/link/http';
import type { NormalizedCacheObject } from '@apollo/client'; |
Following Hasura's tutorial ( https://hasura.io/learn/graphql/svelte-apollo/apollo-client/ ) I'm also having some issues with Doing
What can I do about this? |
The solution is hinted at in the issue description above. Use This issue and comment talks about it as well. They mention React will not be a hard dependency like this in Apollo 4. But fundamentally, it's a separate issue from what this issue describes -- The React error has nothing to do with Sveltekit 🙂 |
Weirdly enough - in my first project I needed to include Regardless, thanks for that clarification! |
This made it for me! Stack: Svelte + Vite + Routify |
Here's the issue for removing React: #8190 |
Hi @benjamn, I'm a maintainer of SvelteKit and contributor to Vite. I'd like to work with you or someone on the Apollo team to fix this issue if we can SvelteKit expects code to be written in an isomorphic manner - meaning it will run on both the client and server. The issue here is that there's currently no way to do that with Apollo Client because Node.js expects to either have an So I believe there are two possible solutions to this issue:
Are you open to a PR to add an Regarding the second potential solution...
Unfortunately, I'm not sure this is true. I tried importing
P.S. @dennisjlee any chance you're the DJ Lee that used to work at Google on Spreadsheets? 😄 |
@benmccann Thanks for the offer to help! It sounds like the I have a lot more to say about your notions of "isomorphism" and "validity" and where to draw the line when supporting Node.js features, if we need to get into that, but could you maybe imagine the |
Looks like we're on the same page! (Finished my comment just as yours appeared) |
Should help with issue #8218, thanks to @benmccann's work in apollographql/invariant-packages#254
@benmccann Your changes to the |
@benmccann @benjamn thanks for your help in getting this fixed! |
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 What do you think about a PR to add an |
Hi, all. So, having done all, this error shows in the terminal, even though page seems to load:
Any idea(s) on how to fix? Thank you. |
Same problem with me on dev mode: when loading page for first time this error appears, after reloading page the error is gone. |
@benjamn would this be back ported? into v3.5.x. we have it working on the beta version, however any mutation that errors return the error |
Hey! So I happened to have the error with It may be a naive fix, but as the remove function is really small and there's already the Like, I already have the working code locally and I can make a PR if it seems like an acceptable solution |
My error seems related to this, but a bit different, I'm getting this:
I can't change my imports from |
Hi all, 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
I have tried all solutions here nothing seems to be working including adding exports to @ApolloClient package but nothing seems to working atm. Here is my package JSON { |
i got this error when i added exports to @apollo/client package :
|
Hey folks, everyone who's complaining about this being broken, please check out this working example: https://github.com/benmccann/sveltekit-apollo-build-bug/tree/working-version If you're still having trouble, please post a github repo with a broken version. It's hard to tell what's going wrong from just an error message, but if you post a full repository I can probably figure it out. @DennisJunior247 you can't import |
@benmccann following your suggestion we get the following error on netlify:
|
@benmccann Just FYI you're coming off as very hostile and rude in these comments. I'm not disagreeing that getting a minimum reproducible example repo is likely the most useful way to solve the problem. However, many times that involves a lot of work for folks, especially if they're migrating a project, and not setting up a new one. Frequently, posting the error message is a helpful intermediary step while they do that, in case others have seen it and recognize a quicker workaround or fix. In any case, I'm unsubscribing from this thread because it just wasn't worth the effort, and you seem like a very unpleasant person to work with. I hope that if you're burnt out on working on OSS you take a break and come back refreshed. Good luck! |
Netlify does not yet support ESM which is probably why it's not working on that platform. The options for you would be:
Hope this helps! |
A quick update, Netlify now supports ESM. If you're on Netlify and use the latest |
I'm getting this error when im trying to build my nuxt 3 application (works in development mode). Even though i use ..../index.js as import. |
Using |
#11570 should properly fix this |
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
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
The text was updated successfully, but these errors were encountered: