Resolving Environment Preset Loading Error in React Three Fiber

Recently I got this error on a project using Three Fiber Js which was working perfectly fine before.

After reading these discussions:

• stackoverflow/questions/77057501
• github/issues/1492

The problem is occurring because it cannot find the preset used in the <Environment> component.

It seems like there are two solutions:

1. Update Three Fiber JS to version 9.70.4 or above
   npm install @react-three/drei@^9.70.4

2. For a more resilient approach, store the environment map locally:

• Identify the HDR file name from the error message (e.g., 'dikhololo_night_1k.hdr' for preset='night')
• Download the HDR file from free resources website.
• Place the file in your project's public directory at /public/hdri/
• Update your Environment component to reference the local file:

<Environment files="/hdri/your_file.hdr">
...
</Environment>

This local file approach prevents future loading issues and gives you more control over the environment map used in your scene.

You can check the source code here: code file

Hope it helped anyone!