Fix import issue for npm-in-browser branch (#216)

* Load 'npm-in-browser' via ESM module * Replace 'window as any' with 'globalThis' for simplicity
dfinity · Jan 6, 2024 · 679c627 · 679c627
1 parent 74d49ae
commit 679c627
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 194 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,9 +12,7 @@
     "@types/react-dom": "^17.0.0",
     "@types/styled-components": "^5.1.10",
     "lodash.debounce": "^4.0.8",
-    "memfs": "^4.6.0",
     "motoko": "^3.6.10",
-    "npm-in-browser": "^0.1.3",
     "prettier-plugin-motoko": "^0.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/public/index.html b/public/index.html
@@ -12,6 +12,10 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Motoko Playground - DFINITY</title>
+    <script type="module">
+      window.memfs = import("https://esm.sh/[email protected]");
+      window.npmInBrowser = import("https://esm.sh/[email protected]");
+    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,5 @@
 import { useCallback, useEffect, useReducer, useState } from "react";
 import styled, { createGlobalStyle } from "styled-components";
-import { runNpmCli } from "npm-in-browser";
-import memfs from "memfs";
 
 // @ts-ignore
 // eslint-disable-next-line import/no-webpack-loader-syntax
@@ -233,6 +231,12 @@ export function App() {
       homepage: "https://sdk.dfinity.org/docs/base-libraries/stdlib-intro.html",
     };
     (async () => {
+      while (!("npmInBrowser" in globalThis)) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      const { runNpmCli } = await globalThis.npmInBrowser;
+      const memfs = await globalThis.memfs;
+
       await worker.fetchPackage(baseInfo);
       await workplaceDispatch({
         type: "loadPackage",