Search code examples
snowpack

How to load HDR files using SnowpackJS


I have been trying to load HDR files in my Snowpack application(to use with THREE.js). I am able to load .jpg files, but I cannot seem to load .hdr.

I've tried using snowpack-plugin-raw-file-loader but that didn't work. I was able to import .md files and other such file types, but I wasn't able to import .hdr files in particular.

Is it even possible to do so?

My snowpack.config.mjs file

// Snowpack Configuration File
// See all supported options: https://www.snowpack.dev/reference/configuration

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    public: { url: '/'},
    js: { url: '/dist' },
  },
  plugins: [
    /* ... */
    [
      '@snowpack/plugin-webpack',
      {
        /* see "Plugin Options" below */
      },
    ],
    ["snowpack-plugin-raw-file-loader", {
      exts: [".txt", ".md", ".svg", ".hdr"], // Add file extensions saying what files should be loaded as strings in your snowpack application. Default: '.txt'
    }],
    '@snowpack/plugin-postcss',
    '@snowpack/plugin-sass'
  ],
  packageOptions: {
    /* ... */
    // source:"remote"
  },
  devOptions: {
    tailwindConfig: './tailwind.config.js',
  },
  buildOptions: {
    /* ... */
  },
};

Solution

  • In snowpack, you can only import external files if they are within the same folder as your index.js file. When you import a file, snowpack adds ./src or ./js depending on how you set up your package.json.