import { cloudflare } from "@cloudflare/vite-plugin";

import { reactRouter } from "@react-router/dev/vite";

import tailwindcss from "@tailwindcss/vite";

import { defineConfig, type Plugin } from "vite";

import tsconfigPaths from "vite-tsconfig-paths";

import babel from "vite-plugin-babel";

/**

* Mock globalThis.Cloudflare for pre-rendering in Node.js.

* The Cloudflare vite plugin generates code that accesses Cloudflare-specific

* APIs which don't exist in Node.js where pre-rendering runs.

*/

function mockCloudflareForPrerender(): Plugin {

return {

name: "mock-cloudflare-for-prerender",

renderChunk(code, chunk) {

if (chunk.fileName.includes("worker-entry")) {

const mock = `

if (typeof globalThis.Cloudflare === "undefined") {

globalThis.Cloudflare = {

compatibilityFlags: {

enable_nodejs_process_v2: false,

},

};

}

`;

return mock + code;

}

return null;

},

};

}

export default defineConfig(() => ({

server: {

port: 8788,

fs: {

// Restrict files that could be served by Vite's dev server. Accessing

// files outside this directory list that aren't imported from an allowed

// file will result in a 403. Both directories and files can be provided.

// If you're comfortable with Vite's dev server making any file within the

// project root available, you can remove this option. See more:

// https://vitejs.dev/config/server-options.html#server-fs-allow

allow: ["app", "node_modules/highlight.js"],

},

},

plugins: [

mockCloudflareForPrerender(),

cloudflare({ viteEnvironment: { name: "ssr" } }),

tailwindcss(),

reactRouter(),

tsconfigPaths(),

babel({

filter: /\.[jt]sx?$/,

babelConfig: {

presets: ["@babel/preset-typescript"],

plugins: [["babel-plugin-react-compiler", { target: "19" }]],

},

}),

],

}));