react 18.3.1: Differentiate React development vs production runtime contracts across NODE_ENV branching, jsxDEV stubbing, element immutability, and minified error invariant decoding

# React Environment & Build Configuration Trap: NODE_ENV, jsxDEV Stubbing, and Immutability Divergence

## CSX Search Result
- `search_known_solution` answered with sample `sha256:059011629c7734f8ac38604635b6d097a2b80c286715c0bbcc0db022a73afa54` (covering duplicate React instances from peer dependency resolution).
- We picked a different trap: `NODE_ENV` branching semantics, the `react/jsx-dev-runtime` production stub trap, `Object.freeze` immutability divergence between environments, and minified invariant URL decoding.

## What a Model Would Have Written
A model would have assumed that `NODE_ENV=staging` or `NODE_ENV=test` activates production bundle optimizations, that `react/jsx-dev-runtime` remains callable regardless of `NODE_ENV`, that element props are immutably frozen in all environments, and that runtime invariant errors contain identical descriptive string messages across dev and prod.

## How the Wrong Version Fails
The wrong version fails either with a loud runtime crash (`TypeError: (0, _jsxdevruntime.jsxDEV) is not a function` when dev-transformed JSX runs in production, or broken test assertions expecting human-readable invariant strings instead of `Minified React error #299`) or silently with a green build (unfrozen `element.props` allowing in-place state mutation in production, and `NODE_ENV=staging` running the unoptimized development bundle with debug overhead).

{"case":{"caseId":"case:sha256:2f323d60ee84099d41a472f6c2b2b9e465deef23e7c1bb2a720d9ee9dec7b8f3","contract":["assert NODE_ENV non-production values (staging, test, undefined) strictly default to development bundles with frozen element props","assert react/jsx-dev-runtime exports jsxDEV as undefined in production and throws TypeError when invoked by dev-compiled builds","assert element and props immutability via Object.freeze is enforced in development but stripped in production enabling in-place mutation","assert ReactDOMClient invariant errors format with human-readable explanations in development but compress into minified URL error codes in production","assert SSR diagnostic warnings for client-only hooks (useLayoutEffect) log to console.error in development and are completely eliminated in production"],"goal":"Differentiate React development vs production runtime contracts across NODE_ENV branching, jsxDEV stubbing, element immutability, and minified error invariant decoding","kind":"HOW","packages":["pkg:npm/react@18.3.1","pkg:npm/react-dom@18.3.1"],"schemaVersion":1,"symbols":["react.createElement","react/jsx-dev-runtime.jsxDEV","react/jsx-runtime.jsx","react.useLayoutEffect","react-dom/client.createRoot","react-dom/server.renderToString"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","ecosystem":"npm","executionContext":"node","language":"node","os":"linux","packageManager":"npm","runtime":"node","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/react@18.3.1","pkg:npm/react-dom@18.3.1"],"schemaVersion":1,"symbols":["react.createElement","react/jsx-dev-runtime.jsxDEV","react/jsx-runtime.jsx","react.useLayoutEffect","react-dom/client.createRoot","react-dom/server.renderToString"],"verifierAdapter":"node-typescript@1"}

{
  "name": "npm-react-config",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "npm-react-config",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
      }
    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
      "license": "MIT"
    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
      "license": "MIT",
      "dependencies": {
        "js-tokens": "^3.0.0 || ^4.0.0"
      },
      "bin": {
        "loose-envify": "cli.js"
      }
    },
    "node_modules/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/react-dom": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0",
        "scheduler": "^0.23.2"
      },
      "peerDependencies": {
        "react": "^18.3.1"
      }
    },
    "node_modules/scheduler": {
      "version": "0.23.2",
      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
      "license": "MIT",
      "dependencies": {
        "loose-envify": "^1.1.0"
      }
    }
  }
}

{
  "name": "npm-react-config",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1"
  }
}

import assert from 'node:assert/strict';
import { createRequire } from 'node:module';

const require = createRequire(import.meta.url);

function loadReact(envValue) {
  if (envValue === undefined) {
    delete process.env.NODE_ENV;
  } else {
    process.env.NODE_ENV = envValue;
  }
  for (const key of Object.keys(require.cache)) {
    if (key.includes('react') || key.includes('scheduler') || key.includes('loose-envify')) {
      delete require.cache[key];
    }
  }
  return {
    React: require('react'),
    ReactDOMServer: require('react-dom/server'),
    ReactDOMClient: require('react-dom/client'),
    jsxRuntime: require('react/jsx-runtime'),
    jsxDevRuntime: require('react/jsx-dev-runtime')
  };
}

// Contract Assertion 1: NODE_ENV non-production fallback (staging/test/undefined -> DEV bundle)
// Naive assumption: Setting NODE_ENV to non-development environments like 'staging' or 'test' enables production mode optimizations
{
  const staging = loadReact('staging');
  const stagingEl = staging.React.createElement('div', { id: 'staging' });
  assert.equal(
    Object.isFrozen(stagingEl.props),
    true,
    'NODE_ENV=staging must default to DEV bundle with frozen props'
  );

  const testEnv = loadReact('test');
  const testEl = testEnv.React.createElement('div', { id: 'test' });
  assert.equal(
    Object.isFrozen(testEl.props),
    true,
    'NODE_ENV=test must default to DEV bundle with frozen props'
  );

  const undefinedEnv = loadReact(undefined);
  const undefEl = undefinedEnv.React.createElement('div', { id: 'undef' });
  assert.equal(
    Object.isFrozen(undefEl.props),
    true,
    'Unset NODE_ENV must default to DEV bundle with frozen props'
  );
}

// Contract Assertion 2: react/jsx-dev-runtime is stubbed to undefined in production
// Naive assumption: Bundler compiling with dev JSX transform (jsxDEV) will still execute in production
{
  const prod = loadReact('production');
  assert.equal(
    prod.jsxDevRuntime.jsxDEV,
    undefined,
    'react/jsx-dev-runtime in production must export jsxDEV as undefined'
  );
  assert.throws(
    () => { prod.jsxDevRuntime.jsxDEV('div', {}); },
    { name: 'TypeError' },
    'Calling jsxDEV in production must throw TypeError: jsxDEV is not a function'
  );

  const dev = loadReact('development');
  assert.equal(
    typeof dev.jsxDevRuntime.jsxDEV,
    'function',
    'react/jsx-dev-runtime in development must export jsxDEV function'
  );
  const devJsxEl = dev.jsxDevRuntime.jsxDEV(
    'div',
    { id: 'dev-jsx' },
    'key1',
    false,
    { fileName: 'test.js', lineNumber: 1 },
    null
  );
  assert.equal(devJsxEl.props.id, 'dev-jsx');
  assert.equal(devJsxEl.key, 'key1');
  assert.equal(Object.isFrozen(devJsxEl.props), true);
}

// Contract Assertion 3: Element props immutability divergence between dev and prod
// Naive assumption: React elements are immutable across all environments
{
  const dev = loadReact('development');
  const devElement = dev.React.createElement('div', { title: 'immutable' });
  assert.equal(Object.isFrozen(devElement), true);
  assert.equal(Object.isFrozen(devElement.props), true);
  assert.throws(
    () => { 'use strict'; devElement.props.title = 'mutated'; },
    { name: 'TypeError' },
    'Mutating element props in development must throw TypeError'
  );

  const prod = loadReact('production');
  const prodElement = prod.React.createElement('div', { title: 'mutable' });
  assert.equal(Object.isFrozen(prodElement), false);
  assert.equal(Object.isFrozen(prodElement.props), false);
  prodElement.props.title = 'mutated-in-prod';
  assert.equal(
    prodElement.props.title,
    'mutated-in-prod',
    'Production React must allow in-place props mutation due to stripped Object.freeze'
  );
}

// Contract Assertion 4: Invariant error message formatting (descriptive text vs minified error code with URL)
// Naive assumption: Error messages and structures remain identical across development and production
{
  const dev = loadReact('development');
  let devError = null;
  try {
    dev.ReactDOMClient.createRoot(null);
  } catch (err) {
    devError = err;
  }
  assert.ok(devError);
  assert.equal(
    devError.message,
    'createRoot(...): Target container is not a DOM element.',
    'Development error must provide full human-readable error explanation'
  );

  const prod = loadReact('production');
  let prodError = null;
  try {
    prod.ReactDOMClient.createRoot(null);
  } catch (err) {
    prodError = err;
  }
  assert.ok(prodError);
  assert.ok(
    prodError.message.startsWith('Minified React error #299;'),
    'Production error must format as Minified React error code'
  );
  assert.ok(
    prodError.message.includes('https://reactjs.org/docs/error-decoder.html?invariant=299'),
    'Production error must link to error decoder URL'
  );
}

// Contract Assertion 5: Diagnostic warning suppression during SSR
// Naive assumption: React SSR warns about client-only hook mismatches in production
{
  function ClientHookComponent() {
    const React = require('react');
    React.useLayoutEffect(() => {});
    return React.createElement('span', null, 'ssr-output');
  }

  const dev = loadReact('development');
  let devWarning = null;
  const origError = console.error;
  console.error = (...args) => {
    devWarning = args.join(' ');
  };
  try {
    const htmlDev = dev.ReactDOMServer.renderToString(dev.React.createElement(ClientHookComponent));
    assert.equal(htmlDev, '<span>ssr-output</span>');
  } finally {
    console.error = origError;
  }
  assert.ok(
    devWarning && devWarning.includes('useLayoutEffect does nothing on the server'),
    'Development SSR must log warning for useLayoutEffect'
  );

  const prod = loadReact('production');
  let prodWarning = null;
  console.error = (...args) => {
    prodWarning = args.join(' ');
  };
  try {
    const htmlProd = prod.ReactDOMServer.renderToString(prod.React.createElement(ClientHookComponent));
    assert.equal(htmlProd, '<span>ssr-output</span>');
  } finally {
    console.error = origError;
  }
  assert.equal(
    prodWarning,
    null,
    'Production SSR must completely strip diagnostic console warnings'
  );
}