[chat] Fix global preload error from the remend import

packages/x-chat/package.json

@@ -88,6 +88,10 @@
     "node": ">=14.0.0"
   },
   "imports": {
-    "#formatErrorMessage": "@mui/x-internals/formatErrorMessage"
+    "#formatErrorMessage": "@mui/x-internals/formatErrorMessage",
+    "#remend": {
+      "import": "remend",
+      "default": "./src/internals/remendUnavailable.ts"
+    }
   }
 }

packages/x-chat/src/internals/remendUnavailable.ts

@@ -0,0 +1,14 @@
+/**
+ * CommonJS resolution target for the `#remend` subpath import (see this package's
+ * `imports` field, which points ESM at the real `remend` package and CJS here).
+ *
+ * `remend` is ESM-only — its `exports` map declares no `require` condition — so the
+ * CJS build must not name it at all. A bundler that statically resolves a
+ * `require('remend')` in that output fails the build outright ("not exported under
+ * the conditions [...require...]"), which is why the specifier cannot simply be
+ * inlined for every format.
+ *
+ * Exporting no repair function is the signal: `loadRemend` sees a non-function and
+ * degrades to `fallbackRepair`, exactly as it does when `remend` is absent.
+ */
+export default undefined;

packages/x-chat/src/internals/streamingMarkdownRepair.test.ts

@@ -1,6 +1,11 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { describe, expect, it, vi, beforeEach } from 'vitest';
 import { fallbackRepair, loadRemend, resetRemendCache } from './streamingMarkdownRepair';
 
+const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
+
 describe('streamingMarkdownRepair', () => {
   beforeEach(() => {
     resetRemendCache();
@@ -65,4 +70,58 @@ describe('streamingMarkdownRepair', () => {
       expect(repair('x')).to.equal('x-2');
     });
   });
+
+  // Regression coverage for the `remend` specifier resolving in bundled apps.
+  // Importing it under a specifier a bundler can't statically resolve left the upgrade
+  // as dead code in every browser bundle and — where the bundler wraps dynamic imports
+  // in a preload helper — dispatched a global load-error event on each render.
+  // See https://github.com/mui/mui-x/issues/23160.
+  describe('remend specifier resolution', () => {
+    it('resolves the real remend through the default importer', async () => {
+      // No injected importer: exercises `import('#remend')` for real, so a specifier
+      // that stopped resolving would fail here rather than silently degrade.
+      const repair = await loadRemend();
+
+      expect(repair).not.to.equal(fallbackRepair);
+      // remend completes the unterminated inline marker; fallbackRepair never would.
+      expect(repair('a **bold')).to.equal('a **bold**');
+    });
+
+    it('degrades to fallbackRepair on the CommonJS `#remend` stub', async () => {
+      // What `require('#remend')` resolves to in the CJS build, where the ESM-only
+      // `remend` cannot be named at all.
+      const stub = await import('./remendUnavailable');
+      const repair = await loadRemend(() => Promise.resolve(stub));
+
+      expect(repair).to.equal(fallbackRepair);
+    });
+
+    it('imports a statically analyzable specifier', () => {
+      const source = fs.readFileSync(
+        path.join(packageRoot, 'src/internals/streamingMarkdownRepair.ts'),
+        'utf8',
+      );
+
+      expect(source).to.contain("import('#remend')");
+      // A specifier read from a variable, or hidden behind an ignore hint, is
+      // unanalyzable: bundlers leave a bare specifier that can never resolve in a
+      // browser instead of bundling the dependency.
+      expect(source).not.to.match(/import\(\s*(\/\*[^*]*\*\/\s*)*[A-Za-z_$]/);
+    });
+
+    it('maps `#remend` per module format in package.json', () => {
+      const packageJson = JSON.parse(
+        fs.readFileSync(path.join(packageRoot, 'package.json'), 'utf8'),
+      );
+      const remendImport = packageJson.imports['#remend'];
+
+      // ESM gets the real package, so bundlers resolve and bundle it.
+      expect(remendImport.import).to.equal('remend');
+      // Every other condition (CJS) resolves to a file inside this package rather than
+      // to `remend`, which declares no `require` export — a bundler resolving that in
+      // the CJS output fails the build outright.
+      expect(remendImport.default).to.match(/^\.\//);
+      expect(packageJson.dependencies.remend).to.be.a('string');
+    });
+  });
 });

packages/x-chat/src/internals/streamingMarkdownRepair.ts

@@ -15,29 +15,30 @@ export type RepairMarkdown = (text: string) => string;
  */
 export const fallbackRepair: RepairMarkdown = normalizeMarkdownForRender;
 
-// `remend` is an ESM-only package and a declared dependency of this package. The
-// build downlevels dynamic `import()` to `require()` in the CJS output, and a static
-// `require()` of an ES module throws `ERR_REQUIRE_ESM`. Reading the specifier from a
-// variable (plus the `@vite-ignore`/`webpackIgnore` hints) keeps that `require`/
-// `import` dynamic and unanalyzable, so it stays a genuine runtime import that fails
-// gracefully at call time instead of at build time. The `.catch` in `loadRemend`
-// then degrades to `fallbackRepair` — so a runtime that can't resolve the specifier
-// (or a CJS `require()` of the ESM module) costs nothing beyond the failed attempt.
-const REMEND_SPECIFIER = 'remend';
+// `remend` is an ESM-only package and a declared dependency of this package, so the
+// specifier it is imported under has to differ per output format. `#remend` is a
+// subpath import (see this package's `imports` field) that resolves to the real
+// `remend` package under the `import` condition and to a stub under `require`.
+//
+// The literal specifier matters: it has to stay statically analyzable so a consumer's
+// bundler resolves and bundles `remend` like any other dependency. Reading it from a
+// variable instead leaves an unresolvable bare `import('remend')` in the browser
+// bundle, which can never resolve at runtime (no import map) — making the upgrade dead
+// code, and, under bundlers that wrap dynamic imports in a preload helper, dispatching
+// a global load-error event on every render.
 function defaultRemendImporter(): Promise<unknown> {
-  // eslint-disable-next-line jsdoc/no-bad-blocks -- bundler hint comments, not JSDoc
-  return import(/* @vite-ignore */ /* webpackIgnore: true */ REMEND_SPECIFIER);
+  return import('#remend');
 }
 
 let remendPromise: Promise<RepairMarkdown> | undefined;
 
 /**
- * Lazily loads `remend` and returns a repair function. If the import rejects — e.g.
- * the CJS build downlevelled it to a `require()` of the ESM-only module, or a
- * consumer's bundler can't resolve the runtime specifier — it transparently degrades
- * to {@link fallbackRepair}. Cached after the first call.
+ * Lazily loads `remend` and returns a repair function. When it can't be loaded — the
+ * CJS build resolves `#remend` to a stub, and a consumer may have deduped or blocked
+ * the dependency — it transparently degrades to {@link fallbackRepair}. Cached after
+ * the first call.
  *
- * @param importer Injectable for tests; defaults to `() => import('remend')`.
+ * @param importer Injectable for tests; defaults to `() => import('#remend')`.
  */
 export function loadRemend(
   importer: () => Promise<unknown> = defaultRemendImporter,