@trackunit/iris-app-sdk-vite 1.6.3 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 1.7.0 (2026-10-02)
+
+### 🚀 Features
+
+- **iris-app-sdk-vite:** add productionReact option to serve [GLU-2569] ([#26121](https://github.com/Trackunit/manager/pull/26121), [#26118](https://github.com/Trackunit/manager/issues/26118))
+
+### ❤️ Thank You
+
+- Cursor @cursoragent
+- Mikkel Thorbjørn Andersen @mta-trackunit
+
 ## 1.6.3 (2026-10-01)
 
 ### 🧱 Updated Dependencies

package/README.md

@@ -61,11 +61,12 @@ Add to your `project.json`:
 
 ### Serve Options
 
-| Option       | Type   | Required | Description                                             |
-| ------------ | ------ | -------- | ------------------------------------------------------- |
-| `port`       | number | No       | Dev server port (default: auto-select from 22220-22229) |
-| `host`       | string | No       | Dev server host (default: "localhost")                  |
-| `viteConfig` | string | No       | Path to optional custom vite config file for overrides  |
+| Option            | Type    | Required | Description                                                                                   |
+| ----------------- | ------- | -------- | --------------------------------------------------------------------------------------------- |
+| `port`            | number  | No       | Dev server port (default: auto-select from 22220-22229)                                       |
+| `host`            | string  | No       | Dev server host (default: "localhost")                                                        |
+| `viteConfig`      | string  | No       | Path to optional custom vite config file for overrides                                        |
+| `productionReact` | boolean | No       | Serve React's production runtime instead of the development one (default: `false`). See below |
 
 ### Build Options
 
@@ -199,6 +200,28 @@ react-devtools
 
 React-devtools will automatically connect to whichever Iris App is running in your browser.
 
+### Reproducing production-only React behaviour
+
+Deployed Iris apps are meant to run React's **production** runtime, while `serve` uses React's development runtime by default (warnings, `jsxDEV`, React Fast Refresh). To reproduce an issue that only shows up in a deployed app, serve with React's production runtime:
+
+```bash
+nx run your-app:serve --productionReact
+```
+
+What changes with `--productionReact`:
+
+- React and your JSX are compiled for production: no `jsxDEV`, no development warnings or prop logging, and React errors are reported as coded messages (see https://react.dev/errors).
+- React Fast Refresh is turned off, so changes reload the page instead of hot-swapping components.
+- Pre-bundled dependencies are re-optimized when you switch the option on or off, so you never get the other mode's React from Vite's cache.
+
+What stays the same: the dev server routes, the manifest and the iframe redirect still work, and `process.env.NODE_ENV` of the Nx process is not changed. React DevTools still connects, with the reduced feature set of any production React build.
+
+Things to know:
+
+- The compile-time `define` for `process.env.NODE_ENV` (which affects your app code and pre-bundled dependencies) switches to `"production"`. Vite's `mode` stays `development`, so `import.meta.env.DEV`, `import.meta.env.PROD` and `import.meta.env.MODE` keep their development values, and the Nx process environment is unchanged.
+- If your `vite.config.ts` extends the default config, keep its `define`, `oxc` and `optimizeDeps` settings and do not add a React plugin. Otherwise the option does not take effect (or the app fails with `jsxDEV is not a function`); `serve` prints a warning when it detects this.
+- The option only affects `serve`. It never changes the output of `build`.
+
 ### Common Issues
 
 **"Failed to resolve dependency" warnings**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/iris-app-sdk-vite",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository": "https://github.com/Trackunit/manager",
   "executors": "./executors.json",

package/src/executors/serve/executor.js

@@ -12,6 +12,7 @@ const op = tslib_1.__importStar(require("rxjs/operators"));
 require("win-ca");
 const checkCustomFields_1 = require("../utils/checkCustomFields");
 const defaultViteConfig_1 = require("../utils/defaultViteConfig");
+const findProductionReactConflicts_1 = require("../utils/findProductionReactConflicts");
 const manifestLoader_1 = require("../utils/manifestLoader");
 const resolveSdkVersion_1 = require("../utils/resolveSdkVersion");
 /**
@@ -25,6 +26,7 @@ async function* serveExecutor(options, context) {
     await (0, iris_app_build_utilities_1.checkPackageVersion)(false);
     const settings = (0, iris_app_1.getSettings)();
     const skipTypeChecking = options.skipTypeChecking ?? false;
+    const productionReact = options.productionReact ?? false;
     // eslint-disable-next-line @trackunit/no-typescript-assertion, @typescript-eslint/no-non-null-assertion
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
     const projectRootDir = (0, path_1.join)(context.root, projectRoot);
@@ -69,6 +71,7 @@ async function* serveExecutor(options, context) {
         const defaultConfig = await (0, defaultViteConfig_1.getDefaultViteConfig)("development", context.root, projectRootDir, irisAppManifest, context, {
             serversidePortMap: serversideResult.portMap,
             skipTypeChecking,
+            productionReact,
             // Surface a persistent rebuild reminder when the in-sync check was skipped.
             degraded: checkCustomFieldsResult === "unverified",
         });
@@ -83,6 +86,15 @@ async function* serveExecutor(options, context) {
             }
             finalConfig = customConfig;
         }
+        if (productionReact) {
+            const conflicts = (0, findProductionReactConflicts_1.findProductionReactConflicts)(finalConfig);
+            if (conflicts.length > 0) {
+                const conflictLines = conflicts.map(conflict => `     - ${conflict}`).join("\n");
+                // eslint-disable-next-line no-console
+                console.warn(`\n  ⚠️  --productionReact may not take effect, because the final Vite config (including your vite.config.ts) is inconsistent with it:\n${conflictLines}\n` +
+                    "  Keep the default config's `define`, `oxc` and `optimizeDeps` settings when you extend it, and do not add a React plugin.\n");
+            }
+        }
         // Apply port override if specified
         if (options.port !== undefined) {
             finalConfig.server = { ...finalConfig.server, port: options.port };

package/src/executors/serve/schema.json

@@ -28,6 +28,11 @@
       "type": "boolean",
       "description": "Skip TypeScript type checking during dev server",
       "default": false
+    },
+    "productionReact": {
+      "type": "boolean",
+      "description": "Serve React's production runtime (no jsxDEV, no React dev warnings, no Fast Refresh) to reproduce issues that only show up in deployed apps. Only affects local serving; it never changes the output of build.",
+      "default": false
     }
   },
   "required": []

package/src/executors/utils/defaultViteConfig.js

@@ -28,6 +28,7 @@ const virtualEntryPlugin = {
         return null;
     },
 };
+const PRODUCTION_NODE_ENV = JSON.stringify("production");
 /**
  * Gets the default Vite config for Iris Apps.
  *
@@ -39,6 +40,7 @@ const virtualEntryPlugin = {
  * @returns {Promise<UserConfig>} the default Vite config
  */
 const getDefaultViteConfig = async (mode, nxRootDir, appDir, irisAppManifest, context, options = {}) => {
+    const productionReact = options.productionReact ?? false;
     // Dynamic import - safe after enableTsConfigPath() is called
     const irisAppPlugins = await (0, getTrackunitIrisAppVitePlugins_1.getTrackunitIrisAppVitePlugins)({
         appDir,
@@ -51,6 +53,7 @@ const getDefaultViteConfig = async (mode, nxRootDir, appDir, irisAppManifest, co
         serversidePortMap: options.serversidePortMap,
         skipTypeChecking: options.skipTypeChecking,
         degraded: options.degraded,
+        productionReact,
     });
     return {
         root: appDir,
@@ -63,9 +66,22 @@ const getDefaultViteConfig = async (mode, nxRootDir, appDir, irisAppManifest, co
             rolldownOptions: {
                 transform: {
                     target: "esnext",
+                    // Pre-bundled React picks its runtime from this define. Vite also hashes it into the
+                    // dependency cache key, so toggling the option re-optimizes instead of reusing the
+                    // other mode's React.
+                    ...(productionReact ? { define: { "process.env.NODE_ENV": PRODUCTION_NODE_ENV } } : {}),
                 },
             },
         },
+        ...(productionReact
+            ? {
+                // `NODE_ENV` for the app's own code, without touching `process.env` (the custom-field
+                // escape-hatch guard reads the real environment).
+                define: { "process.env.NODE_ENV": PRODUCTION_NODE_ENV },
+                // Replaces the React plugin's serve transform, which always emits `jsxDEV`.
+                oxc: { jsx: { runtime: "automatic", development: false } },
+            }
+            : {}),
         build: {
             outDir: `dist/apps/${context.projectName}`,
             emptyOutDir: true,

package/src/executors/utils/findProductionReactConflicts.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findProductionReactConflicts = void 0;
+const NODE_ENV_DEFINE_KEY = "process.env.NODE_ENV";
+const PRODUCTION_DEFINE_VALUE = '"production"';
+const flattenPluginNames = (plugins) => (plugins ?? []).flatMap((plugin) => {
+    if (Array.isArray(plugin)) {
+        return flattenPluginNames(plugin);
+    }
+    if (typeof plugin === "object" && plugin !== null && "name" in plugin && typeof plugin.name === "string") {
+        return [plugin.name];
+    }
+    return [];
+});
+/**
+ * Finds what in the final Vite config (default config merged with the app's own `vite.config.ts`)
+ * defeats `serve --productionReact`. The option relies on three settings from the default config
+ * and on the React plugin being absent; an app config that replaces or adds them silently serves
+ * React's development runtime again, or crashes because `jsxDEV` is undefined in production React.
+ *
+ * @param config - the final Vite config that is handed to the dev server
+ * @returns {Array<string>} one human readable problem per conflict, empty when the config is consistent
+ */
+const findProductionReactConflicts = (config) => {
+    const conflicts = [];
+    const defineValue = config.define?.[NODE_ENV_DEFINE_KEY];
+    if (defineValue === undefined) {
+        conflicts.push(`\`define["${NODE_ENV_DEFINE_KEY}"]\` is missing, so the app's own code keeps React's development runtime`);
+    }
+    else if (defineValue !== PRODUCTION_DEFINE_VALUE) {
+        conflicts.push(`\`define["${NODE_ENV_DEFINE_KEY}"]\` is ${JSON.stringify(defineValue)} instead of ${JSON.stringify(PRODUCTION_DEFINE_VALUE)}, so the app's own code keeps React's development runtime`);
+    }
+    const optimizerDefineValue = config.optimizeDeps?.rolldownOptions?.transform?.define?.[NODE_ENV_DEFINE_KEY];
+    if (optimizerDefineValue === undefined) {
+        conflicts.push(`\`optimizeDeps.rolldownOptions.transform.define["${NODE_ENV_DEFINE_KEY}"]\` is missing, so pre-bundled dependencies (React itself) keep the development runtime`);
+    }
+    else if (optimizerDefineValue !== PRODUCTION_DEFINE_VALUE) {
+        conflicts.push(`\`optimizeDeps.rolldownOptions.transform.define["${NODE_ENV_DEFINE_KEY}"]\` is ${JSON.stringify(optimizerDefineValue)} instead of ${JSON.stringify(PRODUCTION_DEFINE_VALUE)}, so pre-bundled dependencies (React itself) keep the development runtime`);
+    }
+    if (config.oxc === undefined || config.oxc === false) {
+        conflicts.push("`oxc.jsx` is missing, so JSX is not compiled with the production runtime");
+    }
+    else {
+        const jsxConfig = typeof config.oxc === "object" ? config.oxc.jsx : undefined;
+        if (jsxConfig === undefined) {
+            conflicts.push("`oxc.jsx` is missing, so JSX is not compiled with the production runtime");
+        }
+        else if (typeof jsxConfig === "string") {
+            conflicts.push(`\`oxc.jsx\` is set to ${JSON.stringify(jsxConfig)} instead of an object with \`runtime: "automatic"\` and \`development: false\``);
+        }
+        else {
+            if (jsxConfig.runtime !== "automatic") {
+                conflicts.push(`\`oxc.jsx.runtime\` must be \`"automatic"\` for production React, got ${JSON.stringify(jsxConfig.runtime ?? "undefined")}`);
+            }
+            if (jsxConfig.development !== false) {
+                conflicts.push(`\`oxc.jsx.development\` must be \`false\` for production React (got ${JSON.stringify(jsxConfig.development ?? "undefined")})`);
+            }
+        }
+    }
+    const reactPlugins = flattenPluginNames(config.plugins).filter(name => name.startsWith("vite:react"));
+    if (reactPlugins.length > 0) {
+        conflicts.push(`a React plugin is registered (${reactPlugins.join(", ")}); its serve transform emits \`jsxDEV\`, which is undefined in React's production runtime`);
+    }
+    return conflicts;
+};
+exports.findProductionReactConflicts = findProductionReactConflicts;
+//# sourceMappingURL=findProductionReactConflicts.js.map

package/src/executors/utils/getTrackunitIrisAppVitePlugins.js

@@ -677,7 +677,9 @@ async function getTrackunitIrisAppVitePlugins(options) {
         // React Fast Refresh — enables HMR for React components so file changes
         // are hot-swapped without a full page reload. Safe with Module Federation
         // because Iris apps bundle their own React (iframe isolation).
-        (0, plugin_react_swc_1.default)({}),
+        // Skipped when serving with React's production runtime: its serve transform is
+        // development-only (`jsxDEV`, which is `undefined` in React's production build).
+        !options.productionReact && (0, plugin_react_swc_1.default)({}),
         (0, tailwindSourcesPlugin_1.createTailwindSourcesPlugin)({ rootDir: workspaceRoot }),
         hasExposes && disableHostAutoInitPlugin,
         federationPlugin,