Plugin esmUrl may not work in web worker with relative paths

[cmdcolin]

Example from editing volvox config

config.json

{
  "plugins": [{ "esmUrl": "test_data/volvox/hex_plugin.js" }],
   ...
}

Editing PluginLoader to log the URL

diff --git a/packages/core/PluginLoader.ts b/packages/core/PluginLoader.ts
index 88a21bd59..2cee2ca50 100644
--- a/packages/core/PluginLoader.ts
+++ b/packages/core/PluginLoader.ts
@@ -170,6 +170,7 @@ export default class PluginLoader {
         `cannot load plugins using protocol "${parsedUrl.protocol}"`,
       )
     }
+    console.log({ parsedUrl })
     const plugin = (await this.fetchESM?.(parsedUrl.href)) as
       | LoadedPlugin
       | undefined

On the main thread, it resolves to http://localhost:3000/test_data/volvox/hex_plugin.js but on the web worker it resolves to http://localhost:3000/static/js/test_data/volvox/hex_plugin.js and produces a 404, but no error is caught and the track goes into infinite loading

[cmdcolin]

If I add some console logging, it also gives this error

"Error: Dynamic module import is disabled or not supported in this context"

diff --git a/products/jbrowse-web/src/rpc.worker.ts b/products/jbrowse-web/src/rpc.worker.ts
index 9a0ed1ff0..e93675a8c 100644
--- a/products/jbrowse-web/src/rpc.worker.ts
+++ b/products/jbrowse-web/src/rpc.worker.ts
@@ -98,6 +98,7 @@ getPluginManager()
     postMessage('ready')
   })
   .catch(error => {
+    console.error(error)
     // @ts-ignore
     self.rpcServer = new RpcServer.Server({
       ping: () => {

[cmdcolin]

note: "Dynamic module import is disabled..." may be firefox specific (you might notice a number of firefox specific bugs being reported, i've been trying it out more) but I think the 404 applies to chrome also

xref for firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1540913

[cmdcolin]

I think that the ability to resolve relative paths got messed up when we converted to webpack 5

In our webpack4/worker-loader case, the worker files were outputted to e.g.

products/jbrowse-web/public/

With this, the window.location.href and the "workerSelf.location.href" were both the public directory, so purportedly, "relative" paths could be specified at least relative to the index.html of the jbrowse-web instance.

Now, with webpack 5, the worker files are now outputted to e.g. products/jbrowse-web/public/static/js/ so that is why we get the request for e.g. the 404 at http://localhost:3000/static/js/test_data/volvox/hex_plugin.js in my original post

We might be able to supply an explicit path to resolve the plugin file relative to for the worker

IMO it may also be useful to resolve the plugin relative to the current "directory of the config.json file" but that could be an add on

If it was in the directory of the config, we could have e.g. in test_data/volvox/config.json the json "plugins":[{esmUrl:"plugin.js"}] and test_data/volvox/plugin.js

[cmdcolin]

I think that we should probably add a no-build plugin example to our volvox config so that it helps us get more treading/testing of the no-build case