javascripthtmlimportmime-typesalgorand

Cannot import 3rd party JavaScript module

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:

enter image description here

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!

Solution

  • I recommend to setup basic node processor which then compiles application into js file.

    https://vuejs.org/guide/quick-start.html

    https://reactjs.org/docs/create-a-new-react-app.html

    https://nextjs.org/docs/getting-started

    I recommend also to setup the TypeScript as it helps a lot with data types and recommendations.

    This is example how you can use the MyAlgoConnect by Randlabs (React): https://github.com/Diatomix/Diatomix-frontend/blob/dff9a531ceac4341a3780c004f2bc2206b255ed4/src/components/Authenticate.tsx#L163

    Example how to use Algorand with Vue.js : https://github.com/scholtz/wallet