CODEWITHSUNDEEP
javascripthtml
Default
Default

Reputation: 25

How to import variable from another html file? (I use import/export, but error occurs)

//test_1.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>DB Test</title>
</head>
<body>
    <script type="module">
        var num = 1;
        console.log(num)

        export {num}
    </script>
</body>
</html>

//test_2.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>DB Test</title>
</head>
<body>
    <script type="module">
        import {num} from './test_1.html'
        console.log(num)
    </script>
</body>
</html>

I want to use variable named num in test_1.html and test_2.html, but when I open test_2.html, error like 'test_1.html:1
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.' occurs and console.log(num) at test_2.html doesn't work properly. How can I import/export properly?

Upvotes: 0

Views: 352

Answers (1)

duckdotexe
duckdotexe

Reputation: 61

You can't import from an HTML file in this manner.

Is it possible for you to move the modules into separate JS files such as test_1.js and test_2.js then have test_2.js import from test_1.js instead?

EDIT

Like this:

<!-- test_1.html -->

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />

        <title>DB Test</title>
    </head>
    <body>
        <script type="module" src="/test_1.js"></script>
    </body>
</html>

// test_1.js
var num = 1;

console.log(num);

export { num };

<!-- test_2.html -->

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        
        <title>DB Test</title>
    </head>
    <body>
        <script type="module" src="/test_2.js"></script>
    </body>
</html>

// test_2.js
import { num } from "./test_1.js";

console.log(num);

Upvotes: 1

Related Questions