Uncaught SyntaxError: Cannot use import statement outside a module - Javascript

Question

i am facing a problem with imports in js for about 6 days now. I just can't solve that problem. I have a simple flask app written in python and a little bit of js code running on the client. I have two js files and i want to import a variable from the first in the second script. I don't know whats the problem, i tried it with several combinations but it just wont run.

first.js:

// Local Config
let ADD_SONG_URL = "TEST";
export {ADD_SONG_URL};

second.js:

import {ADD_SONG_URL} from "./first.js";
console.log(ADD_SONG_URL);

file.html:

<script type="module" src="/static/js/first.js"></script>
<script type="text/javascript" src="/static/js/second.js"></script>

In Intellij everything looks fine, but in the browser i am getting Uncaught SyntaxError: Cannot use import statement outside a module. I am relatively new to frontend programming so i'm desperate because i can't fix this problem. I hope anyone have a quick answer and thats not a big thing.

Thanks in advance!

Answer 1

Try changing your script type from text/javascript to module. I think it should work.

<script type="module" src="/static/js/first.js"></script>
<script type="module" src="/static/js/second.js"></script>