emscripten-core · JoeOsborn · Mar 11, 2025 · Mar 12, 2025 · Mar 12, 2025
diff --git a/src/lib/libpthread.js b/src/lib/libpthread.js
@@ -424,12 +424,7 @@ var LibraryPThread = {
         worker = new Worker(p.createScriptURL('ignored'), {{{ pthreadWorkerOptions }}});
       } else
 #endif
-      // We need to generate the URL with import.meta.url as the base URL of the JS file
-      // instead of just using new URL(import.meta.url) because bundler's only recognize
-      // the first case in their bundling step. The latter ends up producing an invalid
-      // URL to import from the server (e.g., for webpack the file:// path).
-      // See https://github.com/webpack/webpack/issues/12638
-      worker = new Worker(new URL('{{{ TARGET_JS_NAME }}}', import.meta.url), {{{ pthreadWorkerOptions }}});
+      worker = new Worker(import.meta.url, {{{ pthreadWorkerOptions }}});
 #else // EXPORT_ES6
       var pthreadMainJs = _scriptName;
 #if expectToReceiveOnModule('mainScriptUrlOrBlob')

diff --git a/test/test_browser.py b/test/test_browser.py
@@ -5536,20 +5536,33 @@ def test_error_reporting(self):
 
   @also_with_threads
   @parameterized({
-    '': (False,),
-    'es6': (True,),
-  })
-  def test_webpack(self, es6):
-    if es6:
+    '': (False,False,False),
+    # 'blob': (False,True,True),
+    # 'url': (False,True,False),
+    'es6': (True,False,False),
+    # 'es6_url': (True,True,True),
+    # 'es6_blob': (True,True,False),
+  })
+  def test_webpack(self, es6, main_script_url_or_blob, use_blob):
+    if es6 and main_script_url_or_blob:
+      copytree(test_file('webpack_es6_with_%s' % ('blob' if use_blob else 'url')), '.')
+      self.emcc_args += ['-sEXPORT_ES6', '-pthread', '-sPTHREAD_POOL_SIZE=1']
+      outfile = 'dist/hello.mjs'
+    elif es6:
       copytree(test_file('webpack_es6'), '.')
       self.emcc_args += ['-sEXPORT_ES6', '-pthread', '-sPTHREAD_POOL_SIZE=1']
       outfile = 'src/hello.mjs'
+    elif main_script_url_or_blob:
+      copytree(test_file('webpack_with_%s' % ('blob' if use_blob else 'url')), '.')
+      self.emcc_args += ['-pthread', '-sPTHREAD_POOL_SIZE=1']
+      outfile = 'dist/hello.js'
     else:
       copytree(test_file('webpack'), '.')
       outfile = 'src/hello.js'
     self.compile_btest('hello_world.c', ['-sEXIT_RUNTIME', '-sMODULARIZE', '-sENVIRONMENT=web,worker', '-o', outfile])
     self.run_process(shared.get_npm_cmd('webpack') + ['--mode=development', '--no-devtool'])
-    shutil.copy('src/hello.wasm', 'dist/')
+    if not main_script_url_or_blob:
+      shutil.copy('src/hello.wasm', 'dist/')
     self.run_browser('dist/index.html', '/report_result?exit:0')
 
   @also_with_threads
@@ -5559,6 +5572,16 @@ def test_vite(self):
     self.run_process(shared.get_npm_cmd('vite') + ['build'])
     self.run_browser('dist/index.html', '/report_result?exit:0')
 
+  @parameterized({
+    '':('vite_with_blob',),
+    'url':('vite_with_blob_url',),
+  })
+  def test_vite_with_blob(self, package):
+    copytree(test_file(package), '.')
+    self.compile_btest('hello_world.c', ['-sEXPORT_ES6', '-sEXIT_RUNTIME', '-sMODULARIZE', '-sENVIRONMENT=web,worker', '-sPTHREAD_POOL_SIZE=1', '-pthread', '-sPROXY_TO_PTHREAD', '-o', 'public/hello.mjs'])
+    self.run_process(shared.get_npm_cmd('vite') + ['build'])
+    self.run_browser('dist/index.html', '/report_result?exit:0')
+
   @also_with_threads
   def test_rollup(self):
     copytree(test_file('rollup'), '.')

diff --git a/test/vite_with_blob/index.html b/test/vite_with_blob/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <hr><div id='output'></div><hr>
+    <script type="module" src="./index.mjs"></script>
+  </body>
+</html>
diff --git a/test/vite_with_blob/index.mjs b/test/vite_with_blob/index.mjs
@@ -0,0 +1,24 @@
+fetch('hello.mjs').then((resp) => resp.blob().then((blob) => {
+  var params_blob = {
+    print: (function() {
+      var element = document.getElementById('output');
+      return function(text) {
+        console.log(text);
+        element.innerHTML += text.replace('\n', '<br>', 'g') + '<br>';
+      };
+    })(),
+    locateFile: function(path, _prefix) {
+      return path;
+    },
+    canvas: document.getElementById('canvas'),
+    mainScriptUrlOrBlob: blob
+  };
+
+  params_blob.print('testing...');
+
+  import(/* @vite-ignore */ URL.createObjectURL(blob)).then((factory) =>
+    factory.default(params_blob).then((instance) => {
+      console.log('loaded by blob');
+    })
+  );
+}));
diff --git a/test/vite_with_blob/vite.config.js b/test/vite_with_blob/vite.config.js
@@ -0,0 +1,3 @@
+export default {
+  base: './'
+}
diff --git a/test/vite_with_blob_url/index.html b/test/vite_with_blob_url/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <hr><div id='output'></div><hr>
+    <script type="module" src="./index.mjs"></script>
+  </body>
+</html>
diff --git a/test/vite_with_blob_url/index.mjs b/test/vite_with_blob_url/index.mjs
@@ -0,0 +1,23 @@
+var params_url = {
+  print: (function() {
+    var element = document.getElementById('output');
+    return function(text) {
+      console.log(text);
+      element.innerHTML += text.replace('\n', '<br>', 'g') + '<br>';
+    };
+  })(),
+  locateFile: function(path, _prefix) {
+    console.log("path",_prefix,path);
+    return path;
+  },
+  canvas: document.getElementById('canvas'),
+  mainScriptUrlOrBlob: 'hello.mjs'
+};
+
+params_url.print('testing...');
+
+import(/* @vite-ignore */ './hello.mjs').then((factory) =>
+  factory.default(params_url).then((instance) => {
+    console.log('loaded by url');
+  })
+);
diff --git a/test/vite_with_blob_url/vite.config.js b/test/vite_with_blob_url/vite.config.js
@@ -0,0 +1,6 @@
+export default {
+  base: './',
+  build:{
+    rollupOptions:{external:['./hello.mjs']}
+  }
+}
diff --git a/test/webpack_es6_with_blob/dist/index.html b/test/webpack_es6_with_blob/dist/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <hr><div id='output'></div><hr>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/test/webpack_es6_with_blob/src/index.mjs b/test/webpack_es6_with_blob/src/index.mjs
@@ -0,0 +1,24 @@
+fetch('hello.mjs').then((resp) => resp.blob().then((blob) => {
+  var params_blob = {
+    print: (function() {
+      var element = document.getElementById('output');
+      return function(text) {
+        console.log(text);
+        element.innerHTML += text.replace('\n', '<br>', 'g') + '<br>';
+      };
+    })(),
+    locateFile: function(path, _prefix) {
+      return path;
+    },
+    canvas: document.getElementById('canvas'),
+    mainScriptUrlOrBlob: blob
+  };
+
+  params_blob.print('testing...');
+  var url = URL.createObjectURL(blob);
+  import(/* webpackIgnore: true */ url).then((factory) => {
+    factory.default(params_blob).then((instance) => {
+      console.log('loaded by blob');
+    });
+  });
+}));
diff --git a/test/webpack_es6_with_blob/webpack.config.js b/test/webpack_es6_with_blob/webpack.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  entry: "./src/index.mjs",
+}
diff --git a/test/webpack_es6_with_url/dist/index.html b/test/webpack_es6_with_url/dist/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <hr><div id='output'></div><hr>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/test/webpack_es6_with_url/src/index.mjs b/test/webpack_es6_with_url/src/index.mjs
@@ -0,0 +1,21 @@
+var params_url = {
+  print: (function() {
+    var element = document.getElementById('output');
+    return function(text) {
+      console.log(text);
+      element.innerHTML += text.replace('\n', '<br>', 'g') + '<br>';
+    };
+  })(),
+  locateFile: function(path, prefix) {
+    return path;
+  },
+  canvas: document.getElementById('canvas'),
+  mainScriptUrlOrBlob: 'hello.mjs'
+};
+
+params_url.print('testing...');
+import(/* webpackIgnore: true */ 'hello.mjs').then((factory) => {
+  factory.default(params_url).then((instance) => {
+    console.log('loaded by url');
+  });
+});
diff --git a/test/webpack_es6_with_url/webpack.config.js b/test/webpack_es6_with_url/webpack.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  entry: "./src/index.mjs",
+}
diff --git a/test/webpack_with_blob/dist/index.html b/test/webpack_with_blob/dist/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <hr><div id='output'></div><hr>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/test/webpack_with_blob/src/index.js b/test/webpack_with_blob/src/index.js
@@ -0,0 +1,25 @@
+fetch('hello.js').then((resp) => resp.blob().then((blob) => {
+  var params_blob = {
+    print: (function() {
+      var element = document.getElementById('output');
+      return function(text) {
+        console.log(text);
+        element.innerHTML += text.replace('\n', '<br>', 'g') + '<br>';
+      };
+    })(),
+    locateFile: function(path, _prefix) {
+      return path;
+    },
+    canvas: document.getElementById('canvas'),
+    mainScriptUrlOrBlob: blob
+  };
+
+  params_blob.print("testing..");
+
+  var script = document.createElement("script");
+  script.src = URL.createObjectURL(blob);
+  script.onload = () => {
+    Module(params_blob).then((instance) => { console.log("loaded") })
+  };
+  document.body.appendChild(script);
+}))
diff --git a/test/webpack_with_blob/webpack.config.js b/test/webpack_with_blob/webpack.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  entry: "./src/index.js",
+}
diff --git a/test/webpack_with_url/dist/index.html b/test/webpack_with_url/dist/index.html
@@ -0,0 +1,6 @@
+<html>
+  <body>
+    <hr><div id='output'></div><hr>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
diff --git a/test/webpack_with_url/src/index.js b/test/webpack_with_url/src/index.js
@@ -0,0 +1,23 @@
+var params_url = {
+  print: (function() {
+    var element = document.getElementById('output');
+    return function(text) {
+      console.log(text);
+      element.innerHTML += text.replace('\n', '<br>', 'g') + '<br>';
+    };
+  })(),
+  locateFile: function(path, _prefix) {
+    return path;
+  },
+  canvas: document.getElementById('canvas'),
+  mainScriptUrlOrBlob: 'hello.js'
+};
+
+params_url.print("testing..");
+
+var script = document.createElement("script");
+script.src = params_url['mainScriptUrlOrBlob'];
+script.onload = () => {
+  Module(params_url).then((instance) => { console.log("loaded") })
+};
+document.body.appendChild(script);
diff --git a/test/webpack_with_url/webpack.config.js b/test/webpack_with_url/webpack.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  entry: "./src/index.js",
+}