How to add an external library to a C# azure functions application?

Adwait Naik 40

Hi there,

I am trying to use a JavaScript based library in my azure functions application. I copied the file in the root directory of the app and deployed it successfully on Azure but the moment I reference it in the Index.html file, it throws this error.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

This is the javascript library (urdf-loaders) I am trying to use in the Index.html file. Please find the code snippet below for your reference.

LeelaRajeshSayana-MSFT 13,781 Reputation points

2024-05-07T02:21:50.9466667+00:00

Hi @Adwait Naik Can you please reshare the JavaScript code snippet you are trying to test with? The error indicates one of the script references of the js files is not pointed to the correct file.

May I also know your observation on using the urdf-loaders in your local instance without downloading the entire repository? Seems like testing the even simple.html file has a lot of js dependency files. I stumbled on the same error when trying to test the file and noticed that by changing the import statement pointing from three to ../node_modules/three/src/Three.js has helped overcome this error. But I see there are many places where this reference has been made internally. I am trying to understand if you are successful in customizing the repository sample on your local machine and test it without any issues.

Adwait Naik 40

Hi @LeelaRajeshSayana-MSFT

Please find the JS code snippet below. I am using this code inside my index.html file.

No, running urdf-loaders locally gives a lot of errors without the repository. Most of the errors are related to the JS dependencies.

<script type="importmap">
                { "imports": {
                    "urdf-loader":  "https://cdn.jsdelivr.net/npm/urdf-loader@0.12.1/umd/URDFLoader.js",
                    "three": "https://unpkg.com/three@0.150.1/build/three.module.js",
    				"three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
                } }
              </script>
    
    <script type="module">

        import 'urdf-loader';
        import { STLLoader } from 'three/addons/loaders/STLLoader';
        import { WebGLRenderer, Mesh, MathUtils, Bone, Vector3 } from 'three';

        AFRAME.registerComponent('load-panda-urdf', {
            init: function () {
                const manager = new THREE.LoadingManager();
                const loader = new URDFLoader(manager);
                const URDF_FILE_PATH = '../content/assets/franka_panda/panda_arm_hand.urdf'
                let robot;
                loader.load(URDF_FILE_PATH, (result) => {
                    robot = result;
                    // The robot is loaded!
                    this.el.sceneEl.object3D.add(robot);
                });
            },
        })

    </script>

LeelaRajeshSayana-MSFT 13,781 Reputation points

2024-05-10T14:01:23.3766667+00:00

Hi @Adwait Naik I see that you are trying to refer the STLLoader by referring to three/addons/loaders/STLLoader Instead, provide the .js extension at the end of the file path like you did for urdf-loader. Here is what your import statement should look like - import { STLLoader } from 'three/addons/loaders/STLLoader.js'

You might still see this error is there are any references like this in embedded js files you are using such as WebGLRenderer, Mesh, MathUtils, Bone, Vector3.

Share via

How to add an external library to a C# azure functions application?