Not able to import JavaScript file error into html

Question

I have index.html file where I have html head body tags and I have constant.js file from which I want to use a constant. how to define that constant in constant.js and how to use it in index.html and where to place the import statement.

When I include with this in the head section of HTML

<script type="module" src="../home/constants.js"></script>

constants.js file contains only this

const surl = "http://localhost:8000/"

I got this error in browser

Loading module from “http://localhost:8000/constants.js” was blocked because of a disallowed MIME type (“text/html”)

Also I am not able to use the the sdata_url

Uncaught ReferenceError: sdata_url is not defined

here is my html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title >CandleCharts</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/stocktools/gui.css">
    <link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/annotations/popup.css">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"></script>

    <!-- my modules -->

    <script type="module" src="../home/constants.js"></script>
</head>

<body>
<div id="top_bar">


</div>

<div id="container" style="height: 700px; min-width: 310px" class="chart"></div>


<script type="text/javascript">
    console.log(sdata_url)
    

</script>
</body>
</html>

Does this answer your question? [How to use code from script with type=module](https://stackoverflow.com/questions/49338193/how-to-use-code-from-script-with-type-module) — ihor.eth, Jul 07 '20 at 15:44
Either your URL is wrong and your server is broken by not returning a 404 error, or your server is broken and is serving the JS up with the wrong MIME type. Either way, its a server problem and you've no shown us your server-side code / configuration. — Quentin, Jul 07 '20 at 15:53
Aside: `var` variables in modules are scoped to the module so you can't access them as a global from another script anyway. — Quentin, Jul 07 '20 at 15:54

score 0 · Accepted Answer · answered Jul 09 '20 at 04:14

0

<script type="module" >

    import {sdata_url} from "../js/constants.js";

    console.log(sdata_url);
</script>

In the above way I was able to use the sdata_url

answered Jul 09 '20 at 04:14

vishal

855
1
8
16

Not able to import JavaScript file error into html

1 Answers1