RGBELoader and HDRCubeTextureLoader RGBELoader Bad File Format: bad initial token on REACT

Description of the problem

Hi, I got very strange issue that only appears on react framework when i want to load HDR. Here is link to codesandbox: https://codesandbox.io/s/proud-currying-qr53r

I basesed of example from https://threejs.org/examples/?q=gltf#webgl_loader_gltf, but every time i’m getting this error:

RGBELoader Bad File Format: bad initial token

log.js:24 [HMR] Waiting for update signal from WDS... index.js:1 RGBELoader Bad File Format: bad initial token console.<computed> @ index.js:1 rgbe_error @ RGBELoader.js:55 RGBE_ReadHeader @ RGBELoader.js:152 parse @ RGBELoader.js:413 (anonymous) @ three.module.js:36315 (anonymous) @ three.module.js:35990 load (async) load @ three.module.js:35968 load @ three.module.js:36313 load @ RGBELoader.js:535 Three_initial.sceneSetup @ three_test.js:29 componentDidMount @ three_test.js:9 commitLifeCycles @ react-dom.development.js:22101 commitLayoutEffects @ react-dom.development.js:25344 callCallback @ react-dom.development.js:336 invokeGuardedCallbackDev @ react-dom.development.js:385 invokeGuardedCallback @ react-dom.development.js:440 commitRootImpl @ react-dom.development.js:25082 unstable_runWithPriority @ scheduler.development.js:697 runWithPriority$2 @ react-dom.development.js:12149 commitRoot @ react-dom.development.js:24922 finishSyncRender @ react-dom.development.js:24329 performSyncWorkOnRoot @ react-dom.development.js:24307 scheduleUpdateOnFiber @ react-dom.development.js:23698 updateContainer @ react-dom.development.js:27103 (anonymous) @ react-dom.development.js:27528 unbatchedUpdates @ react-dom.development.js:24433 legacyRenderSubtreeIntoContainer @ react-dom.development.js:27527 render @ react-dom.development.js:27608 ./src/index.js @ index.js:7 __webpack_require__ @ bootstrap:785 fn @ bootstrap:150 1 @ serviceWorker.js:141 __webpack_require__ @ bootstrap:785 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.chunk.js:1 webpackHotDevClient.js:138 ./src/pages/App.js Line 5:8: 'ThreeInitial' is defined but never used no-unused-vars printWarnings @ webpackHotDevClient.js:138 handleWarnings @ webpackHotDevClient.js:143 push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210

Without React framework with vanilla JS its work’s fine. I tested HDR loading also with this example https://threejs.org/examples/?q=hdr#webgl_materials_envmaps_hdr, but resault same RGBELoader Bad File Format: bad initial token

I lost 2 days trying to fix this in a lot of different approaches (including changing path) so i decided to post this as an issue.

Does anyone have any idea how to prevent this?

Three.js version

• [x ] Dev
• r113
• …

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

[mrdoob]

import HdrFile from "texutes/royal_esplanade_1k.hdr";

That works? 🤔

[jamint]

Using this method, how do you change the exposure?