Cannot import 3rd party JavaScript module

Question

Cannot import 3rd party JavaScript module

191 views Asked by Ahimaaz At 10 September 2024 at 07:25

I'm attempting to import a 3rd party SDK into a simple project with a very simple setup. I have an index.html file that looks like this:

<!DOCTYPE html>
<html lang="en-us">
  <body>
    <h1>SDK Test</h1>
    <script type="module" src="/js/main.js"></script>
  </body>
</html>

I have a main.js file that looks like this:

import MyAlgoConnect from '/@randlabs/myalgo-connect';
console.log("It Worked!");

I also have the @randlabs directory in my project running on an Apache server, so that in Apache's htdocs directory, it looks like this:

But I always get an error in my browser console that says:

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

I originally tried using <script src="/js/main.js"></script> in the index.html file, but it returned with the error:

Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:3:1)

There's a whole bunch of different files and additional folders within the myalgo-connect folder, so when I try going to my local apache server at 127.0.0.1:8080/@randlabs/myalgo-connect in my browser it just returns an html document showing the contents of the folder, which is why I assume I'm getting an error in the first place.

According to the SDK's documentation, I think I'm following its Quick Start steps exactly: https://connect.myalgo.com/docs/getting-started/quickstart

I've been searching the internet for days trying to figure out why I can't get this to work. I've also asked a question on the associated discord server but haven't had a response. My experience with web development is very limited, so this is probably just an issue of inexperience on my part, but I cannot figure out what I'm doing wrong. If anyone can shed some light on this, I would be very grateful!