SyntaxError? Expression expected

[anonimus007-700]

Summary

the error:

./app/api/SunField/route.ts:17:3
Parsing ecmascript source code failed
  15 |       initialCx={initialCx}
  16 |       initialCy={initialCy}
> 17 |   );
     |   ^
  18 |
  19 |   return new NextResponse(svgString, {
  20 |     headers: {

Expression expected

the code:

import React, { useRef } from 'react';
import { useSearchParams } from 'next/navigation'
import ReactDOMServer from 'react-dom/server';
import SunSvg from '@/components/SunSvg';

export async function GET(request: NextRequest) {
  const searchParams = useSearchParams()
  console.log(searchParams);

  let initialCx = 400
  let initialCy = 200

  const svgString = ReactDOMServer.renderToString(
    <SunSvg />
      initialCx={initialCx}
      initialCy={initialCy}
  );

  return new NextResponse(svgString, {
    headers: {
      'Content-Type': 'image/svg+xml',
      'Cache-Control': 'public, max-age=31536000, immutable',
    },
  });
}

I'm new to next.js. I want my svg image to be displayed at http://localhost:3000/api/SunField?time=10

but when I modify my component: components/SunSvg.tsx

import { SVGProps, forwardRef } from "react"

interface SunSvgProps extends SVGProps<SVGSVGElement> {
initialCx?: number;
initialCy?: number;
}

const SunSvg = forwardRef<SVGSVGElement>(({ initialCx = 696.7, initialCy = 374.9, ...props}, ref) => (
<svg
ref={ref}
...

this is part of it I get an error that I can't even describe properly

[icyJoseph]

I think this is more or less what you want:

  const svgString = ReactDOMServer.renderToString(
    <SunSvg 
      initialCx={initialCx}
      initialCy={initialCy} 
   />
  );

A few issues/observations here:

• AFAIK, importing react-dom/server, won't work.
• useSearchParams is a Client Component hook, but you are inside a Route Handler
• return new NextResponse maybe use return new Response instead
• for JSX syntax to work, this should be a tsx file

I do believe, you either want:

• https://vercel.com/docs/og-image-generation/examples#svg (preferred) or
• https://github.com/vercel/satori the core library used by @vercel/og

[anonimus007-700]

Sorry, I didn't notice, I wrong paste.

but even if you do, then:
Expected '>', got 'initialCx'
the problem is precisely this error

[icyJoseph]

Your file is probably .ts should be .tsx

I think, after trying out @vercel/og, it only outputs images, but you want SVG, so, I'd try with satori first.

https://og-playground.vercel.app/