Super weird issue I’ve run into. I’m building this Steam clone on Replit while I’m bored at work, can’t get VSCode on that laptop. I went and brought everything over to my VSCode file when I got home, here’s the GitHub.

The project works in Replit, but I can’t get the data from my context to work at all with VSCode.

This is the context

import { createContext, useContext, useState, useEffect } from "react";

export const DataContext = createContext({});

export const useData = () => useContext(DataContext);

export const DataProvider = ({ children }) => {
    const [steamData, setSteamData] = useState({ test: "test" });
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setLoading(true);
        fetch("./minsteamdb.json")
            .then((response) => response.json())
            .then((data) => setSteamData(data))
            .then(setLoading(false))
            .catch((error) => console.error("error", error));
    }, [setSteamData]);

    return (
        <DataContext.Provider value={{ steamData, setSteamData, loading }}>
            {children}
        </DataContext.Provider>
    );
};

The App is inside the provider

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { DataProvider } from "./context/DataContext";

ReactDOM.createRoot(document.getElementById("root")).render(
    <React.StrictMode>
        <DataProvider>
            <App />
        </DataProvider>
    </React.StrictMode>

And this is one of the components that uses data from the context

import { DataContext } from "../../context/DataContext";
import { useContext } from "react";
import FeaturedCard from "./FeaturedCard";
import { Carousel } from "@material-tailwind/react";

export default function Featured() {
    const { steamData, loading } = useContext(DataContext);
    const randomGameArray = [];
    // Get random games from steamData to display as Featured Games
    if (!loading && steamData?.length > 0) {
        for (let i = 0; i < 10; i++) {
            const randomIndex = Math.floor(Math.random() * steamData?.length);
            const randomGame = steamData[randomIndex];
            randomGameArray.push(randomGame);
        }
    }

I don’t get why it works with Replit but not VSCode?