GLB/GLTF File Loading with Storybook and Webpack with file-loader

Question

I have a component library I am creating with Storybook that needs access to .glb/.gltf files. Based on research, it seemed like the best thing to do here was to use the file-loader Webpack functionality, and augment the storybook main.js as such:

// .storybook/main.js
module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.(glb|gltf)$/,
      use: ['file-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};

Then, in my jsx file that references the mesh:

// src/components/MeshLoader.jsx
import MyMeshFile from "./meshes/MyMesh.glb";
import { useGLTF } from "@react-three/drei";

export default function Model(props) {
  const group = useRef();
  const { nodes, materials } = useGLTF(MyMeshFile);
  // Do more stuff with these things
}

When I run compile, everything works, and if I log what MyMeshFile is, I get a path like: static/media/MyMesh.976a5ad2.glb, as expected.

However, the rest breaks with an error Uncaught Unexpected token e in JSON at position 0, basically on account of the useGLTF function failing at the contents of that file.

It turns out that http://localhost:6006/static/media/MyMesh.976a5ad2.glb is actually a file with the contents of

export default __webpack_public_path__ + "178cb3da7737741d81a5d4f0c2bcc161.glb";

So it seems like there is some redirection happening. If I direct the browser at http://localhost:6006/178cb3da7737741d81a5d4f0c2bcc161.glb, I get the file I want.

My first question, is whether this is the expected behavior here, given the way I have things set up. If so, it seems like I would have to parse the contents of the file path given by Webpack, and use that to get the actual path. That seems to be a bit convoluted, so is there a better way of handling this?

Thanks for the help!

UPDATE:

I have tested with the gltf-webpack-loader loader, by adding the following to the .storybook/main.js file:

...
config.module.rules.push({
      test: /\.(gltf)$/, // Removed gltf from file-loader
      use: [{loader: "gltf-webpack-loader"}]
    })
...

And tried the same thing with a gltf file. I get the same behavior of receiving the "redirect" file instead of the actual one I want.

Answer 1

So it turns out that there is currently a bug with "@storybook/preset-create-react-app" that is causing this issue. Removing that add-on seems to resolve the issue described here, although it does produce a warning that:

Storybook support for Create React App is now a separate preset.
WARN To use the new preset, install `@storybook/preset-create-react-app` and add it to the list of `addons` in your `.storybook/main.js` config file.
WARN The built-in preset has been disabled in Storybook 6.0.