I’m using Next.js 15 (App Router) and trying to create a simple React context. But the build fails with a parsing error before even running.
Error:
Build Error
Parsing ecmascript source code failed
./context/FormDataContext.client.ts (10:31)
Parsing ecmascript source code failed
8 | const [formData, setFormData] = useState({});
9 | return (
> 10 | <FormDataContext.Provider value={{ formData, setFormData }}>
| ^^^^^
11 | {children}
12 | </FormDataContext.Provider>
13 | );
Expected '>', got 'value'
Import traces:
Client Component Browser:
./context/FormDataContext.client.ts [Client Component Browser]
./components/ClientProviders.tsx [Client Component Browser]
./components/ClientProviders.tsx [Server Component]
./app/layout.tsx [Server Component]
FormDataContext.client.ts
'use client';
import React, { createContext, useContext, useState } from "react";
const FormDataContext = createContext<any>(null);
export function FormDataProvider({ children }: { children: React.ReactNode }) {
const [formData, setFormData] = useState({});
return (
<FormDataContext.Provider value={{ formData, setFormData }}>
{children}
</FormDataContext.Provider>
);
}
export function useFormData() {
const context = useContext(FormDataContext);
if (!context) throw new Error("useFormData must be used within FormDataProvider");
return context;
}
⚙️ ClientProviders.tsx
'use client';
import { FormDataProvider } from "@/context/FormDataContext.client";
export function ClientProviders({ children }: { children: React.ReactNode }) {
return <FormDataProvider>{children}</FormDataProvider>;
}
app/layout.tsx
import "./globals.css";
import { ClientProviders } from "@/components/ClientProviders";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<body>
<ClientProviders>{children}</ClientProviders>
</body>
</html>
);
}
Problem
The build fails during compilation with Expected '>', got 'value', pointing to the JSX line:
<FormDataContext.Provider value={{ formData, setFormData }}>
It looks like the compiler (SWC) is choking on the JSX syntax even though it’s valid TypeScript + JSX. This happens only in this context file — other .tsx files with JSX work fine.
🧰 What I’ve Tried
Added 'use client' at the top (first line)
Renamed file from .client.ts to .client.tsx
Restarted dev server / deleted .next
Reinstalled dependencies
Verified TS config includes "jsx": "preserve"
Tried moving provider to /components instead of /context
Same result every time.
-
1This question seems to have been generated or "improved" with help of ChatGPT or another AI. Please be aware that using LLMs or other AIs to generate content is not allowed.Mark Rotteveel– Mark Rotteveel2025年10月26日 12:04:37 +00:00Commented Oct 26 at 12:04
-
1yes it was corrected and enhaced with chatgpt to avoid mistakes....cipher_449449– cipher_4494492025年10月26日 14:28:54 +00:00Commented Oct 26 at 14:28
-
1) that is not allowed, and 2) the formatting of your question is atrocious, making it hard to read, and 3) it is unclear what you're actually asking.Mark Rotteveel– Mark Rotteveel2025年10月27日 07:52:20 +00:00Commented Oct 27 at 7:52
1 Answer 1
You can try changing FormDataContext.client.ts to FormDataContext.tsx but still keep the "use client" at the top of your components. This shows that this is a client component, instead of the extension of .client.tsx