From e6d90e25825042f293b31fce1abcb28bc6ce2945 Mon Sep 17 00:00:00 2001
From: Konstantin Barabanov <criitch@yandex.ru>
Date: Fri, 7 Nov 2025 16:45:14 +0300
Subject: [PATCH] docs: var host + esm remote (vite) workaround

---
 .../docs/en/guide/troubleshooting/other.mdx   | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/apps/website-new/docs/en/guide/troubleshooting/other.mdx b/apps/website-new/docs/en/guide/troubleshooting/other.mdx
index 3d60b59055c..a85a75cc8b8 100644
--- a/apps/website-new/docs/en/guide/troubleshooting/other.mdx
+++ b/apps/website-new/docs/en/guide/troubleshooting/other.mdx
@@ -120,3 +120,58 @@ export default function MFLinkPlugin(): ModuleFederationRuntimePlugin {
   };
 }
 ```
+
+## Problem: esm `remoteEntry.js` usage in var `host` environment
+
+### Problem
+
+There are some cases when your `host` application is written with [ModuleFederationPlugin](https://webpack.js.org/plugins/module-federation-plugin/) and you want to use esm (e.g. `vite`) in your `remote` application.
+And your `host` application doesn't support esm `remote` loading (e.g. your `host` doesn't use `promise new Promise` workaround).
+
+In this case you are not able to load `remote` esm application without changing the `host` application.
+
+#### Error Message
+:::danger Browser Error Message
+Uncaught SyntaxError: Cannot use import statement outside a module
+:::
+
+### Solution
+
+If you are not able (or don't want) to rewrite your `host` var environment to support esm `remote` import, you can write a little "var" layer on the `remote`'s side.
+
+In you `remote` (`vite`) app create a new workaround file `public/varRemoteEntry.js`:
+
+```js
+// public/varRemoteEntry.js
+var remote; // name of remote app
+remote = (function () {
+  function getScriptUrl() {
+    return document.currentScript.src
+  }
+
+  const entry = `${getScriptUrl()}/../remoteEntry.js` // path to esm remoteEntry.js
+
+  return {
+    get: (...args) => import(entry).then(m => m.get(...args)),
+    init: (...args) => import(entry).then(m => m.init(...args)),
+  };
+})();
+```
+
+Update `remotes` config in your `host` (`webpack`) app:
+
+```diff
+new ModuleFederationPlugin({
+  // ... webpack module federation config
+  remotes: {
+-    remote: 'remote@http://localhost:3001/remoteEntry.js',
++    remote: 'remote@http://localhost:3001/varRemoteEntry.js',
+  }
+})
+```
+
+Now you are able to import modules from `remote` (esm) in your `host` (var) application:
+
+```tsx
+const App = await import('remote/App')
+```