vitejs build with jsx returning MIME error on aws amplify

Question

So I am using Vitejs with a react project. I am using the jsx extension for all the react files in the appplication. When using the npm build, then npm run preview the applicaiton is working fine on my computer locally however when I am using aws amplify, the page is giving me a MIME error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.

Now I tried many configurations for Vite, yet nothing is working, here is my config file

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs/promises';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  esbuild: {
    loader: 'jsx',
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
})

Answer 1

Go to Build Settings, Click Edit, and change the line

baseDirectory: /

to

baseDirectory: /dist