How can I use an importmap when some of the js files don't include a valid relative reference symbol(s)?

Question

I'm loading vtk.js from unpkg in a simple index.html file like so:

<html>
 <body>
  <script src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"></script>
  <script type="importmap">
    {
        "imports": {
            "vtk/": "https://unpkg.com/vtk.js/"
        }
    }
  </script>
  <script type="module">
   import 'vtk/Sources/favicon';
   import 'vtk/Sources/Rendering/Profiles/Geometry';
  </script>
 </body>
</html>

When I load this in the browser I get an error in the console:

Uncaught TypeError: Failed to resolve module specifier "vtk.js/Sources/Rendering/OpenGL/Profiles/Geometry". Relative references must start with either "/", "./", or "../".

vtk/Sources/favicon imports without issue, but vtk/Sources/Rendering/Profiles/Geometry fails.

When I look at the vtk.js source I can see the problem, Geometry isn't actually doing anything other than importing two other modules and it doesn't have an appropriate relative reference before it.

import 'vtk.js/Sources/Rendering/OpenGL/Profiles/Geometry';
import 'vtk.js/Sources/Rendering/WebGPU/Profiles/Geometry';

Since these files are not under my control I can't modify them to have the relative url prefix. Is there another option?

Note: I know I really should be actually bundling the package with my app, even vtk.js docs say so but they also seem to indicate that using unpkg is possible and may be useful for fast prototyping.

At this point I'll just install the package so I don't waste more time on it...but I'm still curious how I could get this working with the hosted vtk.js (or if it isn't possible)?

Thanks!

How can I use an importmap when some of the js files don't include a valid relative reference symbol(s)?

0 Answers0