I am getting “Uncaught SyntaxError: Cannot use import statement outside a module” although i have script type=”module” in my html file [duplicate]

I am getting “Uncaught SyntaxError: Cannot use import statement outside a module” error when i am trying to import another javascript files from my javascript & html file. I added script type=”module” in html but didnt make any other changes as these are only vanilla js files. What is wrong with my import?

Thanks in advance

My html file

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="./css/cizim.css" />
        <title>Line</title>
        
    </head>
    <body>
<table align="center" width="1200" border="0">
  <tbody>
    <tr>
      <td width="500"><div align="center"><canvas width ="400" height="400" id="canvas" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.
          
        </canvas>
    <script type="module" src="canvas.js"></script>  
          </td>
      <td><table>
          <tbody>
              <tr>
                <td><label for="fname">Başlangıç Mesneti:</label></td>
                <td>
                    <input type="radio" id="msm" name="first" value="msm" checked="checked">
                    <label for="css">Mafsallı Sabit Mesnet</label>
                    <input type="radio" id="mhm" name="first" value="mhm">
                    <label for="javascript">Mafsallı Hareketli Mesnet</label>
                    <input type="radio" id="ank" name="first" value="ank">
                    <label for="html">Ankastre Mesnet</label>
                </td>
              </tr>
                <tr>
                <td><label for="fname">Bitiş Mesneti:</label></td>
                <td>
                    <input type="radio" id="msm" name="second" value="msm" checked="checked">
                    <label for="css">Mafsallı Sabit Mesnet</label>
                    <input type="radio" id="mhm" name="second" value="mhm">
                    <label for="javascript">Mafsallı Hareketli Mesnet</label>
                    <input type="radio" id="ank" name="second" value="ank">
                    <label for="html">Ankastre Mesnet</label>
                </td>
                </td>
              </tr>
              <tr>
                <td><label for="fname">Başlangıç:</label></td>
                <td><input type="text" id="start" name="fname"></td>
              </tr>
              <tr>
                <td><label for="fname">Bitiş:</label></td>
                <td><input type="text" id="end" name="sname"></td>
              </tr>
                <tr>
                <td><label for="fname">Başlangıç Yükü:</label></td>
                <td><input type="text" id="byuk" name="sname"></td>
              </tr>
                  </tr>
                <tr>
                <td><label for="fname">Bitiş Yükü:</label></td>
                <td><input type="text" id="syuk" name="sname"></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><button id="myBtn" onclick="updateCanvas()">Hesapla</button></td>
              </tr>
          
          
          
          </tbody>
          </table>
    </td>
    </tr>
  </tbody>
</table>


        <div align="center">

            
<script src="canvas.js"></script>
        </div>
        
        
    </body>
</html>

My main .js file (canvas.js)

import Draw from "./draw.js";
import Values from "./values.js";

Other 2 js files i want to import through canvas.js

export default class Values {
  constructor() {
    this.first = document.querySelector('input[name="first"]:checked').value;
    this.second = document.querySelector('input[name="second"]:checked').value;
    this.canvas = document.getElementById("canvas");
    this.start = parseInt(document.getElementById("start").value);
    this.end = parseInt(document.getElementById("end").value);
    this.byuk = parseInt(document.getElementById("byuk").value);
    this.syuk = parseInt(document.getElementById("syuk").value);
    this.canvasWidth = canvas.width;
    this.canvasHeight = canvas.height;
    this.ctx = canvas.getContext("2d"); 
    this.canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
  }
}

export default class Draw {
  constructor(startx, starty,endX, endY,canvasData,ctx) {
    this.startx = startx;
    this.starty = starty;
    this.endX = endX;
    this.endY = endY;
    this.canvasData = canvasData;
    this.ctx = ctx;
  }
  drawMyLine(startx, starty,endX, endY){
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'red';
    ctx.moveTo(startx, starty);
    ctx.lineTo(endX,endY);
    ctx.stroke();
  }
  drawPixel (x, y, r, g, b, a) {
    var index = (x + y * canvasWidth) * 4;
    //pixelDensity(1);
    canvasData.data[index + 0] = r;
    canvasData.data[index + 1] = g;
    canvasData.data[index + 2] = b;
    canvasData.data[index + 3] = a;
  }
}