Skip to content
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

RSC example does not work with runtime = "edge"; #113

Closed
martior opened this issue Oct 11, 2023 · 7 comments
Closed

RSC example does not work with runtime = "edge"; #113

martior opened this issue Oct 11, 2023 · 7 comments

Comments

@martior
Copy link

martior commented Oct 11, 2023

importing

import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
export const { getClient } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      // this needs to be an absolute url, as relative urls cannot be used in SSR
      uri: process.env.API_URL,
      // you can disable result caching here if you want to
      // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
      // fetchOptions: { cache: "no-store" },
    }),
  });
});

from a app/page.tsx with export const runtime = "edge"; gives the following error:

../../node_modules/@apollo/client/react/context/ApolloContext.js
Attempted import error: 'createContext' is not exported from 'react' (imported as 'React').

It works if you remove export const runtime = "edge"

@phryneas
Copy link
Member

Hi @martior,
this is (unfortunately) a known issue.
This seems at this point more like an accident on the Next.js side. A similar issue has recently been resolved from their side in vercel/next.js#56501, but runtime = "edge" is still being investigated by them.

@huozhi
Copy link

huozhi commented Oct 30, 2023

Checked with webpack team that exports checking needs to be applied to package. There seems no way to partially disable the exports checking for certain package (like react) in certain runtime (such as edge runtime). As apollo-client in edge runtime might still access some unexisted property for running conditional code, one solution I got from webpack team is to use Object(React).<property> e.g. Object(React).createContext to get rid of the check. So it could also use that to do it.

@phryneas
Copy link
Member

@huozhi Thank you for the update! At this point we will probably consider using a wrapper package around React to deal with that - we can't be sure if a hack that works with one bundler today will break with the next bundler tomorrow.

@bashaus
Copy link

bashaus commented Nov 16, 2023

@phryneas are there any updates on this? sorry to chase .. !

@phryneas
Copy link
Member

@bashaus actually, there are!
You should be able to use the Apollo Client 3.9 alphas in the Edge runtime.

stromseng added a commit to NTNU-SmallSat-Lab/outreach-website that referenced this issue Jan 26, 2024
luctra02 pushed a commit to NTNU-SmallSat-Lab/outreach-website that referenced this issue Jan 26, 2024
* build(frontend): install apollo client and simplify environment variables

* fix(frontend): disable apollo caching results

* feat: create example client

* feat: setup graphql codegen and example usage

* docs: 📝 Update docs for graphQL codegen

* refactor(frontend): Make blog use graphql queries with apollo

* refactor: 🗑️ Remove unused code

* fix: 🚑 Fix build issues with nextjs and apollo client

Fixed in the new apollo client alpha. issue tracked here apollographql/apollo-client-nextjs#113

* fix: Fix styling and linting ignore files. Also style with prettier

* docs: 📝 Update docs

* refactor(frontend): Refactor blog article page to use graphQL

* fix: fix lint error

* refactor(frontend): 🔥 remove unused console logs

* fix(frontend): fix undefined attributes error

* fix(frontend): 🐛 try to fix undefined attributes bug

* docs: 📝 Update graphql typegen docs

* fix: 🐛 disable caching while developing

* fix: 🐛 fix undefined error

* fix: 🐛 Fix author avatar image bug
@phryneas
Copy link
Member

I'm doing some housekeeping so I'm closing some older issues that haven't seen activity in a while.
If this is still relevant, please feel free to reopen the issue.

Copy link

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants