OK cool, that makes sense then. On another project I'm working on which also Vite, in my app.jsx file, I have this right at the top:

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

Is this anything to do with image handling and how does it relate?

Hi,

I'm currently mid way through the React From Scratch series - https://laracasts.com/series/react-from-scratch

I'm using my knowledge for a bit of challenge project and have hit a bit of an issue which is probably me doing something stupid but maybe you can help!

The file layout of my project looks like this:

https://ibb.co/Rk59dGZV

I have a header component with a simple SVG logo in it, basically this:

import {Link, useLocation} from "react-router";

export function Header() {
    const location = useLocation();
    return (
        <header className={`banner bg-mts-light-grey flex justify-center ${location.pathname==="/"?'shadow-xl':''}`}>
            <Link to={"/"}><img src="src/images/template_icons/The_Wheel_Hub.svg" alt="The Wheel Hub logo" className={"w-[85px] my-2"} /></Link>
        </header>
    )
}

As you can see the image src path relative to the content root is src/image/template_icons/The_Wheel_Hub.svg - this works during dev on http://localhost:5173/ however when I build and deploy the image is missing! Obviously this source path doesn't exist because the images folder has not been included in the build (I think).

I looked at the Vite documentation on handling static assets here https://vite.dev/guide/assets and I didn't really get it. However, I tried importing the asset as a URL by changing the header component to:

import {Link, useLocation} from "react-router";
import logoURL from "../images/template_icons/The_Wheel_Hub.svg";

export function Header() {
    const location = useLocation();
    return (
        <header className={`banner bg-mts-light-grey flex justify-center ${location.pathname==="/"?'shadow-xl':''}`}>
            <Link to={"/"}><img src={logoURL} alt="The Wheel Hub logo" className={"w-[85px] my-2"} /></Link>
        </header>
    )
}

When I build this time, the logo is there. But on inspection, it's inlined the image rather than including it in the dist folder - https://ibb.co/NdpDCk1k

Is this normal? What if I don't want to import the image in every component and keep them as seperate assets - how do I configure Vite to do this?

Thanks in advance

@ritchie same issue here after updating all my packages.

Getting this:

Oops! Something went wrong! :(

ESLint: 9.39.2

A config object is using the "extends" key, which is not supported in flat config system.

Instead of "extends", you can include config objects that you'd like to extend from directly in the flat config array.

If you're using "extends" in your config file, please see the following:
https://eslint.org/docs/latest/use/configure/migration-guide#predefined-and-shareable-configs

If you're not using "extends" directly (it may be coming from a plugin), please see the following:
https://eslint.org/docs/latest/use/configure/migration-guide#using-eslintrc-configs-in-flat-config

But don't really know how to fix, so I've just removed the extends bit from the config file.

Hi all,

I'm pretty new to React and have hit a wall with something I'm trying to build, can anyone help?

I've mocked up what I'm trying to do here - https://codesandbox.io/p/sandbox/blazing-firefly-vvfsrf

The app will (eventually) display products in groups of x set by the PAGE_SIZE constant in Wheels.tsx.

App.js sets up 4 different sort orders for the products, default, price high to low, price low to high and popularity in the WheelIdsSortOrder constant. There's a constant for filters in there too, but not currently using that.

This all works in that it loads Ids in pages of 12, then when a new sort order is selected it changes the order and resets the page to 1.

Now, what I need to do is load the data for the Ids that are being loaded, so the Product name, Image, permalink and various other things - this will be via an Ajax request. What I must avoid though is loading the data for ALL of the Ids again and again, I only want to load the next page without refreshing the previously loaded ones.

As I say, I'm pretty new with React so I may be completely wrong, but I was wondering if this is a use case for useMemo? Can anyone provide some help here, most important to me is the explanation of why more than the how if possible?

Much appreciated K