Why is my Vite build/preview not working?

Question

I tried to build my Vite + React app but when i do npm run preview the page goes blank. vite.config.js

import external from "rollup-plugin-peer-deps-external";
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import commonjs from '@rollup/plugin-commonjs';

export default defineConfig(async () => {
  const mdx = await import("@mdx-js/rollup")
  return {
    optimizeDeps: {
      include: ["react/jsx-runtime"],
    },
    plugins: [react(), mdx.default({ remarkPlugins: [] }), commonjs(), external({
      includeDependencies: true
    }),],

  }
})

ERROR: Uncaught TypeError: Failed to resolve module specifier "vite/modulepreload-polyfill". Relative references must start with either "/", "./", or "../".

TRIED SOLUTION according to this: https://vitejs.dev/config/build-options#build-polyfillmodulepreload I tried to modify my vite.config.js

import external from "rollup-plugin-peer-deps-external";
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import commonjs from '@rollup/plugin-commonjs';

export default defineConfig(async () => {
  const mdx = await import("@mdx-js/rollup")
  return {
    optimizeDeps: {
      include: ["react/jsx-runtime"],
    },
    plugins: [react(), mdx.default({ remarkPlugins: [] }), commonjs(), external({
      includeDependencies: true
    }),],
    build: {
      polyfillModulePreload: false
    }
  }
})

NEW ERROR Uncaught TypeError: Failed to resolve module specifier "react/jsx-runtime". Relative references must start with either "/", "./", or "../".

Answer 1

Simplifying the code was the best option. My build works perfectly fine now.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [react()],

  server: { host: "127.0.0.1", port: 81 },
});

I don't know how to resolve the issues my previous import had but all I needed was for my app to build so my solution wasn't probably the best but it works.