How to use mongodb charts javascript SDK with a flask app?

I currently have a flask app that runs and works fine (testing on my local machine), however I am trying to using the javascript SDK for mongodb charts and when i try to use the javascript script it just returns a Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain" in the web browser console. I have set type=”module” same error and cant seem to find any working fixes online.

I followed the documentation to set up the SDK which was to do npm install @mongodb/charts…, however, I’ve never really used javascript / npm before, and I am not sure if I have done this correctly.

So if anyone has a full guide on how to get the js SDK for mongodb charts working with a Flask/Python application or if they can spot the error, that would be great.

init.py (run from flask run)

from flask import Flask
from .main.routes import main
from .extensions import mongo
import os
from dotenv import load_dotenv, find_dotenv
load_dotenv(find_dotenv())

def create_app():
    app = Flask(__name__)
    
    # Load config from secret file (.env)
    app.config['MONGO_URI'] = os.environ.get("MONGO_URI")
    
    # Load the pymongo extension
    mongo.init_app(app)
    
    # Register blueprint
    app.register_blueprint(main)
    
    print("App created")
    return app

index.js (file giving the error)

import EmbedSDK from "@mongodb-js/charts-embed-dom";

// Generate a new SDK with base url
const sdk = new EmbedSDK({
    baseUrl = "https://charts.mongodb.com/charts-project-0-ginzr"
});

// Generate a new chart with the sdk
const chart1 = sdk.createChart({ 
    chartId: "6945269f-84ef-489a-93b2-b0c4018586cf" ,
    width: 640,
    height: 480,
    theme: "dark"
});

// Render the chart to html
chart1.render(document.getElementById("chart1"));

index.html (main page)

{% extends "layout.html" %}
{% block content %}
    <title>Home</title>

    <section id="reviews">
        <div class="review-box-container">
            <!-- Get all the data from mongodb database-->
            {% for review in reviews %}
            <div class="review-box">
                <div class="box-top">

                    <div class="profile">
                        <div class="profile-img">
                            <img src="{{ url_for('static', filename='images/Lincoln-Logo.png') }}" width="50" height="50" alt="profile">
                        </div> 
                        <div class="name-user">
                            <strong>{{ review.User }}</strong>
                            <span>Datetime</span>
                        </div>
                    </div>

                    <div class="review-content">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i> <!-- Holo star -->

                    </div>
                </div>

                <div class="review-comment">
                    <p>{{ review.Review_Summary}}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>

    <!--TO DO::-->
    <!--1. Include the mongodb charts (watch liked video)-->
    <div id="chart1" class="chart"></div>
    <script type="module" src="{{ url_for('static', filename='index.js') }}"></script>

{% endblock content %}