Add better errors when referencing missing components (#1811)

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: #1775.
Backports: wooorm/xdm@62e6f30.

package.json

@@ -177,7 +177,8 @@
       "react/prop-types": "off",
       "unicorn/prefer-node-protocol": "off",
       "capitalized-comments": "off",
-      "complexity": "off"
+      "complexity": "off",
+      "max-depth": "off"
     },
     "overrides": [
       {

packages/mdx/lib/condition.browser.js

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

packages/mdx/lib/condition.js

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

packages/mdx/lib/core.js

@@ -31,6 +31,7 @@ import {rehypeRecma} from './plugin/rehype-recma.js'
 import {rehypeRemoveRaw} from './plugin/rehype-remove-raw.js'
 import {remarkMarkAndUnravel} from './plugin/remark-mark-and-unravel.js'
 import {nodeTypes} from './node-types.js'
+import {development as defaultDevelopment} from './condition.js'
 
 const removedOptions = [
   'filepath',
@@ -53,6 +54,7 @@ const removedOptions = [
  */
 export function createProcessor(options = {}) {
   const {
+    development = defaultDevelopment,
     jsx,
     format,
     outputFormat,
@@ -102,7 +104,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})

packages/mdx/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])
+        )
       }
     }
   }