@elytracms/cli 0.0.82 → 0.0.83

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elytracms/cli",
   "author": "finaldream <hi@finaldream.de>",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "description": "The Elytra CLI — run a consuming repo's studio, frontend, and Convex backend under one command.",
   "license": "MIT",
   "type": "module",
@@ -14,10 +14,10 @@
     "README.md"
   ],
   "engines": {
-    "node": ">=20"
+    "node": ">=22.18.0"
   },
   "dependencies": {
-    "@elytracms/core": "^0.0.82"
+    "@elytracms/core": "^0.0.83"
   },
   "devDependencies": {
     "vitest": "^4.1.10"

package/src/config-harness.js

@@ -75,6 +75,66 @@ export function virtualModulesPlugin(name, modules) {
  * because the studio `vite.config.ts` is never loaded), and automatic JSX so
  * `.tsx` component barrels transform without the app's React plugin.
  */
+/**
+ * React specifiers the automatic-JSX transform injects, aliased to the STUDIO's
+ * own copies (EC-537).
+ *
+ * `jsx: 'automatic'` below rewrites every transformed `.tsx` to import
+ * `react/jsx-dev-runtime`, and Vite resolves a bare specifier from the
+ * IMPORTER's directory. A consumer's page-builder components live at their repo
+ * root, outside `studioDir` — so on a repo whose root `package.json` does not
+ * declare react, every one of them fails to resolve and `config-valid` reports
+ * a config that "could not be executed", taking `asset-collection` and
+ * `presentation-targets` down with it.
+ *
+ * Measured 2026-08-02 on a real `create-elytra@0.0.82` scaffold, both
+ * directions: with react at the root `✓ config-valid` (11 ok); with react
+ * removed, `✗ Cannot find module 'react/jsx-dev-runtime' imported from
+ * components/marketing/hero.tsx` and three checks lost. Both production
+ * consumers hit exactly this on upgrading and both added react to their root.
+ *
+ * That was a workaround for a requirement the HARNESS invented: automatic JSX is
+ * our transform setting, chosen for our convenience, in a boot whose only job is
+ * to *evaluate* a config — nothing here mounts or renders. So the package that
+ * mandated React supplies it. The studio always has react (it is a React app),
+ * and resolving from `studioDir` is what this harness already does for `vite`
+ * itself, one line above.
+ *
+ * Opportunistic by contract, like everything else in this file: a specifier that
+ * cannot be resolved is simply left unaliased rather than throwing, so a partial
+ * install degrades to the previous behaviour instead of crashing the CLI.
+ */
+export function reactRuntimeFromStudioPlugin(studioDir) {
+  // Resolve THROUGH VITE, from a studio-side importer — never to a raw path.
+  //
+  // The obvious implementation is `resolve.alias` to
+  // `createRequire(studioDir).resolve('react/jsx-dev-runtime')`. That was tried
+  // first and is wrong twice over (both measured 2026-08-02): `createRequire`
+  // returns the **CJS** entry, and an absolute-path alias bypasses Vite's
+  // exports-map/condition/interop handling entirely, so its SSR runner
+  // evaluates CommonJS as ESM — `elytra previews` died with
+  // `ReferenceError: module is not defined` at `react/index.js:9`, then at
+  // `react/jsx-dev-runtime.js:9` when the alias was narrowed.
+  //
+  // Handing Vite a studio-side *importer* instead lets its own resolver do the
+  // work — right conditions, right ESM build — while only changing WHERE the
+  // lookup starts. That is the whole intent: not a different React, just one
+  // that can be found.
+  const importer = join(studioDir, '__elytra-harness__.js')
+  return {
+    name: 'elytra:react-runtime-from-studio',
+    async resolveId(id, from) {
+      if (id !== 'react/jsx-runtime' && id !== 'react/jsx-dev-runtime') return null
+      // Only rescue importers OUTSIDE the studio (the consumer's root-level
+      // components). Anything already inside studio/ resolves on its own, and
+      // intercepting it would be a silent no-op at best.
+      if (from === undefined || from.startsWith(studioDir)) return null
+      const resolved = await this.resolve(id, importer, { skipSelf: true })
+      return resolved ?? null
+    },
+  }
+}
+
 export async function startConsumerVite({ root, studioDir, port, plugins }) {
   const vite = await import(pathToFileURL(resolveFromDir(studioDir, 'vite')).href)
   const server = await vite.createServer({
@@ -83,7 +143,11 @@ export async function startConsumerVite({ root, studioDir, port, plugins }) {
     mode: 'development',
     appType: 'custom',
     logLevel: 'warn',
-    plugins,
+    // EC-537 — the rescue runs BEFORE the caller's plugins so nothing downstream
+    // has to know about it. `dedupe` rides along: once the consumer's components
+    // and the studio can both resolve React, they must agree on ONE copy.
+    plugins: [reactRuntimeFromStudioPlugin(studioDir), ...(plugins ?? [])],
+    resolve: { dedupe: ['react', 'react-dom'] },
     server: {
       port,
       strictPort: true,