Как импортировать в gl-матрицу main.js с помощью npm и исправить эту неожиданную ошибку токена?

Question

Мне нужно использовать gl-matrix в фиктивном эксперименте с webGL, и у меня возникают некоторые проблемы, когда я пытаюсь импортировать некоторые утилиты, такие как mat4.Я использую npm, поэтому я запустил npm i gl-matrix, чтобы я мог использовать gl-matrix таким образом прямо в моем main.js, консоль браузера выдает неожиданную ошибку токена."Uncaught SyntaxError: неожиданный токен {"

, что я пытался:

import {mat4} from 'gl-matrix';
    import mat4 from 'gl-matrix';
    import { create, translate } from 'gl-matrix';

это мой код ...

    import { create, translate } from 'gl-matrix';

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

if(!gl){
    throw new Error('EL NAVEGADOR NO SOPORTA WEBGL')
}

console.log('0K');

 const matrix = create();
 translate(matrix, matrix, [2, 5, 1]);
 translate(matrix, matrix, [-1, -3, 0]);

 const vertexData = [
     0, 1, 0,
     1,-1, 0,
    -1,-1, 0 
 ];

  const colorData = [
      1, 0, 0,
      0, 1, 0,
      0, 0, 1
  ];

 const positionBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), 
 gl.STATIC_DRAW);

 const colorBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorData), 
 gl.STATIC_DRAW);

 const vertexShader = gl.createShader(gl.VERTEX_SHADER);

 gl.shaderSource(vertexShader,`
    precision mediump float;

    attribute vec3 position;
    attribute vec3 color;
    varying vec3 vColor;

    uniform mat4 matrix;

    void main(){
        vColor = color;
        gl_Position = matrix * vec4(position, 1); 
    }
    `);

    gl.compileShader(vertexShader);

    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, `
        precision mediump float;

        varying vec3 vColor;

        void main() {
            gl_FragColor = vec4(vColor, 1);
        }
    `);

    gl.compileShader(fragmentShader);

    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program,fragmentShader);
    gl.linkProgram(program);

    const positionLocation = gl.getAttribLocation(program,`position`)
    gl.enableVertexAttribArray(positionLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);

    const colorLocation = gl.getAttribLocation(program,`color`)
    gl.enableVertexAttribArray(colorLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0);


    gl.useProgram(program);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

это мой package.json

    {
     "name": "proyecto",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
     },
      "author": "",
      "license": "ISC",
      "dependencies": {
      "express": "^4.16.4",
      "gl-matrix": "^3.0.0"
     },
      "devDependencies": {
      "@types/gl-matrix": "^2.4.5"
     }
    }

и моя папка выглядит примерно так:

  project:|
          |-.vscode:|
                    |-launch.json
          |-node_modules
          |-public:|
                   |-index.html
                   |-main.js
          |-package.json  
          |-package-lock.json
          |-server.js

launch.json выглядит так:

       {
        linkid=830387
        "version": "0.2.0",
        "configurations": [


       {
          "type": "node",
          "request": "attach",
          "name": "Attach",
          "port": 9229
       },
       {
         "type": "node",
         "request": "launch",
         "name": "Launch Program",
         "program": "${workspaceFolder}\\main.js"
       }
      ]
     }

vsCode для распознавания функций создания и переводакогда я наводю на них указатель мыши ... все прекрасно работает в vsCode, но в браузере есть другая история ... так что ... я ожидаю использовать gl-matrix, как и другую библиотеку js с npm ..