Load HDRi dynamically

My code:

  document.getElementById('loadHDRiBtn').addEventListener('change', (EO) => {

           let file = EO.target.files[0]; //get a file

           const reader = new FileReader();
           const manager = new THREE.LoadingManager();

           reader.addEventListener('load',  function (event) {
                            const contents = event.target.result;
                            const loader = new RGBELoader(manager);
                            let data = loader.parse(contents);
                            const texture = new THREE.DataTexture(data.data, data.width, data.height);
                            texture.needsUpdate = true;
                            texture.mapping = THREE.EquirectangularReflectionMapping;
                            scene.background = texture;
                            scene.environment = texture;
            }, false);

AND it is an error:
WebGL: INVALID_OPERATION: texSubImage2D: type UNSIGNED_BYTE but ArrayBufferView not Uint8Array or Uint8ClampedArray

  1. Besides the WebGL shader crash - are you seeing any of the loader errors ?

  2. Without the texture-creation part, what appears in the console when you log console.info({ data }) ?

the data texture part is odd, you should be able to use the return value of rgbeloader directly.

I tried, RGBELoader has only parse method in this case