React App running in Visual studio

Question

React App running in Visual studio

I tried react app template and run it as default config i.e. weatherforcast.
Backend is running but frontend (reactapp) giving the error as:
**[vite] (client) Pre-transform error: Failed to load url /src/main.jsx (resolved id: /src/main.jsx). Does the file exist?
**and got this on screen
User's image

**
** my node version is upto date (25.2.1)

Visual studio is 2026

Kindly help us to figure out what is the issue

1 answer

Your answer

Answer 1

Susmitha T (INFOSYS LIMITED) 1,790 Microsoft External Staff

Thank you for reaching out!

The error message you're seeing suggests that Vite is having trouble locating the file. Here are some steps you can take to troubleshoot this issue:

1. Check File Path: Ensure that the main.jsx file exists in the src directory of your React application. The file structure should look something like this:
/src
├── App.jsx
  ├── main.jsx
└── index.css

**
2.Verify the Import: Open your index.js (or any entry point file) and ensure that you're importing main.jsx correctly. It should look something like this: jsx import './main.jsx';

**
3.Vite Configuration: If you're using Vite, double-check your vite.config.js file for any misconfigurations that might prevent it from resolving file paths correctly.

4. Node Version: You mentioned that you are using Node version 25.2.1. While this is quite recent, consider testing your application with a stable LTS version (like Node 18.x.x) to rule out any compatibility issues with libraries or tools you're using.

5. Restarting the Development Server: Sometimes, simply restarting the Vite development server can resolve issues. Ensure you stop and then restart the server after making any changes.

6. Clearing Cache: If none of the above works, clearing your build cache can sometimes help. You can do this by running
bash
rm -rf node_modules/.vite

After performing these steps, try running your application again and see if the issue persists.

References: https://dori-uw-1.kuma-moon.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=v…
https://dori-uw-1.kuma-moon.com/en-us/visualstudio/javascript/create-react-app?view=visualstudio&am…

Let me know if you need any further help with this. I will be happy to assist.
If you find this helpful, Kindly mark the provided solution as "Accept Answer", so that others in the community facing similar issues can easily find the solution. Your contribution is highly appreciated.

Gaur, Himanshu (SMS India Pvt. Ltd.) 0

Hello,

Thanks for the reply

I checked the points mentioned but still facing the same issue

file structure is same as you mentioned.
index.html is importing b script tag not index.js.
I will paste the config below, I found nothing, Can you check it again.
I shifted the LTS version of node.
Tried to restart the server
Tried to clear the cache.

File structure screenshot:-
User's image

vite.config.js:-

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import plugin from '@vitejs/plugin-react';
import fs from 'fs';
import path from 'path';
import child_process from 'child_process';
import { env } from 'process';

const baseFolder =
    env.APPDATA !== undefined && env.APPDATA !== ''
        ? `${env.APPDATA}/ASP.NET/https`
        : `${env.HOME}/.aspnet/https`;

const certificateName = "reactapp1.client";
const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
const keyFilePath = path.join(baseFolder, `${certificateName}.key`);

if (!fs.existsSync(baseFolder)) {
    fs.mkdirSync(baseFolder, { recursive: true });
}

if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
    if (0 !== child_process.spawnSync('dotnet', [
        'dev-certs',
        'https',
        '--export-path',
        certFilePath,
        '--format',
        'Pem',
        '--no-password',
    ], { stdio: 'inherit', }).status) {
        throw new Error("Could not create certificate.");
    }
}

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:5049';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [plugin()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        proxy: {
            '^/weatherforecast': {
                target,
                secure: false
            }
        },
        port: parseInt(env.DEV_SERVER_PORT || '49268'),
        https: {
            key: fs.readFileSync(keyFilePath),
            cert: fs.readFileSync(certFilePath),
        }
    }
})

Susmitha T (INFOSYS LIMITED) 1,790 Reputation points Microsoft External Staff

2025-12-12T06:23:04.5633333+00:00
Thank you for reaching out!

The issue is inside with your index.html. Vite cannot find /src/main.jsx because the script tag is pointing to the wrong path (often /src/main jsx or /main.js).

fix the script tag to:

<script type="module" src="/src/main.jsx"></script>

Also confirm:

main.jsx exsist (not "main.jsx)

index.html is in project root

Vite cache is cleared

Once corrected, Vite will load normally.

Reference: Create a Node.js and React app - Visual Studio 2019 | Microsoft Learn

Create a React app in Visual Studio - Visual Studio (Windows) | Microsoft Learn

Let me know if you need any further help with this. I will be happy to assist. If you find this helpful, Kindly mark the provided solution as "Accept Answer", so that others in the community facing similar issues can easily find the solution. Your contribution is highly appreciated.
Gaur, Himanshu (SMS India Pvt. Ltd.) 0 Reputation points

2025-12-12T06:47:16.5066667+00:00

Hello

All the points you mentioned has been done and still not working.
one more thing when I create another react project independently and I copied vite config and components then it is working.
I think visual studio creating react project have some issues.

Thanks

Share via

React App running in Visual studio

1 answer

Your answer