mdx-js/mdx · error · Error

Expected `jsxDEV` given to `evaluate`

Error message

Expected `jsxDEV` given to `evaluate`

What it means

When the `development` option is true, resolveEvaluateOptions requires `jsxDEV`, the development-mode JSX factory that includes source-location and component-stack diagnostics. In development the compiled MDX code calls `jsxDEV(...)`, so a missing `jsxDEV` makes evaluation impossible and the check throws before running.

Source

Thrown at packages/mdx/lib/util/resolve-evaluate-options.js:72

 *   Configuration.
 * @returns {{compiletime: CompileOptions, runtime: RunOptions}}
 *   Split options.
 */
export function resolveEvaluateOptions(options) {
  const {
    Fragment,
    baseUrl,
    development,
    jsx,
    jsxDEV,
    jsxs,
    useMDXComponents,
    ...rest
  } = options || {}

  if (!Fragment) throw new Error('Expected `Fragment` given to `evaluate`')
  if (development) {
    if (!jsxDEV) throw new Error('Expected `jsxDEV` given to `evaluate`')
  } else {
    if (!jsx) throw new Error('Expected `jsx` given to `evaluate`')
    if (!jsxs) throw new Error('Expected `jsxs` given to `evaluate`')
  }

  return {
    compiletime: {
      ...rest,
      development,
      outputFormat: 'function-body',
      providerImportSource: useMDXComponents ? '#' : undefined
    },
    runtime: {Fragment, baseUrl, jsx, jsxDEV, jsxs, useMDXComponents}
  }
}

View on GitHub (pinned to 685627a819)

Solutions

1. Import `jsxDEV` from 'react/jsx-dev-runtime' (or your library's dev runtime) and include it in the options when `development` is true.
2. Conditionally build the runtime: `development ? require('react/jsx-dev-runtime') : require('react/jsx-runtime')`.
3. Set `development: false` if you intentionally want the production path (then `jsx`/`jsxs` are required instead).

Example fix

// before
await evaluate(code, { Fragment, jsx, jsxs, development: true })
// after
import { Fragment, jsxDEV } from 'react/jsx-dev-runtime'
await evaluate(code, { Fragment, jsxDEV, development: true })

if (development && !runtime.jsxDEV) {
  throw new Error('development: true requires `jsxDEV` (import from react/jsx-dev-runtime)')
}

function hasDevRuntime(rt) {
  return typeof rt === 'object' && rt !== null && typeof rt.jsxDEV === 'function'
}

try {
  const result = await evaluate(code, { ...runtime, development: true })
} catch (err) {
  if (err.message === 'Expected `jsxDEV` given to `evaluate`') {
    console.error('Use react/jsx-dev-runtime exports when development is true')
  } else throw err
}

When it happens

Trigger: Calling `evaluate(code, {...runtime, development: true})` without providing `jsxDEV` from 'react/jsx-dev-runtime' (or equivalent); sharing one runtime object between dev/prod builds where dev-only exports are absent.

Common situations: Toggling `development: true` in a dev environment while the runtime was built for production ('react/jsx-runtime' has no `jsxDEV`); bundlers resolving the production React build; copying a prod evaluate config into a dev code path.

Understand the failure class

Background: "Must pass :limit option" / "Missing required option" — required option errors explained — this error's family across 41 libraries.

Related errors

• Expected `Fragment` given to `evaluate`
• Expected `jsx` given to `evaluate`
• Expected `jsxs` given to `evaluate`
• Missing `pragma` in classic runtime with `pragmaImportSource
• Unexpected deprecated option `jsxRuntime: 'classic'`, `pragm

AI-assisted analysis of mdx-js/mdx@685627a819 (2026-09-02). Data as JSON: /api/errors/80fd8bc34b30267c. Report an issue: GitHub.