Add better errors when referencing missing components

Previously, React or other JSX runtimes threw rather hard to read errors
when a component was undefined (because it wasn’t imported, passed, or
provided), essentially only pointing to *something* missing.
Now we throw proper errors when a component is missing at runtime,
including what exact component (or object) is undefined.

In addition, this adds a `development` option, which defaults to
`false` but can be configured explicitly or turned on with
`NODE_ENV=development`.
When it’s `true`, the exact place that references the missing component
or object, and which file did that, is included in the error message.

Related-to: mdx-js/mdx#1775.

lib/condition.browser.js

@@ -0,0 +1 @@
+export const development = false

lib/condition.js

@@ -0,0 +1,3 @@
+import process from 'node:process'
+
+export const development = process.env.NODE_ENV === 'development'

lib/core.js

@@ -31,6 +31,7 @@ import {rehypeRemoveRaw} from './plugin/rehype-remove-raw.js'
 import {remarkMarkAndUnravel} from './plugin/remark-mark-and-unravel.js'
 import {remarkMdx} from './plugin/remark-mdx.js'
 import {nodeTypes} from './node-types.js'
+import {development as defaultDevelopment} from './condition.js'
 
 /**
  * Pipeline to:
@@ -44,6 +45,7 @@ import {nodeTypes} from './node-types.js'
  */
 export function createProcessor(options = {}) {
   const {
+    development = defaultDevelopment,
     jsx,
     format,
     outputFormat,
@@ -81,7 +83,7 @@ export function createProcessor(options = {}) {
   pipeline
     .use(rehypeRecma)
     .use(recmaDocument, {...rest, outputFormat})
-    .use(recmaJsxRewrite, {providerImportSource, outputFormat})
+    .use(recmaJsxRewrite, {development, providerImportSource, outputFormat})
 
   if (!jsx) {
     pipeline.use(recmaJsxBuild, {outputFormat})

lib/plugin/recma-jsx-build.js

@@ -7,6 +7,7 @@
 
 import {buildJsx} from 'estree-util-build-jsx'
 import {specifiersToDeclarations} from '../util/estree-util-specifiers-to-declarations.js'
+import {toIdOrMemberExpression} from '../util/estree-util-to-id-or-member-expression.js'
 
 /**
  * A plugin to build JSX into function calls.
@@ -33,13 +34,10 @@ export function recmaJsxBuild(options = {}) {
       tree.body[0] = {
         type: 'VariableDeclaration',
         kind: 'const',
-        declarations: specifiersToDeclarations(tree.body[0].specifiers, {
-          type: 'MemberExpression',
-          object: {type: 'Identifier', name: 'arguments'},
-          property: {type: 'Literal', value: 0},
-          computed: true,
-          optional: false
-        })
+        declarations: specifiersToDeclarations(
+          tree.body[0].specifiers,
+          toIdOrMemberExpression(['arguments', 0])
+        )
       }
     }
   }