CORS issue loading *Inertia Page* from another file

I am creating a module page system and I am currently having trouble loading an inertia page from another file. The routes is correct because I can send a string which will display on the page but when trying with InertiaJS I get a CORS error shown below.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5173/resources/js/pages/@PortfolioPages/Index.tsx. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5173/@react-refresh. (Reason: CORS request did not succeed). Status code: (null).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5173/resources/js/app.tsx. (Reason: CORS request did not succeed). Status code: (null).

I am come to find out that it keeps trying to look here

http://127.0.0.1:5173/resources/js/pages/@PortfolioPages/Index.tsx

but my page resides here

C:\Users\jdh\Desktop\Web Apps\Web Business\app\pockets\portfolio\resources\pages\Index.tsx

my app.tsx look as such

resolve: (name) => {
        // First, check if the component name indicates it's a portfolio page
        if (name.startsWith('Portfolio/')) {
            const componentName = name.replace('Portfolio/', '');
            // The key in a glob is relative to the directory it's run from.
            // This path must match your file system.
            const portfolioPages = import.meta.glob('../app/pockets/portfolio/resources/pages/**/*.tsx');
            const path = `../app/pockets/portfolio/resources/pages/${componentName}.tsx`;

            if (portfolioPages[path]) {
                return portfolioPages[path]();
            }
        }
        
        // If not a portfolio page, try to resolve from the default pages directory.
        const pages = import.meta.glob('./pages/**/*.tsx');
        const path = `./pages/${name}.tsx`;

        if (pages[path]) {
            return pages[path]();
        }

        throw new Error(`Page component '${name}' not found.`);
    },