Using js libraries added by Libman in Razor Pages solution

Question

I'm new to Razor Pages development and I have a problem with using Three.js (added by Libman) in my project. I added Three.js using Libman (default solution config, never used libman before, but it look like packages are in right place): (https://i.stack.imgur.com/BrpG4.png)

And then included in main layout view (_Layout.cshtml):

<script src="~/lib/three/src/Three.js"></script>
<script src="~/lib/three/examples//jsm/controls/OrbitControls.js"></script>

but errors appear in F12 console:

Uncaught SyntaxError: Cannot use import statement outside a module

Errors points out to both included previously files: Three.js:1 and OrbitControl.js:1

Libman content:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "cdnjs",
      "library": "[email protected]",
      "destination": "wwwroot/lib/p5.js/"
    },
    {
      "provider": "unpkg",
      "library": "[email protected]",
      "destination": "wwwroot/lib/font-awesome/"
    },
    {
      "provider": "unpkg",
      "library": "[email protected]",
      "destination": "wwwroot/lib/three/"
    },
  ]
}

One of suggestion I found is to add type="module but that confuses me - where to add that? I dont have package.json file since I'm using Libman

Does anyone knows how to solve that?

I'm expecting to configure Razor Pages with Three.js library in the way that would allow me to use 3D graphic in one of Pages

Answer 1

You add type="module" to the script tag:

<script src="~/lib/three/src/Three.js" type="module"></script>
<script src="~/lib/three/examples//jsm/controls/OrbitControls.js" type="module"></script>