Webpack Bundle

[sbwrege2z]

I have a very simple application available at https://github.com/sbwrege2z/webpack-test.

Here's the code for the main application:

const UrlPattern = require('url-pattern');
const serviceWorkerRouter = require('service-worker-router');

const router = new serviceWorkerRouter.Router();

// THIS METHOD OF ROUTING DOES NOT CAUSE A PROBLEM:
router.get('/api/*', null);

// CAUSES BUNDLE TO BREAK:
router.get(new UrlPattern(/^\/api\/(.*)$/), null);

console.log('Hello world!');

When you run this file with "node src/index.js" you get the expected "Hello world!" output.

When you run the Webpack created bundle with "node dist/bundle.js" you get the error:

TypeError: argument must be a regex or a string

If you comment out the line with the "new UrlPattern(...)" the bundle will run without any issues. Something with the regex method of defining the url pattern is causing this to break.

I suspected this might be a problem with the url-pattern module, but I have another index2.js file in the repository that has no references to the service-worker-router module, and the b.bundle.js created from that works fine. As far as I can tell, the service-worker-router uses the same version of url-pattern that my project does --- 1.0.3

I am very new to Webpack, so I'm hoping that there is some simple configuration options that will make this work. I have to use webpack since I am uploading this service worker to cloudflare.

[sbwrege2z]

As far as I can tell, defining a route with a UrlPattern instead of a string breaks the program if bundled with Webpack. The UrlPattern can be created with a regex or a string.

[sbwrege2z]

I know what is causing the problem. I just haven't come up with a solution yet.

The UrlPattern constructor expects a string or RegEx as the first argument.

The Router get method expects the first argument to be a string or a URLPattern. If the first argument is NOT an instanceof UrlPattern, it creates a new UrlPattern with the first argument. I'm sure the assumption is that it's a string or RegEx, but no check is made.

During minification something happens to that the Router does not recognize the first parameter passed to the get method as a UrlPattern, so it tries to create a new UrlPattern with the first argument (which is a UrlPattern). Since the first argument to the UrlPattern constructor is neither a string or a RegEx, an error is thrown.

[sbwrege2z]

Changing my require solved the problem:

const UrlPattern = require('service-worker-router').UrlPattern;