I have several JavaScript modules structured as shown below:

modules/
  main.js
  canvas.js
  shapes.js
  shapes/
    circle.js
    square.js
    triangle.js 

is main.js, canvas and shapes are imported. in shapes, circle,tringle, square modules are imported. I add a reference to main module in my HTML page like

<script type="module"src="./main.js"/> 

but it has this error: Uncaught SyntaxError: Cannot use import statement outside a module.

can you help me? and can i don not add reference to child modules in html? for example I just add:

<script type="module"src="./main.js"/>

in HTML and not identifying other modules in HTML.