question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Publish UMD (or IIFE) build for importScripts() use case

See original GitHub issue

I’m looking to use urlpattern-polyfill from within a service worker, loaded via importScripts().

As far as I can tell, only the unbundled ES modules for urlpattern-polyfill are published to npm, but using ES modules natively is not widely supported inside of a service worker.

Would it be possible to publish a single UMD (or IIFE) bundle to npm alongside the ES modules? That would make it possible to use importScripts() directly to pull in the polyfill from an npm CDN like https://unpkg.com/

(I’ve found https://github.com/developit/microbundle to be the easiest build tool to use for this sort of thing.)

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
jeffposnickcommented, Jun 28, 2021

I think you can simplify things further; your build just needs to be rimraf dist/ && microbundle, and you should be able to drop all the direct tsc and rollup devDependencies entirely.

But yeah, in general that should work! The code to use the polyfill from a service worker in that case would end up looking like:

if (!('URLPattern' in self)) {
  importScripts('/path/to/index.umd.js');
  self.URLPattern = urlpatternPolyfill.URLPattern;
}
0reactions
jeffposnickcommented, Jul 12, 2021

I can confirm that importScripts('https://unpkg.com/urlpattern-polyfill@1.0.0-rc1/dist/index.umd.js') works as expected when used from https://glitch.com/edit/#!/urlpattern-sw-routing?path=service-worker.js%3A6%3A0

Read more comments on GitHub >

github_iconTop Results From Across the Web

IIFE vs UMD - SyntaxSuccess
In the following post I will compare immediately-invoked function expressions (IIFE) to Universal Module Definition (UMD) bundles.
Read more >
Use iife for browser and cjs for node · Issue #470 - GitHub
In this issue I want to show you why the UMD is not working in its current state (466), why we will first...
Read more >
ES modules in service workers - web.dev
The ideal use case for ES modules inside of service workers is for ... in IIFE or UMD formats, you can import them...
Read more >
What Are CJS, AMD, UMD, ESM, System, and IIFE?
require() is a function that can be used to import symbols to the current scope from another module. module.exports is an object that...
Read more >
Typescript: execute IIFE from UMD module that imports ...
Turns out you need to use requirejs in order to execute a typescript-generated UMD module: <!DOCTYPE HTML> <html> <head> <title>Test</title> ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found