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 "../".
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.