import { Fragment, jsx, jsxs } from 'react/jsx-runtime' (all imports are undefined in Next.js app)?

How do I get this working (found this straight in the starry-night README):

import { Fragment, jsx, jsxs } from 'react/jsx-runtime'

For this line:

const reactNode = toJsxRuntime(tree, { Fragment, jsx, jsxs })

Getting this error for each of the imports:

Module '"react/jsx-runtime"' has no exported member 'Fragment'.

This is in a Next.js app, do I need to add something to my webpack config or next.config.js?

I am using React 18.2.0 on Next.js 14.1.2-canary.1 with these:

+ @wooorm/starry-night 3.2.0
+ hast-util-to-jsx-runtime 2.3.0

My full code is currently this:

import { common, createStarryNight } from '@wooorm/starry-night'
import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
import { useEffect, useState } from 'react'
import { Fragment, jsx, jsxs } from 'react/jsx-runtime'

let starryNight: any

export default function Code({
  scope = 'source.ts',
  children,
}: {
  scope: string
  children: string
}) {
  const [sn, setStarryNight] = useState<any>(starryNight)
  const [code, setCode] = useState<React.ReactNode>(children)

  useEffect(() => {
    createStarryNight(common).then(sn => {
      starryNight = sn
      setStarryNight(sn)
    })
  }, [])

  useEffect(() => {
    if (!sn) {
      return
    }

    const tree = sn.highlight(children, scope)
    const reactNode = toJsxRuntime(tree, { Fragment, jsx, jsxs })
    setCode(reactNode)
  }, [sn, scope, children])

  // <pre>
  //   <code className="ts language-ts"></code>
  return code
}

wooorm / starry-night

import { Fragment, jsx, jsxs } from 'react/jsx-runtime' (all imports are undefined in Next.js app)? #38