Tengo varios módulos de JavaScript estructurados como se muestra a continuación:

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

es main.js, se importan lienzos y formas. en formas, se importan módulos circulares, triangulares y cuadrados. Agrego una referencia al módulo principal en mi página HTML como

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

pero tiene este error: Uncaught SyntaxError: Cannot use import statement outside a module .

¿me puedes ayudar? ¿Y no puedo agregar referencias a módulos secundarios en html? por ejemplo solo agrego:

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

en HTML y no identificar otros módulos en HTML.