[GH-ISSUE #145] Issue using @apollo/client-integration-nextjs #34

New issue

Closed

opened 2026-05-06 12:36:42 +02:00 by BreizhHardware · 1 comment

BreizhHardware commented

2026-05-06 12:36:42 +02:00

Owner

Originally created by @DenyVeyten on GitHub (Feb 26, 2026).
Original GitHub issue: https://github.com/cloudflare/vinext/issues/145

Disclamer: I did not spend time on the investigation of the root cause, the below is the message from LLM

... missing ServerInsertedHTMLContext export in
vinext/dist/shims/navigation.js
is a hardcoded omission in the vinext library itself. Your application relies on @apollo/client-integration-nextjs, which strictly requires this Next.js context to be available during SSR. Because vinext acts as a drop-in replacement for Next.js, it needs to provide this shim.

Generated patch:

    let navigationShimContent = fs.readFileSync(navigationShimPath, 'utf-8');
    if (!navigationShimContent.includes('ServerInsertedHTMLContext = React.createContext')) {
      navigationShimContent = navigationShimContent.replace(
        'export function useServerInsertedHTML(callback) {',
        'export const ServerInsertedHTMLContext = React.createContext(null);\nexport function useServerInsertedHTML(callback) {'
      );
      fs.writeFileSync(navigationShimPath, navigationShimContent);
      console.log('Patched vinext navigation.js with ServerInsertedHTMLContext');
    }

Originally created by @DenyVeyten on GitHub (Feb 26, 2026). Original GitHub issue: https://github.com/cloudflare/vinext/issues/145 > Disclamer: I did not spend time on the investigation of the root cause, the below is the message from LLM ... missing ServerInsertedHTMLContext export in vinext/dist/shims/navigation.js is a hardcoded omission in the vinext library itself. Your application relies on @apollo/client-integration-nextjs, which strictly requires this Next.js context to be available during SSR. Because vinext acts as a drop-in replacement for Next.js, it needs to provide this shim. Generated patch: ```js let navigationShimContent = fs.readFileSync(navigationShimPath, 'utf-8'); if (!navigationShimContent.includes('ServerInsertedHTMLContext = React.createContext')) { navigationShimContent = navigationShimContent.replace( 'export function useServerInsertedHTML(callback) {', 'export const ServerInsertedHTMLContext = React.createContext(null);\nexport function useServerInsertedHTML(callback) {' ); fs.writeFileSync(navigationShimPath, navigationShimContent); console.log('Patched vinext navigation.js with ServerInsertedHTMLContext'); } ```

BreizhHardware closed this issue

2026-05-06 12:36:42 +02:00

BreizhHardware commented

2026-05-06 12:36:43 +02:00

Author

Owner

@xXMrNidaXx commented on GitHub (Feb 28, 2026):

Analysis

The root cause is that @apollo/client-integration-nextjs imports ServerInsertedHTMLContext from next/navigation, which vinext's navigation shim doesn't export.

The LLM-generated patch is directionally correct but has edge cases. Here's a cleaner approach:

Option 1: Proper Context Export

Instead of string replacement, export a no-op context that satisfies the Apollo type:

// vinext/dist/shims/navigation.js
import * as React from 'react';

// Apollo Client needs this for SSR script injection
// In vinext, we handle SSR differently, so provide a no-op context
export const ServerInsertedHTMLContext = React.createContext<
  ((callback: () => React.ReactNode) => void) | null
>(null);

export function useServerInsertedHTML(callback: () => React.ReactNode): void {
  const addInsertedHTML = React.useContext(ServerInsertedHTMLContext);
  if (addInsertedHTML) {
    addInsertedHTML(callback);
  }
  // In vinext, SSR script injection is handled via streaming
}

Option 2: Apollo-specific workaround (user-land)

If you need it working today without waiting for a vinext release:

// lib/apollo-shim.ts
import * as React from 'react';

// Polyfill for vinext compatibility
if (typeof window === 'undefined') {
  const navigation = require('next/navigation');
  if (!navigation.ServerInsertedHTMLContext) {
    navigation.ServerInsertedHTMLContext = React.createContext(null);
  }
}

Import this once in your root layout before any Apollo imports.

Recommendation

This should be fixed in vinext core since other SSR-aware libraries (React Query, etc.) may also depend on this context. The export list in the navigation shim should mirror Next.js's exports for drop-in compatibility.

@xXMrNidaXx commented on GitHub (Feb 28, 2026): ## Analysis The root cause is that `@apollo/client-integration-nextjs` imports `ServerInsertedHTMLContext` from `next/navigation`, which vinext's navigation shim doesn't export. The LLM-generated patch is directionally correct but has edge cases. Here's a cleaner approach: ### Option 1: Proper Context Export Instead of string replacement, export a no-op context that satisfies the Apollo type: ```ts // vinext/dist/shims/navigation.js import * as React from 'react'; // Apollo Client needs this for SSR script injection // In vinext, we handle SSR differently, so provide a no-op context export const ServerInsertedHTMLContext = React.createContext< ((callback: () => React.ReactNode) => void) | null >(null); export function useServerInsertedHTML(callback: () => React.ReactNode): void { const addInsertedHTML = React.useContext(ServerInsertedHTMLContext); if (addInsertedHTML) { addInsertedHTML(callback); } // In vinext, SSR script injection is handled via streaming } ``` ### Option 2: Apollo-specific workaround (user-land) If you need it working today without waiting for a vinext release: ```ts // lib/apollo-shim.ts import * as React from 'react'; // Polyfill for vinext compatibility if (typeof window === 'undefined') { const navigation = require('next/navigation'); if (!navigation.ServerInsertedHTMLContext) { navigation.ServerInsertedHTMLContext = React.createContext(null); } } ``` Import this once in your root layout before any Apollo imports. ### Recommendation This should be fixed in vinext core since other SSR-aware libraries (React Query, etc.) may also depend on this context. The export list in the navigation shim should mirror Next.js's exports for drop-in compatibility.

BreizhHardware referenced this issue

2026-05-06 12:38:48 +02:00

[PR #34] [MERGED] ci: add pkg.pr.new preview releases for PRs #255