I am trying to a export a JavaScript function, bundle it with rollup.js (https://rollupjs.org/guide/en/) and then use this function in my django template. But I am getting the following error:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

I am doing this:

import {
    AmbientLight,
    AxesHelper,
    DirectionalLight,
    GridHelper,
    PerspectiveCamera,
    Scene,
    WebGLRenderer,
} from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import {IFCLoader} from "web-ifc-three/IFCLoader";

function test() {
//Here I am executing code using modules from three
}

export {test}

Then in my template:

<script type="module"
          src="{% static "src/outputs/bundle.js" %}"></script>
  <script type="module">
    import {test} from "../../../../static/src/inputs/index.js";

    test()
  </script>

Now here is the interesting part:

• When I do the same process with a small function that is not using the three.js imports it works perfectly fine
• When I am using the three.js imports bit I am not wrapping my code into a function, it also works perfectly fine

But as soon as I use a function with a three.js module I get:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

So the problem is somehow importing the three.js modules and then using a function where the three.js modules are being used. But I want to export a function to make my code reusable and use the function with arguments in multiple templates. Any idea how I could solve this?

I read many questions on SO on this error, but no one seems to addressing the problem that the import fails when using the modules within a function.

Thanks for any help, very much appreciated.