bug: WebWorker doesn't work when stencil component library imported to nextjs app

[jeski-bright]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.13.0

Current Behavior

When trying to use a component which implements a method delegated to a web worker I get a Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The URL '/_next/static/media/<file_name>.js' is invalid. exception.

Expected Behavior

The web worker starts properly & can communicate with the component.

Steps to Reproduce

1. Clone the reproduction repo
2. Run yarn install
3. Run yarn build
4. Run yarn dev
5. Go to localhost:3000 and check the console output.

Code Reproduction URL

https://github.com/jeski-bright/stencil-next-example

Additional Information

This is similar to #2731, however here it almost works, with webpack5 there is no bug with import.meta.url only the parsed url.href is incorrect.

[alicewriteswrongs]

hi @jeski-bright, thanks for filing this issue (and for opening a related PR!). I was able to confirm that the error is happening in your reproduction - thanks for providing that with detailed instructions for use!

I'm going to mark this for ingestion into our backlog and the Stencil team will prioritize root-causing and dealing with the issue.

Thanks again for reporting!