I am developing this solely frontend app using react, bun, vite and typescript. This app uses react-router-dom and is composed of routes. Every route corresponds to an era and in every route there is a bunch of cards (each card corresponds to a style). Each card contains a carousel that displays some pictures. I have all the pictures inside the assets folder. The approach I used to import the corresponding pictures to every page is by creating a styles.ts file which implements a function that uses import.meta.glob to get the pictures urls, and inside the same file I use the function to get the urls of every style. And I end up having an array corresponding to every route. Each array contains multiple objects (styles of the same era) and every object has a property "gallery" which is an array of urls that I get through the function I mentioned before.

By the way, the pictures are inside the assets folder and here is the function:

const getStyleImages = (folder: 'classic' | 'modern', styleIndex: number) => {
    const prefix = (styleIndex + 1).toString()
    const images = import.meta.glob('/src/assets/**/*.{png,jpg,jpeg,gif,webp}', {
      eager: true,
      as: 'url'
    })
    
    return Object.values(images).filter(path => 
      path.includes(`/${folder}/`) && 
      path.split('/').pop()?.startsWith(prefix)
    )
  } 

The problem I am facing is that when I run the project in development (running "bun run dev"), the pictures appear, but once I build the project (bun run build) and I wanna test the project in preview or I even deploy it, the pictures aren't loaded and I don't know if the problem is in how Vite handles assets or the function.

I tried making the function async, played with the paths etc, but it doesn't seem to work.

I am developing this solely frontend app using react, bun, vite and typescript. This app uses react-router-dom and is composed of routes. Every route corresponds to an era and in every route there is a bunch of cards (each card corresponds to a style). Each card contains a carousel that displays some pictures. I have all the pictures inside the assets folder. The approach I used to import the corresponding pictures to every page is by creating a styles.ts file which implements a function that uses import.meta.glob to get the pictures urls, and inside the same file I use the function to get the urls of every style. And I end up having an array corresponding to every route. Each array contains multiple objects (styles of the same era) and every object has a property "gallery" which is an array of urls that I get through the function I mentioned before.

By the way, the pictures are inside the assets folder and here is the function:

const getStyleImages = (folder: 'classic' | 'modern', styleIndex: number) => {
    const prefix = (styleIndex + 1).toString()
    const images = import.meta.glob('/src/assets/**/*.{png,jpg,jpeg,gif,webp}', {
      eager: true,
      as: 'url'
    })
    
    return Object.values(images).filter(path => 
      path.includes(`/${folder}/`) && 
      path.split('/').pop()?.startsWith(prefix)
    )
  } 

The problem I am facing is that when I run the project in development (running "bun run dev"), the pictures appear, but once I build the project (bun run build) and I wanna test the project in preview or I even deploy it, the pictures aren't loaded and I don't know if the problem is in how Vite handles assets or the function.

I tried making the function async, played with the paths etc, but it doesn't seem to work.

• reactjs
• typescript
• vite
• bun

• 1 Please, can you add more information like possible errors you are facing? or when you say "It doesn't seem to work" it means you also don't receive any messages anywhere? – Daniel Aragão Commented Jan 31 at 19:21
• I have never played with Bun, but usually relative routes starting with "/" like this are wrong because you will point to your OS root folder – Daniel Aragão Commented Jan 31 at 19:24

1 Answer 1

You might wanna check if you are already usinb Bun v.1.1.43

https://bun.sh/blog/bun-v1.1.43#html-bundler