fix(pack): script external loadScript

crates/pack-core/js/src/umd/runtime-base.ts

@@ -133,6 +133,36 @@ function loadChunkByUrl(
 }
 browserContextPrototype.L = loadChunkByUrl;
 
+const loadedScripts = new Map<string, Promise<void>>();
+
+/**
+ * Load an external script by creating a <script> tag.
+ * This is used for script externals that need to be loaded from CDN or other external sources.
+ */
+function loadScript(
+  this: TurbopackBrowserBaseContext<Module>,
+  scriptUrl: string,
+): Promise<void> {
+  // Return cached promise if script is already loading or loaded
+  let promise = loadedScripts.get(scriptUrl);
+  if (promise) {
+    return promise;
+  }
+
+  promise = new Promise<void>((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = scriptUrl;
+    script.onload = () => resolve();
+    script.onerror = () =>
+      reject(new Error(`Failed to load script: ${scriptUrl}`));
+    document.head.appendChild(script);
+  });
+
+  loadedScripts.set(scriptUrl, promise);
+  return promise;
+}
+browserContextPrototype.S = loadScript;
+
 // Do not make this async. React relies on referential equality of the returned Promise.
 function loadChunkByUrlInternal(
   sourceType: SourceType,

crates/pack-core/js/src/umd/runtime-types.d.ts

@@ -53,6 +53,7 @@ type DynamicExport = (
 ) => void;
 
 type LoadChunkByUrl = (chunkUrl: ChunkUrl) => Promise<any> | undefined;
+type LoadScript = (scriptUrl: string) => Promise<void>;
 
 type ModuleCache<M> = Record<ModuleId, M>;
 // TODO properly type values here
@@ -119,6 +120,7 @@ interface TurbopackBaseContext<M> {
   n: ExportNamespace;
   m: Module;
   L: LoadChunkByUrl;
+  S: LoadScript;
   c: ModuleCache<M>;
   M: ModuleFactories;
   g: typeof globalThis;

crates/pack-tests/tests/snapshot/externals/async-script-externals/config.json

@@ -0,0 +1,13 @@
+{
+    "config": {
+        "entry": [
+            {
+                "import": "input/index.ts",
+                "name": "main"
+            }
+        ],
+        "externals": {
+           "lodash": "script _@https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js"
+        }
+    }
+}

crates/pack-tests/tests/snapshot/externals/async-script-externals/input/index.ts

@@ -0,0 +1,6 @@
+const func = async () => {
+    // @ts-ignore
+    const _ = await import('lodash');
+    console.log(Object.keys(_.default.omit({ a: 1 }, 'a')).length === 0);
+};
+func();

crates/pack-tests/tests/snapshot/externals/async-script-externals/output/_externals____2fc6bb03.js

@@ -0,0 +1,25 @@
+(globalThis["TURBOPACK"] || (globalThis["TURBOPACK"] = [])).push([typeof document === "object" ? document.currentScript : undefined,
+20, ((__turbopack_context__) => {
+"use strict";
+
+return __turbopack_context__.a(async (__turbopack_handle_async_dependencies__, __turbopack_async_result__) => { try {
+
+const mod = await (async () => {
+  if (typeof globalThis["_"] !== 'undefined') {
+    return globalThis["_"];
+  }
+  await __turbopack_context__.S("https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js");
+  if (typeof globalThis["_"] !== 'undefined') {
+    return globalThis["_"];
+  }
+  const error = new Error('Loading script failed.\n(missing: "https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js")');
+  error.name = 'ScriptExternalLoadError';
+  error.type = 'missing';
+  error.request = "https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js";
+  throw error;
+})();
+
+__turbopack_context__.v(mod);
+__turbopack_async_result__();
+} catch(e) { __turbopack_async_result__(e); } }, true);}),
+]);

crates/pack-tests/tests/snapshot/externals/async-script-externals/output/main.js

@@ -0,0 +1,5 @@
+(globalThis["TURBOPACK"] || (globalThis["TURBOPACK"] = [])).push([
+    typeof document === "object" ? document.currentScript : undefined,
+    {"otherChunks":["_root-of-the-server___fa01a871.js"],"runtimeModuleIds":[6]}
+]);
+// Dummy runtime

crates/pack-tests/tests/snapshot/externals/script/output/_externals____2fc6bb03.js

@@ -4,16 +4,20 @@
 
 return __turbopack_context__.a(async (__turbopack_handle_async_dependencies__, __turbopack_async_result__) => { try {
 
-let mod;
-try {
-  await __turbopack_context__.L("https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js");
-  if (typeof global["_"] === 'undefined') {
-    throw new Error('Variable "_" is not available on global object after loading "https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js"');
+const mod = await (async () => {
+  if (typeof globalThis["_"] !== 'undefined') {
+    return globalThis["_"];
   }
-  mod = global["_"];
-} catch (error) {
-  throw new Error('Failed to load external URL module "_@https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js": ' + (error.message || error));
-}
+  await __turbopack_context__.S("https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js");
+  if (typeof globalThis["_"] !== 'undefined') {
+    return globalThis["_"];
+  }
+  const error = new Error('Loading script failed.\n(missing: "https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js")');
+  error.name = 'ScriptExternalLoadError';
+  error.type = 'missing';
+  error.request = "https://gw.alipayobjects.com/os/lib/lodash/4.17.21/lodash.min.js";
+  throw error;
+})();
 
 __turbopack_context__.v(mod);
 __turbopack_async_result__();