Npm run build gives parse error for every .hdr and .exr file

Questions
,
1

Hello!

I am getting an error from my .hdr files every time I enter the command npm run build:
[vite:build-import-analysis] Parse error @:53:87
file: /public/presets_library/background_presets/netball_court_2k.hdr:53:86

Is there a way to get around this? So far, the only way to finally get the command to work is to delete all the .hdr/.exr files. I don’t know if this helps, but I got them from Polyhaven. I tried switching to .exr files, but those produce the same error. Should I try hosting these files on Cloudflare instead?

Thank you!

2

Why are you trying to import the asset files in JS?

You can put them directly in /public folder, and load them using loaders as if they were in the root dir- ex. new HDRLoader(‘my-hdr.hdr’)

3

I don’t understand what you are referring to when you mention importing the asset files in JS, I am only trying to deploy my project. When I go to build my project using npm run build, the terminal says that it can’t parse some line of code within the actual hdr file. The hdr files are already located in the public folder.

4

@Cube_3js maybe take a look at this topic which is actually listed below as a Related Topic.

It does have a link to the vite documentation which might help.

5

If that’d be the case (ie. if there’d be no direct import of the HDR/EXR files in your code) vite build wouldn’t even be aware of them, just copying anything from public dir directly.

Make sure there’s no import something from “./file.hdr” and no require("./file.hdr") anywhere in your JS. Vite can’t import these files out of the box, since they are binary.

1 Like
6

The problem is, I need these files. How can I use them if they can’t be imported? I thought the files themselves were the problem because they could not be parsed when the project was being built. I had assumed that the importing of these files was not relevant to what the error messages showed me. If this helps, I used import.meta.glob to do it, which is found in the Vite documentation.

Here is an example of what I have in my code:

const imagePresetFiles = import.meta.glob('/public/presets_library/background_presets/*.exr');

Also why would the files being binary stop Vite from doing that?

7

As explained in the first reply - put them in public/ directory, that’s all.

project ->
  -> node_modules
    -> three/...
  -> src
    -> main.js
  -> public
    -> textures
      -> env.hdr

Plus:

import { RGBELoader } from 'three/.../loaders/RGBELoader.js';

const loader = new RGBELoader();
loader.load('./textures/env.hdr', texture => {
  scene.environment = texture;
});
1 Like
8

/public does not exist … eventually at least, it is just a helper for static files, which get copied into /dist. if you build and look into /dist you will notice that there is no /public folder in it. you can’t import from a folder that doesn’t exist. import is for javascript and resources inside /src. files that you threw into /public are fetched, not imported. say you have /public/foo.glb → new GLTFLoader().load("/foo.glb") will refer to the file that is later inside /dist.

say you do import a resource, for instance /src/foo.glb → import foo from './foo.glb'. this is fine, and it will work, IF the bundler either knows how to treat *.glb through a loader, or it has a fallback to url-loader for unknown extensions. the bundler will copy that file into /dist and give it a hashed filename, foo will just be a url string and it will still browser-fetch.

1 Like