feat(turbopack): add loadScript method for script external

Author: fireairforce

turbopack/crates/turbopack-ecmascript-runtime/js/src/browser/runtime/base/runtime-base.ts

@@ -252,6 +252,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,

turbopack/crates/turbopack-ecmascript-runtime/js/src/shared/runtime-types.d.ts

@@ -63,6 +63,7 @@ type DynamicExport = (
 
 type LoadChunk = (chunkPath: ChunkPath) => Promise<any> | undefined
 type LoadChunkByUrl = (chunkUrl: ChunkUrl) => Promise<any> | undefined
+type LoadScript = (scriptUrl: string) => Promise<void>
 type LoadWebAssembly = (
   wasmChunkPath: ChunkPath,
   edgeModule: () => WebAssembly.Module,
@@ -147,6 +148,7 @@ interface TurbopackBaseContext<M> {
   M: ModuleFactories
   l: LoadChunk
   L: LoadChunkByUrl
+  S: LoadScript
   w: LoadWebAssembly
   u: LoadWebAssemblyModule
   P: ResolveAbsolutePath

turbopack/crates/turbopack-ecmascript/src/references/external_module.rs

@@ -36,7 +36,7 @@ use crate::{
     references::async_module::{AsyncModule, OptionAsyncModule},
     runtime_functions::{
         TURBOPACK_EXPORT_NAMESPACE, TURBOPACK_EXPORT_VALUE, TURBOPACK_EXTERNAL_IMPORT,
-        TURBOPACK_EXTERNAL_REQUIRE, TURBOPACK_LOAD_BY_URL,
+        TURBOPACK_EXTERNAL_REQUIRE, TURBOPACK_LOAD_SCRIPT,
     },
     utils::StringifyJs,
 };
@@ -210,42 +210,54 @@ impl CachedExternalModule {
                     let variable_name = &self.request[..at_index];
                     let url = &self.request[at_index + 1..];
 
-                    // Wrap the loading and variable access in a try-catch block
-                    writeln!(code, "let mod;")?;
-                    writeln!(code, "try {{")?;
+                    // Similar to webpack's approach: wrap in a promise that checks variable before
+                    // and after loading
+                    writeln!(code, "const mod = await (async () => {{")?;
 
-                    // First load the URL
+                    // First check if variable already exists (avoid redundant loading)
                     writeln!(
                         code,
-                        "  await {TURBOPACK_LOAD_BY_URL}({});",
+                        "  if (typeof globalThis[{}] !== 'undefined') {{",
+                        StringifyJs(variable_name)
+                    )?;
+                    writeln!(
+                        code,
+                        "    return globalThis[{}];",
+                        StringifyJs(variable_name)
+                    )?;
+                    writeln!(code, "  }}")?;
+
+                    // Load the script if variable doesn't exist
+                    writeln!(
+                        code,
+                        "  await {TURBOPACK_LOAD_SCRIPT}({});",
                         StringifyJs(url)
                     )?;
 
-                    // Then get the variable from global with existence check
+                    // After loading, check again if the variable is available
                     writeln!(
                         code,
-                        "  if (typeof global[{}] === 'undefined') {{",
+                        "  if (typeof globalThis[{}] !== 'undefined') {{",
                         StringifyJs(variable_name)
                     )?;
                     writeln!(
                         code,
-                        "    throw new Error('Variable {} is not available on global object after \
-                         loading {}');",
-                        StringifyJs(variable_name),
-                        StringifyJs(url)
+                        "    return globalThis[{}];",
+                        StringifyJs(variable_name)
                     )?;
                     writeln!(code, "  }}")?;
-                    writeln!(code, "  mod = global[{}];", StringifyJs(variable_name))?;
 
-                    // Catch and re-throw errors with more context
-                    writeln!(code, "}} catch (error) {{")?;
+                    // Variable not found after loading - throw error
                     writeln!(
                         code,
-                        "  throw new Error('Failed to load external URL module {}: ' + \
-                         (error.message || error));",
-                        StringifyJs(&self.request)
+                        "  const error = new Error('Loading script failed.\\n(missing: {})');",
+                        StringifyJs(url)
                     )?;
-                    writeln!(code, "}}")?;
+                    writeln!(code, "  error.name = 'ScriptExternalLoadError';")?;
+                    writeln!(code, "  error.type = 'missing';")?;
+                    writeln!(code, "  error.request = {};", StringifyJs(url))?;
+                    writeln!(code, "  throw error;")?;
+                    writeln!(code, "}})();")?;
                 } else {
                     // Invalid format - throw error
                     writeln!(

turbopack/crates/turbopack-ecmascript/src/runtime_functions.rs

@@ -78,6 +78,7 @@ pub const TURBOPACK_CACHE: &TurbopackRuntimeFunctionShortcut = make_shortcut!("c
 pub const TURBOPACK_MODULES: &TurbopackRuntimeFunctionShortcut = make_shortcut!("M");
 pub const TURBOPACK_LOAD: &TurbopackRuntimeFunctionShortcut = make_shortcut!("l");
 pub const TURBOPACK_LOAD_BY_URL: &TurbopackRuntimeFunctionShortcut = make_shortcut!("L");
+pub const TURBOPACK_LOAD_SCRIPT: &TurbopackRuntimeFunctionShortcut = make_shortcut!("S");
 pub const TURBOPACK_CLEAR_CHUNK_CACHE: &TurbopackRuntimeFunctionShortcut = make_shortcut!("C");
 pub const TURBOPACK_DYNAMIC: &TurbopackRuntimeFunctionShortcut = make_shortcut!("j");
 pub const TURBOPACK_RESOLVE_ABSOLUTE_PATH: &TurbopackRuntimeFunctionShortcut = make_shortcut!("P");
@@ -97,7 +98,7 @@ pub const TURBOPACK_PUBLIC_PATH: &TurbopackRuntimeFunctionShortcut = make_shortc
 
 /// Adding an entry to this list will automatically ensure that `__turbopack_XXX__` can be called
 /// from user code (by inserting a replacement into free_var_references)
-pub const TURBOPACK_RUNTIME_FUNCTION_SHORTCUTS: [(&str, &TurbopackRuntimeFunctionShortcut); 24] = [
+pub const TURBOPACK_RUNTIME_FUNCTION_SHORTCUTS: [(&str, &TurbopackRuntimeFunctionShortcut); 25] = [
     ("__turbopack_require__", TURBOPACK_REQUIRE),
     ("__turbopack_module_context__", TURBOPACK_MODULE_CONTEXT),
     ("__turbopack_import__", TURBOPACK_IMPORT),
@@ -108,6 +109,7 @@ pub const TURBOPACK_RUNTIME_FUNCTION_SHORTCUTS: [(&str, &TurbopackRuntimeFunctio
     ("__turbopack_modules__", TURBOPACK_MODULES),
     ("__turbopack_load__", TURBOPACK_LOAD),
     ("__turbopack_load_by_url__", TURBOPACK_LOAD_BY_URL),
+    ("__turbopack_load_script__", TURBOPACK_LOAD_SCRIPT),
     ("__turbopack_dynamic__", TURBOPACK_DYNAMIC),
     (
         "__turbopack_resolve_absolute_path__",