Error: ServerContext: [context] already defined

[marozzocom]

Link to the code that reproduces this issue

https://github.com/marozzocom/server-context

To Reproduce

1. Start the application in development by running npm run dev
2. Observe the text under the Next.js logo ("Hello from Server Context!")
3. Refresh the page with ⌘+R or otherwise

Current vs. Expected behavior

Expected behaviour
Page renders again as before.

Current behaviour
The following error message, that will only be reset by restarting the development server:

Uncaught Error: ServerContext: server-context already defined
    at t.createServerContext (file:///obfuscated_path/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js:1:505978)
    at eval (webpack-internal:///obfuscated_module_path:9:81)
    at obfuscated_module_path (file:///obfuscated_path/.next/server/app/page.js:183:1)
    at __webpack_require__ (file:///obfuscated_path/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///obfuscated_module_path:10:88)
    at obfuscated_module_path (file:///obfuscated_path/.next/server/app/page.js:194:1)
    at Function.__webpack_require__ (file:///obfuscated_path/.next/server/webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:538:9)
    at process.processTimers (node:internal/timers:512:7)
    at async Ce (file:///obfuscated_path/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js:1:601910)
    at async Xe.tree (file:///obfuscated_path/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js:1:607885)
    at async Xe (file:///obfuscated_path/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js:1:607711)
    at async Qe (file:///obfuscated_path/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js:1:608793)
    at async (file:///obfuscated_path/node_modules/next/dist/compiled/next-server/app-page-experimental.runtime.dev.js:1:612260)

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: 3.4.1
  pnpm: 8.7.6
Relevant Packages:
  next: 13.5.3-canary.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

Issue introduced in
This issue appears in 13.4.20-canary.32 and later releases.

Additional info
The error only appears during development mode, and is not present when running a production build.

I was able to also reproduce this in a Codesandbox environment. In Codesandbox, an edit of the page and the following hot refresh seems to be needed to trigger the error.

I also tested a deployment into Vercel. Since it runs a production build, there is no error.

[marozzocom]

Additionally, it seems this will only happen when server actions are enabled by setting the following in next.config.js:

experimental: {
  serverActions: true
}

[lightningspirit]

After enabling server actions, I started to get the same error. Using createServerContext before was completely ok.

[kirchoni]

Downgrading to ~13.4 allowed me to continue development even with the error, however in ~13.5 the error is permanent.

[lightningspirit]

@kspeyanski I still get the same issue after downgrading (cleaned up cache completely). I guess the fact that ServerContext is still canary in React, it is not supported "officially" by NextJS. The docs state that in order to use context, one must use createContext in Client Components.

[marozzocom]

Yes, it is not officially supported. I thought it would make sense to raise the bug report anyway, since something changed in 13.4.20-canary.32. I believe it has to do with the experimental React channel, as this problem only appears when using that (as a result of serverActions: true).

The "official" workaround would be to pass whatever is supposed to go to Server Context via props.

[lightningspirit]

@marozzocom that makes total, let's hope we can track attention here.

@kspeyanski I was not convinced with my later result so I downgraded again and dig a little further. I can confirm createServerContext and server actions are working in next 13.4 without any errors. I just moved createServerContext to a new file declaring import 'server-only' and exporting the context.

Basic version of my working stack:

// context.ts
import 'server-only'
import { createServerContext } from "react"

export const I18nContext = createServerContext<string>("i18n", "en")

// useI18n.tsx
import { I18nContext } from "../create-i18n-context"

export function useI18n() {
  const locale = useContext(I18nContext)
  ...
}

Hook is imported into server components, so translations get rendered server side and not shipped as client module. Just make sure you don't use this context in any client component.

[kirchoni]

Thanks @marozzocom !

The import 'server-only'; part is what I was missing on my side. Much appreciated.

[marozzocom]

I'm not sure I completely follow the discussion, so just to confirm

• with 13.4.20-canary.32 and later
• serverActions: true

createServerContext is not working, and import 'server-only' does not resolve the issue.

At least I could not get it to work.

[lightningspirit]

I'm not sure I completely follow the discussion, so just to confirm

• with 13.4.20-canary.32 and later
• serverActions: true

createServerContext is not working, and import 'server-only' does not resolve the issue.

At least I could not get it to work.

Sorry for the confusion. You're correct. I tested the same recipe (shown above) on both next 13.4 and 13.5. It only worked with 13.4.

[lightningspirit]

@marozzocom I just tested with both 13.4.20-canary.31 and v13.4.20-canary.32. It does work in 31. Does not work in 32.

[marozzocom]

This issue is resolved after

• upgrading to 13.5.4-canary.1 and
• implementing server-only in the file where createServerContext is called.

I think there is no reason to keep this open, since the whole feature is undocumented. The problem was likely fixed when vendored React was updated.

Let's reopen it if the problem reoccurs.

[lightningspirit]

@marozzocom I'm not really sure if v13.5.4-canary.1 resolves the issue above, at least it's not my experience. How did you end up to that conclusion?