diff --git a/scripts/bundles/internal-platform-client.ts b/scripts/bundles/internal-platform-client.ts
index 6c736037964..1f678ff339c 100644
--- a/scripts/bundles/internal-platform-client.ts
+++ b/scripts/bundles/internal-platform-client.ts
@@ -8,7 +8,7 @@ import type { BuildOptions } from '../utils/options';
 import { writePkgJson } from '../utils/write-pkg-json';
 import { aliasPlugin } from './plugins/alias-plugin';
 import { reorderCoreStatementsPlugin } from './plugins/reorder-statements';
-import { replacePlugin } from './plugins/replace-plugin';
+import { loadModuleReplacePlugin, replacePlugin } from './plugins/replace-plugin';
 
 export async function internalClient(opts: BuildOptions) {
   const inputClientDir = join(opts.buildDir, 'client');
@@ -55,6 +55,7 @@ export async function internalClient(opts: BuildOptions) {
       aliasPlugin(opts),
       replacePlugin(opts),
       reorderCoreStatementsPlugin(),
+      loadModuleReplacePlugin(),
     ],
   };
 
diff --git a/scripts/bundles/plugins/replace-plugin.ts b/scripts/bundles/plugins/replace-plugin.ts
index 21f043e260b..4242a02ffa8 100644
--- a/scripts/bundles/plugins/replace-plugin.ts
+++ b/scripts/bundles/plugins/replace-plugin.ts
@@ -14,3 +14,23 @@ export function replacePlugin(opts: BuildOptions): Plugin {
   replaceData[`process.binding('natives')`] = '';
   return rollupReplace({ ...replaceData, preventAssignment: true });
 }
+
+/**
+ * We need to manually find-and-replace a bit of code in
+ * `client-load-module.ts` which has to be present in order to prevent Esbuild
+ * from analyzing / transforming the input by ensuring it does not start with
+ * `"./"`. However some _other_ bundlers will _not_ work with such an import if
+ * it _lacks_ a leading `"./"`, so we thus we have to do a little dance where
+ * we manually replace it here after it's been run through Rollup.
+ *
+ * @returns a rollup string replacement plugin
+ */
+export function loadModuleReplacePlugin(): Plugin {
+  return rollupReplace({
+    // this ensures that the strings are replaced even if they are not
+    // surrounded by whitespace
+    // see https://github.com/rollup/plugins/blob/master/packages/replace/README.md#delimiters
+    delimiters: ['', ''],
+    '${MODULE_IMPORT_PREFIX}': './',
+  });
+}
diff --git a/scripts/esbuild/internal-platform-client.ts b/scripts/esbuild/internal-platform-client.ts
index a94402d54ba..aab98239599 100644
--- a/scripts/esbuild/internal-platform-client.ts
+++ b/scripts/esbuild/internal-platform-client.ts
@@ -1,4 +1,4 @@
-import type { BuildOptions as ESBuildOptions } from 'esbuild';
+import type { BuildOptions as ESBuildOptions, Plugin } from 'esbuild';
 import { replace } from 'esbuild-plugin-replace';
 import fs from 'fs-extra';
 import glob from 'glob';
@@ -45,6 +45,9 @@ export async function getInternalClientBundle(opts: BuildOptions): Promise<ESBui
     ...getBaseEsbuildOptions(),
     entryPoints: [join(inputClientDir, 'index.ts')],
     format: 'esm',
+    // we do 'write: false' here because we write the build to disk in our
+    // `findAndReplaceLoadModule` plugin below
+    write: false,
     outfile: join(outputInternalClientDir, 'index.js'),
     platform: 'node',
     external: clientExternal,
@@ -59,6 +62,7 @@ export async function getInternalClientBundle(opts: BuildOptions): Promise<ESBui
       // we want to get the esm, not the cjs, since we're creating an esm
       // bundle here
       externalAlias('@stencil/core/mock-doc', '../../mock-doc/index.js'),
+      findAndReplaceLoadModule(),
     ],
   };
 
@@ -96,6 +100,31 @@ export async function getInternalClientBundle(opts: BuildOptions): Promise<ESBui
   return [internalClientBundle, internalClientPatchBrowserBundle];
 }
 
+/**
+ * We need to manually find-and-replace a bit of code in
+ * `client-load-module.ts` in order to prevent Esbuild from analyzing /
+ * transforming the input by ensuring it does not start with `"./"`. However
+ * some _other_ bundlers will _not_ work with such an import if it _lacks_ a
+ * leading `"./"`, so we thus we have to do a little dance where we manually
+ * replace it here after it's been run through Esbuild.
+ *
+ * @returns an Esbuild plugin
+ */
+export function findAndReplaceLoadModule(): Plugin {
+  return {
+    name: 'findAndReplaceLoadModule',
+    setup(build) {
+      build.onEnd(async (result) => {
+        for (const file of result.outputFiles!) {
+          const { path, text } = file;
+
+          await fs.writeFile(path, text.replace(/\${MODULE_IMPORT_PREFIX}/, './'));
+        }
+      });
+    },
+  };
+}
+
 async function copyPolyfills(opts: BuildOptions, outputInternalClientPolyfillsDir: string) {
   const srcPolyfillsDir = join(opts.srcDir, 'client', 'polyfills');
 
diff --git a/src/client/client-load-module.ts b/src/client/client-load-module.ts
index f9686e2f4e0..8eb0a63646d 100644
--- a/src/client/client-load-module.ts
+++ b/src/client/client-load-module.ts
@@ -10,7 +10,16 @@ export const cmpModules = /*@__PURE__*/ new Map<string, { [exportName: string]:
  * the below, but instead retains a dynamic `import()` statement in the
  * emitted code.
  *
- * See here for details https://esbuild.github.io/api/#glob
+ * See here for details https://esbuild.github.io/api/#non-analyzable-imports
+ *
+ * We need to do this in order to prevent Esbuild from analyzing / transforming
+ * the input. However some _other_ bundlers will _not_ work with such an import
+ * if it _lacks_ a leading `"./"`, so we thus we have to do a little dance
+ * where here in the source code it must be like this, so that an undesirable
+ * transformation that Esbuild would otherwise carry out doesn't occur, but we
+ * actually need to then manually edit the bundled Esbuild code later on to fix
+ * that. We do this with plugins in the Esbuild and Rollup bundles which
+ * include this file.
  */
 const MODULE_IMPORT_PREFIX = './';