TypeError: “domElement” is read-only | THREE.WebGLRenderer

I’m getting an error when trying to initialize WebGLRenderer:
(I removed some unnecessary lines)

import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module.js";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js";


async function load() {
    // THREE JS
    window.scene = new THREE.Scene();
    window.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // Loader
    window.loader = new GLTFLoader();
    window.loader.load(
        "/assets/shotgun/scene.gltf",
        function (gltf) {
            const model = gltf.scene;
            scene.add(model);
            window.shotgun = model;
        },
        function (xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        function (error) {
            console.error(error);
        }
    );

    // Renderer   Getting error here
    window.renderer = THREE.WebGLRenderer({
        canvas: document.getElementById("shotgun"),
        antialias: true,
        alpha: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    camera.position.set( 10, 0, 0 );

    // Light
    var light = new THREE.PointLight(0xffffff);
    light.position.set(-5, 10, 10);
    scene.add(light);

    // Help
    window.ctrl = new OrbitControls(camera, renderer.domElement);
    scene.add(new THREE.PointLightHelper(light), new THREE.GridHelper(200, 50));

}

load().then(() => {
    document.getElementById("loading").animate({ opacity: 0 }, { fill: "forwards", duration: 1000 });
    render();
});

DevTools say that error occurs in this line:

function WebGLRenderer(parameters) {
  parameters = parameters || {};
  const _canvas2 = parameters.canvas !== void 0 ? parameters.canvas : createCanvasElement() // ...
  let currentRenderList = null;
  let currentRenderState = null;
  const renderListStack = [];
  const renderStateStack = [];
  this.domElement = _canvas2; // <----
  this.debug = {
    checkShaderErrors: true
  };
  this.autoClear = true;
  this.autoClearColor = true;
  this.autoClearDepth = true;
  ...
}

error in console

Also, how can I pause code execution while the model is loading? (Without putting it into loader’s function)

It looks like your post is mostly code; please add some more details.
Like what else can I add?