Revert "fix(compiler): move dynamic import path into a variable (#6452)" (#6464)

This reverts commit 52bdcb8.

Author: OS-jacobbell

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';
@@ -47,6 +47,9 @@ export async function getInternalClientBundles(opts: BuildOptions): Promise<ESBu
     ...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 getInternalClientBundles(opts: BuildOptions): Promise<ESBu
       externalAlias('@app-data', '@stencil/core/internal/app-data'),
       externalAlias('@app-globals', '@stencil/core/internal/app-globals'),
       externalAlias('@utils/shadow-css', './shadow-css.js'),
+      findAndReplaceLoadModule(),
     ],
   };
 
@@ -93,6 +97,31 @@ export async function getInternalClientBundles(opts: BuildOptions): Promise<ESBu
   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');
 

src/client/client-load-module.ts

@@ -5,6 +5,24 @@ import { consoleDevError, consoleError } from './client-log';
 
 export const cmpModules = /*@__PURE__*/ new Map<string, { [exportName: string]: d.ComponentConstructor }>();
 
+/**
+ * We need to separate out this prefix so that Esbuild doesn't try to resolve
+ * the below, but instead retains a dynamic `import()` statement in the
+ * emitted code.
+ *
+ * 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 = './';
+
 export const loadModule = (
   cmpMeta: d.ComponentRuntimeMeta,
   hostRef: d.HostRef,
@@ -26,20 +44,14 @@ export const loadModule = (
     return module[exportName];
   }
   /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-
-  /**
-   * Esbuild will try to statically match a path string inside an import statement.
-   * By putting dynamicImportPath into a variable, it can stay dynamic.
-   * For details: https://esbuild.github.io/api/#non-analyzable-imports
-   */
-  const hmr = BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : '';
-  const dynamicImportPath = `./${bundleId}.entry.js${hmr}`;
   return import(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */
     /* webpackExclude: /\.system\.entry\.js$/ */
     /* webpackMode: "lazy" */
-    dynamicImportPath
+    `${MODULE_IMPORT_PREFIX}${bundleId}.entry.js${
+      BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''
+    }`
   ).then(
     (importedModule) => {
       if (!BUILD.hotModuleReplacement) {