Npm run build does not include useTexture urls

Questions
, , , ,
1

Hey ive been having a few problems with npm run build it seems that texture from useTextures seem to go missing after the build but work fine in test:

Screenshot 2023-09-03 at 19.10.12
Screenshot 2023-09-03 at 19.10.121920Ă—1165 258 KB

I had some earlier problems with the glb files but i fixed them by importing them directly like so:

Screenshot 2023-09-03 at 19.14.12
Screenshot 2023-09-03 at 19.14.12960Ă—170 25.5 KB

i tried to do the same with the textures but it said that they were not iterable straight after as a result is there a correct way that i can get vite build/rollup to recognise the texture and include them in the build?

At the moment heres how im importing them is there something i’m missing like something in the props or maybe the vite js config?


  function CardZf() {
    const [tex1] = useTexture(["/src/components/threeComp/img/pp3front.jpg"]);

    return (
      <mesh>
        <planeGeometry args={[12, 17]} />
        <meshStandardMaterial map={tex1} transparent={true} />
      </mesh>
    );
  }

  function CardZb() {
    const [tex1] = useTexture(["/src/components/threeComp/img/joshpx2.jpg"]);

    return (
      <mesh>
        <boxGeometry args={[12, 17, 0.1]} />
        <meshStandardMaterial
          side={BackSide}
          transparent={true}
          map={tex1}
          toneMapped={false}
        />
      </mesh>
    );
  }

  return (
    <group {...props} rotation={[0, 0, 0.4]} ref={ref}>
      <CardZf />
      <CardZb />
    </group>
  );
}

my config:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    glsl(),
    svgr(),
    Unfonts({
      custom: {
        display: "swap",
        families: {
          Glusp: {
            src: "./public/fOnt/OTF® Glusp.ttf",
          },
        },
      },
    }),
  ],
  assetsInclude: ["**/*.glb", "**/*.svg"],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
});
2

you cant url fetch from within /src. src is a virtual folder, it does not exist, your whole project is going to be crunched down into a bundle, all folders collapse. if you want to know what the bundler sees type “npm build” and look into /dist. there’s no “src/components/threeComp/img”.

static assets always go into /public, unless you import them, which is making the build tool aware of the assets, so that it includes it to dist.

1 Like
3

Thanks alot cheers this was my first real full on vite project it took a bit but i got there yh i just moved the files as suggested and changed the file path to something like this ./img/pp3front.jpg you were a huge help thank you so much :pray: :sweat_smile:

4

glad it worked! though it’s not just vite, this is every build environment under the sun. they try to optimize by collapsing folders and un-used code, a lot of code and bulk gets stripped away that way.

1 Like
5

yh im glad i know that now hopefully prepares me for the next one as the apps get denser and complex file paths will be the end of me drcmda :smiling_face_with_tear: :joy: