nextjs 15: (ecmascript)}.createContext) is not a function

[megacherry]

Describe the bug

I've created a composable api like in this video: https://www.youtube.com/watch?v=YJ3rW85fnKo

But if i want to build my next app i get the following error:

TypeError: (0 , i.useFieldContext) is not a function
    at c (...\vcs\apps\next\.next\server\pages\auth\reset-password.js:1:9309)
    at Wc (...\vcs\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (...\vcs\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (...\vcs\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (...\vcs\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:74:209)
    at Z (...\vcs\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (...\vcs\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:71:479)
    at Z (...\vcs\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (...\vcs\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (...\vcs\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)

So i tried it with a repro (https://github.com/megacherry/repro-tanstack-form) and get the following error on pnpm dev:

 ⨯ TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f2e$pnpm$2f$next$40$15$2e$2$2e$4_react$2d$dom$40$19$2e$1$2e$0_react$40$19$2e$1$2e$0_$5f$react$40$19$2e$1$2e$0$2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function
    at [project]/app/form/index.tsx [app-rsc] (ecmascript) (file://D%3A/vcs/playground/repro-tanstack-form/app/form/index.tsx:6:23)
    at instantiateModule (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
    at getOrInstantiateModuleFromParent (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
    at esmImport (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:132:20)
    at [project]/app/page.tsx [app-rsc] (ecmascript) (file://D%3A/vcs/playground/repro-tanstack-form/app/page.tsx:1:0)
    at instantiateModule (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
    at getOrInstantiateModuleFromParent (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
    at esmImport (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:132:20)
    at [project]/app/page.tsx [app-rsc] (ecmascript, Next.js server component) (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\_cd858978._.js:233:47)
    at instantiateModule (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
    at getOrInstantiateModuleFromParent (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
    at esmImport (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:132:20)
    at instantiateModule (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
    at getOrInstantiateModuleFromParent (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
    at esmImport (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:132:20)
    at instantiateModule (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
    at instantiateRuntimeModule (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:660:12)
    at Object.getOrInstantiateRuntimeModule (...\vcs\playground\repro-tanstack-form\.next\server\chunks\ssr\[turbopack]_runtime.js:676:12)
    at Object.<anonymous> (...\vcs\playground\repro-tanstack-form\.next\server\app\page.js:13:9)
  4 |
  5 | export const { fieldContext, useFieldContext, formContext, useFormContext } =
> 6 |   createFormHookContexts()
    |                       ^
  7 |
  8 | export const { useAppForm } = createFormHook({
  9 |   fieldComponents: { {
  page: '/'

I've probably made a mistake and just don't see it. I have not found a comparable error in the issues.

React Sandbox (working):
https://codesandbox.io/p/sandbox/hopeful-dijkstra-tx94fs

Nextjs Sandbox (failing):
https://codesandbox.io/p/devbox/hjp6lx

Your minimal, reproducible example

https://codesandbox.io/p/devbox/hjp6lx

Steps to reproduce

1. clone https://github.com/megacherry/repro-tanstack-form
2. run pnpm i
3. run pnpm dev

Expected behavior

no error :)

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 11 x64
Firefox 136.0.4

TanStack Form adapter

None

TanStack Form version

1.3.0

TypeScript version

5.8.3/5.7.2 in snack

Additional context

No response

[piotr-blue-square]

Hi, I have just encounter the same issue, and it turned out I missed:

'use client'

//...

To figure it out I did some experiment and copied some code to my project directly and then got an different error message that I tried to use createContext() on server rendering and the context obviously can only be set on client side. Not sure if it is related to your case.

[megacherry]

Thanks for your tip. Tried that and it makes no difference.

[Balastrong]

The form must be on a client component, in your demo the error goes away if you add "use client" on page.tsx.

Ideally you would do that on the component where the form is.

[megacherry]

Ah ok, thx. But @Balastrong, in my production env i use pages router (i think there is not use client necessary). Should i upload another repro?

[Balastrong]

With the pages router I honestly have never tried myself, if you have a repro to share that would help a lot, thanks!