Disable AMD in our bundle (#5478)

compulim · web-flow · commit 4c7400adaede · 2025-05-15T19:46:46.000Z
* Bundle globalize-runtime

* Disable ESLint for PrecompiledGlobalize.bundle.js

* Add entry

* Use undefined

* Disable AMD on bundled code

* Update entry

* Revert globalize changes and remove define from test harness

* Revert

* Add comment

* Remove define.amd

* Update entry
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -219,6 +219,8 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Fixed [#5452](https://github.com/microsoft/BotFramework-WebChat/issues/5452). With Fluent/Copilot theme, the typing indicator padding should not be squashed, in PR [#5453](https://github.com/microsoft/BotFramework-WebChat/pull/5453), by [@compulim](https://github.com/compulim)
 - Fixed [#5461](https://github.com/microsoft/BotFramework-WebChat/issues/5461). On macOS and Fluent skinpack applied, using Japanese IME to input some Japanese text should not send them immediately, in PR [#5462](https://github.com/microsoft/BotFramework-WebChat/pull/5462), by [@compulim](https://github.com/compulim)
 - Fixed [#5472](https://github.com/microsoft/BotFramework-WebChat/issues/5472), ensure proper inheritance from the outside of Web Chat for visibility CSS property when hidden, in PR [#5473](https://github.com/microsoft/BotFramework-WebChat/pull/5473), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed [#5474](https://github.com/microsoft/BotFramework-WebChat/issues/5474). Disable AMD glue code in bundle, in PR [#5478](https://github.com/microsoft/BotFramework-WebChat/pull/5478), by [@compulim](https://github.com/compulim)
+   - Downstreamers who use our CommonJS and ES Modules output with esbuild will need to disable AMD themselves to prevent conflict with RequireJS
 
 # Removed
 
diff --git a/__tests__/html2/hosting/requirejs.html b/__tests__/html2/hosting/requirejs.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://requirejs.org/docs/release/2.3.7/minified/require.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        WebChat.renderWebChat(
+          {
+            directLine: WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() }),
+            store: testHelpers.createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/test/harness/package.json b/packages/test/harness/package.json
@@ -14,7 +14,7 @@
   "scripts": {
     "build": "npm run build:babel && npm run build:esbuild",
     "build:babel": "babel --config-file ./babel.config.json --out-dir lib src",
-    "build:esbuild": "esbuild lib/browser/index.js --bundle --define:process.env.CI=undefined --outfile=dist/test-harness.js --sourcemap --target=chrome100",
+    "build:esbuild": "esbuild lib/browser/index.js --bundle --define:define=undefined --define:process.env.CI=undefined --outfile=dist/test-harness.js --sourcemap --target=chrome100",
     "bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0)",
     "bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
     "bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",
diff --git a/packages/test/page-object/package.json b/packages/test/page-object/package.json
@@ -11,7 +11,7 @@
   "scripts": {
     "build": "npm run build:babel && npm run build:esbuild",
     "build:babel": "babel --out-dir lib/ src/",
-    "build:esbuild": "esbuild lib/index.js --bundle --outfile=dist/test-page-object.js --sourcemap --target=chrome100",
+    "build:esbuild": "esbuild lib/index.js --bundle --define:define=undefined --outfile=dist/test-page-object.js --sourcemap --target=chrome100",
     "bump": "npm run bump:prod && npm run bump:dev && (npm audit fix || exit 0)",
     "bump:dev": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.devDependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install $PACKAGES_TO_BUMP || true",
     "bump:prod": "PACKAGES_TO_BUMP=$(cat package.json | jq -r '(.pinDependencies // {}) as $P | (.localDependencies // {} | keys) as $L | (.dependencies // {}) | to_entries | map(select(.key as $K | $L | contains([$K]) | not)) | map(.key + \"@\" + ($P[.key] // [\"latest\"])[0]) | join(\" \")') && [ ! -z \"$PACKAGES_TO_BUMP\" ] && npm install --save-exact $PACKAGES_TO_BUMP || true",
diff --git a/tsup.base.config.ts b/tsup.base.config.ts
@@ -17,6 +17,16 @@ const baseConfig: Options & { target: Target[] } = {
     ...(npm_package_version ? { npm_package_version } : {})
   },
   esbuildOptions: options => {
+    // esbuild don't touch AMD but it also don't remove AMD glue code.
+    // Some of our packages prefers AMD over CJS via UMD and it also use anonymous modules.
+    // This combination conflict with RequireJS if it present in the system.
+    // We are removing AMD glue code manually, just like how Rollup does.
+    // Read more at https://github.com/evanw/esbuild/issues/1348.
+    // Also https://github.com/rollup/plugins/blob/e1a5ef99f1578eb38a8c87563cb9651db228f3bd/packages/commonjs/src/transform-commonjs.js#L328.
+    // Test case at /__tests__/html2/hosting/requirejs.html.
+    options.define = options.define || {};
+    options.define.define = 'undefined';
+
     options.legalComments = 'linked';
   },
   esbuildPlugins:
