fix: production crash due to undefined import.meta.env by adding env utility and updating build script
This commit is contained in:
@@ -11,7 +11,7 @@
|
|||||||
"lint": "biome check .",
|
"lint": "biome check .",
|
||||||
"check": "biome check --write .",
|
"check": "biome check --write .",
|
||||||
"format": "biome format --write .",
|
"format": "biome format --write .",
|
||||||
"build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='BUN_PUBLIC_*'",
|
"build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='VITE_*'",
|
||||||
"start": "NODE_ENV=production bun src/index.ts"
|
"start": "NODE_ENV=production bun src/index.ts"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import { Inspector } from "react-dev-inspector";
|
|||||||
import { createRoot } from "react-dom/client";
|
import { createRoot } from "react-dom/client";
|
||||||
import { routeTree } from "./routeTree.gen";
|
import { routeTree } from "./routeTree.gen";
|
||||||
import { ModalsProvider } from "@mantine/modals";
|
import { ModalsProvider } from "@mantine/modals";
|
||||||
|
import { VITE_PUBLIC_URL } from "./utils/env";
|
||||||
|
|
||||||
// Create a new router instance
|
// Create a new router instance
|
||||||
export const router = createRouter({
|
export const router = createRouter({
|
||||||
@@ -42,8 +43,9 @@ const app = (
|
|||||||
onClickElement={(e) => {
|
onClickElement={(e) => {
|
||||||
if (!e.codeInfo) return;
|
if (!e.codeInfo) return;
|
||||||
|
|
||||||
const url = import.meta.env.VITE_PUBLIC_URL;
|
const url = VITE_PUBLIC_URL;
|
||||||
fetch(`${url}/__open-in-editor`, {
|
fetch(`${url}/__open-in-editor`, {
|
||||||
|
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
|
|||||||
11
src/index.ts
11
src/index.ts
@@ -15,10 +15,8 @@ const api = new Elysia({
|
|||||||
prefix: "/api",
|
prefix: "/api",
|
||||||
})
|
})
|
||||||
.all("/auth/*", ({ request }) => auth.handler(request))
|
.all("/auth/*", ({ request }) => auth.handler(request))
|
||||||
.use(cors());
|
.use(cors())
|
||||||
|
.use(
|
||||||
if (!isProduction) {
|
|
||||||
api.use(
|
|
||||||
swagger({
|
swagger({
|
||||||
path: "/docs",
|
path: "/docs",
|
||||||
documentation: {
|
documentation: {
|
||||||
@@ -28,10 +26,7 @@ if (!isProduction) {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
);
|
)
|
||||||
}
|
|
||||||
|
|
||||||
api
|
|
||||||
.get("/session", async ({ request }) => {
|
.get("/session", async ({ request }) => {
|
||||||
const data = await auth.api.getSession({ headers: request.headers });
|
const data = await auth.api.getSession({ headers: request.headers });
|
||||||
return { data };
|
return { data };
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { redirect } from "@tanstack/react-router";
|
import { redirect } from "@tanstack/react-router";
|
||||||
|
import { VITE_PUBLIC_URL } from "../utils/env";
|
||||||
|
|
||||||
/* ================================
|
/* ================================
|
||||||
* Types
|
* Types
|
||||||
@@ -21,7 +22,7 @@ type SessionResponse = {
|
|||||||
|
|
||||||
async function fetchSession(): Promise<SessionResponse | null> {
|
async function fetchSession(): Promise<SessionResponse | null> {
|
||||||
try {
|
try {
|
||||||
const baseURL = import.meta.env.VITE_PUBLIC_URL || window.location.origin;
|
const baseURL = VITE_PUBLIC_URL || window.location.origin;
|
||||||
const res = await fetch(`${baseURL}/api/session`, {
|
const res = await fetch(`${baseURL}/api/session`, {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
credentials: "include",
|
credentials: "include",
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import { createAuthClient } from "better-auth/react";
|
import { createAuthClient } from "better-auth/react";
|
||||||
|
import { VITE_PUBLIC_URL } from "./env";
|
||||||
|
|
||||||
export const authClient = createAuthClient({
|
export const authClient = createAuthClient({
|
||||||
baseURL: import.meta.env.VITE_PUBLIC_URL || "http://localhost:3000",
|
baseURL: VITE_PUBLIC_URL,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const { useSession, signIn, signOut, signUp, getSession } = authClient;
|
export const { useSession, signIn, signOut, signUp, getSession } = authClient;
|
||||||
|
|||||||
23
src/utils/env.ts
Normal file
23
src/utils/env.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
/**
|
||||||
|
* Safely access environment variables across different runtimes and builders.
|
||||||
|
* Supports Vite's import.meta.env and Bun's process.env (used in bun build).
|
||||||
|
*/
|
||||||
|
export const getEnv = (key: string, defaultValue = ""): string => {
|
||||||
|
// 1. Try Vite's import.meta.env
|
||||||
|
try {
|
||||||
|
if (typeof import.meta.env !== "undefined" && import.meta.env[key]) {
|
||||||
|
return import.meta.env[key];
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
|
||||||
|
// 2. Try process.env (injected by bun build --env)
|
||||||
|
try {
|
||||||
|
if (typeof process !== "undefined" && process.env[key]) {
|
||||||
|
return process.env[key];
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
|
||||||
|
return defaultValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const VITE_PUBLIC_URL = getEnv("VITE_PUBLIC_URL", "http://localhost:3000");
|
||||||
Reference in New Issue
Block a user