SyntaxError: Cannot use import statement outside a module

[scr6w]

Body

Basically I have an html and two js files and from this html file I call one of these js files:
<script src="script.js"></script>
in script.js I import a hello world function from another file but for some reason the error comes out:
Cannot use import statement outside a module
script.js:

import { sayHelloWorld } from './hello.js';
sayHelloWorld();

hello.js:

const sayHelloWorld = () => {
    console.log('Hello World');
    };
export { sayHelloWorld };

Directory:

Help!!!!

Guidelines

• I have read and understood this category's guidelines before making this post.

[luiisp]

This problem is caused by the fact that JavaScript modules require a specific way to be loaded into HTML files. To use import and export statements, you need to ensure that your script is treated as a module. You can do this by adding the type="module" attribute to your <script> tag in the HTML file.

So when importing the script into HTML it would look like this👍:
<script type="module" src="script.js"></script>

Result:

It even seems like this has already been discussed here on the github community

[PPQAQ]

Can i ask a question? i used type="module",but it cannot import png,audio or css,do you know how to solve it? appreciate you！

[luiisp]

I had never come across this, but I managed to reproduce the error

(let me know if what you did to receive the error was different)

From what I understand, you try to import an image within a script that has type="module"
import { z } from "./z.jpg" // try import a jpg image
but unfortunately this cannot be done because the import is reserved for only js scripts and not other files

so the image must be imported in other ways, I will leave a solution below

const img = new Image()
img.src = "./z.jpg" // here we can use the image however we want