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

Question

//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?

You cannot import from an html file developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — mplungjan
– mplungjan, Commented Aug 15, 2022 at 17:50

duckdotexe · Accepted Answer · 2022-08-15 21:19:20Z

1

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);

edited Aug 15, 2022 at 21:19

answered Aug 15, 2022 at 17:55

duckdotexe

613 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related