Can't resolve error "Texture marked for update but image is incomplete"

I am following a THREEJS tutorial and I am having an issue loading my texture. The issue occurs when I map my image and clone a material. In the tutorial everything works correctly but when I try to implement it I receive the two errors “Texture marked for update but image is incomplete” and “GL_INVALID_VALUE: Offset overflows texture dimensions.” What is the reasoning for this and how do I resolve it?

  constructor(options){
    this.container = options.domElement;
    this.width = this.container.offsetWidth;
    this.height = this.container.offsetHeight;

    this.camera = new THREE.PerspectiveCamera( 30, this.width/this.height, 10, 1000 );
    this.camera.position.z = 600;

    this.camera.fov = 2*Math.atan(( this.height/2 )/600) * 180/Math.PI;

    this.scene = new THREE.Scene();

    this.renderer = new THREE.WebGLRenderer( {
       antialias: true,
      alpha: true } );
    this.renderer.setPixelRatio(window.devicePixelRatio); //2 pretty 1 less resources
    this.container.appendChild(this.renderer.domElement);

    this.time = 0;
    this.setUpSettings();
    this.resize();
    this.addObjects();
    this.render();
    this.setupResize();
  }

  setUpSettings(){
    this.settings = {
      progress: 0
    }
    this.gui = new dat.GUI();
    this.gui.add(this.settings, "progress", 0, 1, 0.001);
  }

  resize(){
    this.width = this.container.offsetWidth;
    this.height = this.container.offsetHeight;
    this.renderer.setSize( this.width, this.height );
    this.camera.aspect = this.width/this.height;
    this.camera.updateProjectionMatrix();
  }

  setupResize(){
    window.addEventListener('resize', this.resize.bind(this));
  }

  addObjects(){
    this.geometry = new THREE.PlaneBufferGeometry(1, 1, 100, 100);
    this.material = new THREE.ShaderMaterial({
      uniforms: {
        time: { value: 1.0 },
        uProgress: { value: 0 },
        uTexture: {value: new THREE.TextureLoader().load(testTexture)},
        uTextureSize: {value: new THREE.Vector2(100, 100)},
        uCorners: {value: new THREE.Vector4(0, 0, 0, 0)},
        uResolution: { value: new THREE.Vector2(this.width,this.height) },
        uQuadSize: { value: new THREE.Vector2(300, 300)}
      },
      vertexShader: vertex,
      fragmentShader: fragment,
    })

    this.mesh = new THREE.Mesh( this.geometry, this.material );
    this.mesh.position.x = 300
    this.mesh.scale.set(300,300,1);

    this.images = [...document.querySelectorAll('.js-image')];
    this.materials = [];

    this.asscroll = new ASScroll();

    this.asscroll.enable({
        horizontalScroll: true
    })

    this.imageStore = this.images.map(img=>{
      let bounds = img.getBoundingClientRect();
      let m = this.material.clone();
      this.materials.push(m);
      let texture = new THREE.Texture(img);
      texture.needsUpdate = true;
      
      m.uniforms.uTexture.value = texture;

      let mesh = new THREE.Mesh(this.geometry, m);
      this.scene.add(mesh);
      this.mesh.scale.set(bounds.width, bounds.height, 1);
      return {
        img: img,
        mesh: mesh,
        width: bounds.width,
        height: bounds.height,
        top: bounds.top,
        left: bounds.left,        
      } 
    })
  }

  setPosition(){
      this.imageStore.forEach(o=>{
          o.mesh.position.x = 0;
          o.mesh.position.y = 0;
      })
  }

  render(){
    this.time += 0.05;
    this.material.uniforms.time.value = this.time;
    // this.material.uniforms.uProgress.value = this.settings.progress;
    this.tl.progress(this.settings.progress);
    this.mesh.rotation.x = this.time / 2000;
    this.mesh.rotation.y = this.time / 1000;
  
    this.renderer.render( this.scene, this.camera );
    requestAnimationFrame(this.render.bind(this))
  }
}

new Sketch({
  domElement: document.getElementById('container')
});

It seems this code section is the problem since you set needsUpdate = true too early. Try doing this in a load event listener of your image element.