feature/IO-3499-React-19: Bug Fixes / Checkpoint
This commit is contained in:
Dave
@@ -37,239 +37,258 @@ const getFormattedTimestamp = () =>
|
||||
|
||||
export const logger = createLogger("info", { allowClearScreen: false });
|
||||
|
||||
export default defineConfig({
|
||||
base: "/",
|
||||
plugins: [
|
||||
ViteEjsPlugin((viteConfig) => ({ env: viteConfig.env })),
|
||||
// Read HTTPS certs once (used by both server + preview)
|
||||
const httpsCerts = {
|
||||
key: await fsPromises.readFile("../certs/key.pem"),
|
||||
cert: await fsPromises.readFile("../certs/cert.pem")
|
||||
};
|
||||
|
||||
// PWA only for production builds (faster dev)
|
||||
VitePWA({
|
||||
apply: "build",
|
||||
injectRegister: "auto",
|
||||
registerType: "prompt",
|
||||
workbox: {
|
||||
navigateFallbackDenylist: [/^\/api\//] // prevent caching API routes
|
||||
},
|
||||
manifest: {
|
||||
short_name: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "ImEX Online",
|
||||
rome: "Rome Online"
|
||||
}),
|
||||
name: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "ImEX Online",
|
||||
rome: "Rome Online"
|
||||
}),
|
||||
description: "The ultimate bodyshop management system.",
|
||||
icons: [
|
||||
{
|
||||
src: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "favicon.png",
|
||||
rome: "ro-favicon.png"
|
||||
}),
|
||||
sizes: "64x64 32x32 24x24 16x16",
|
||||
type: "image/x-icon"
|
||||
},
|
||||
{
|
||||
src: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "logo192.png",
|
||||
rome: "logo192.png"
|
||||
}),
|
||||
type: "image/png",
|
||||
sizes: "192x192"
|
||||
},
|
||||
{
|
||||
src: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "logo512.png",
|
||||
rome: "ro-favicon.png"
|
||||
}),
|
||||
type: "image/png",
|
||||
sizes: "512x512"
|
||||
}
|
||||
],
|
||||
theme_color: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "#1890ff",
|
||||
rome: "#fff"
|
||||
}),
|
||||
background_color: "#fff",
|
||||
gcm_sender_id: "103953800507"
|
||||
}
|
||||
}),
|
||||
export default defineConfig(({ command, mode }) => {
|
||||
// Only enable React Compiler on build in production/test (keeps dev as fast as possible)
|
||||
const isBuild = command === "build";
|
||||
const isTestBuild =
|
||||
mode === "test" || process.env.VITE_APP_IS_TEST === "true" || process.env.VITE_APP_IS_TEST === "1";
|
||||
const enableReactCompiler =
|
||||
process.env.VITE_ENABLE_COMPILER_IN_DEV || (isBuild && (mode === "production" || isTestBuild));
|
||||
|
||||
react({
|
||||
babel: {
|
||||
plugins: [
|
||||
['babel-plugin-react-compiler', {
|
||||
// Exclude third-party drag-and-drop library from compilation
|
||||
sources: (filename) => {
|
||||
return !filename.includes('trello-board/dnd');
|
||||
console.log(enableReactCompiler ? "React Compiler enabled" : "React Compiler disabled");
|
||||
|
||||
return {
|
||||
base: "/",
|
||||
plugins: [
|
||||
ViteEjsPlugin((viteConfig) => ({ env: viteConfig.env })),
|
||||
|
||||
// PWA only for production builds (faster dev)
|
||||
VitePWA({
|
||||
apply: "build",
|
||||
injectRegister: "auto",
|
||||
registerType: "prompt",
|
||||
workbox: {
|
||||
navigateFallbackDenylist: [/^\/api\//] // prevent caching API routes
|
||||
},
|
||||
manifest: {
|
||||
short_name: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "ImEX Online",
|
||||
rome: "Rome Online"
|
||||
}),
|
||||
name: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "ImEX Online",
|
||||
rome: "Rome Online"
|
||||
}),
|
||||
description: "The ultimate bodyshop management system.",
|
||||
icons: [
|
||||
{
|
||||
src: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "favicon.png",
|
||||
rome: "ro-favicon.png"
|
||||
}),
|
||||
sizes: "64x64 32x32 24x24 16x16",
|
||||
type: "image/x-icon"
|
||||
},
|
||||
{
|
||||
src: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "logo192.png",
|
||||
rome: "logo192.png"
|
||||
}),
|
||||
type: "image/png",
|
||||
sizes: "192x192"
|
||||
},
|
||||
{
|
||||
src: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "logo512.png",
|
||||
rome: "ro-favicon.png"
|
||||
}),
|
||||
type: "image/png",
|
||||
sizes: "512x512"
|
||||
}
|
||||
}]
|
||||
]
|
||||
}
|
||||
}),
|
||||
eslint(),
|
||||
|
||||
// Sentry only for production builds (no dev overhead)
|
||||
sentryVitePlugin({
|
||||
apply: "build",
|
||||
org: "imex",
|
||||
reactComponentAnnotation: { enabled: true },
|
||||
release: {
|
||||
name: `${process.env.VITE_APP_IS_TEST ? "test" : "production"}-${currentDatePST}-${commitHash}`.trim()
|
||||
},
|
||||
project: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "imexonline",
|
||||
rome: "rome-online"
|
||||
})
|
||||
})
|
||||
],
|
||||
|
||||
define: {
|
||||
APP_VERSION: JSON.stringify(process.env.npm_package_version),
|
||||
__COMMIT_HASH__: JSON.stringify(commitHash)
|
||||
},
|
||||
|
||||
server: {
|
||||
host: true,
|
||||
port: 3000,
|
||||
open: true,
|
||||
proxy: {
|
||||
"/ws": {
|
||||
target: "ws://localhost:4000",
|
||||
secure: false,
|
||||
ws: true
|
||||
},
|
||||
"/wss": {
|
||||
target: "ws://localhost:4000",
|
||||
secure: false,
|
||||
ws: true
|
||||
},
|
||||
"/api": {
|
||||
target: "http://localhost:4000",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: false,
|
||||
rewrite: (path) => {
|
||||
const replacedValue = path.replace(/^\/api/, "");
|
||||
logger.info(
|
||||
`${chalk.grey.bold(getFormattedTimestamp())} ${chalk.cyan.bold("[vite]")} ${chalk.green.bold("[API]")} ${chalk.blue(replacedValue)}`
|
||||
);
|
||||
return replacedValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
https: {
|
||||
key: await fsPromises.readFile("../certs/key.pem"),
|
||||
cert: await fsPromises.readFile("../certs/cert.pem")
|
||||
}
|
||||
},
|
||||
|
||||
preview: {
|
||||
port: 6000,
|
||||
host: true,
|
||||
open: true,
|
||||
https: {
|
||||
key: await fsPromises.readFile("../certs/key.pem"),
|
||||
cert: await fsPromises.readFile("../certs/cert.pem")
|
||||
},
|
||||
proxy: {
|
||||
"/ws": {
|
||||
target: "ws://localhost:4000",
|
||||
rewriteWsOrigin: true,
|
||||
secure: false,
|
||||
ws: true
|
||||
},
|
||||
"/wss": {
|
||||
target: "ws://localhost:4000",
|
||||
rewriteWsOrigin: true,
|
||||
secure: false,
|
||||
ws: true
|
||||
},
|
||||
"/api": {
|
||||
target: "http://localhost:4000",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
build: {
|
||||
sourcemap: true,
|
||||
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
antd: ["antd"],
|
||||
"react-redux": ["react-redux"],
|
||||
redux: ["redux"],
|
||||
lodash: ["lodash"],
|
||||
"@sentry/react": ["@sentry/react"],
|
||||
"@splitsoftware/splitio-react": ["@splitsoftware/splitio-react"],
|
||||
logrocket: ["logrocket"],
|
||||
firebase: [
|
||||
"@firebase/analytics",
|
||||
"@firebase/app",
|
||||
"@firebase/firestore",
|
||||
"@firebase/auth",
|
||||
"@firebase/messaging"
|
||||
],
|
||||
markerjs2: ["markerjs2"],
|
||||
"@apollo/client": ["@apollo/client"],
|
||||
"libphonenumber-js": ["libphonenumber-js"],
|
||||
recharts: ["recharts"]
|
||||
theme_color: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "#1890ff",
|
||||
rome: "#fff"
|
||||
}),
|
||||
background_color: "#fff",
|
||||
gcm_sender_id: "103953800507"
|
||||
}
|
||||
}),
|
||||
|
||||
react(
|
||||
enableReactCompiler
|
||||
? {
|
||||
babel: {
|
||||
plugins: [
|
||||
[
|
||||
"babel-plugin-react-compiler",
|
||||
{
|
||||
// Exclude third-party drag-and-drop library from compilation
|
||||
sources: (filename) => {
|
||||
return !filename.includes("trello-board/dnd");
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
),
|
||||
|
||||
eslint(),
|
||||
|
||||
// Sentry only for production builds (no dev overhead)
|
||||
sentryVitePlugin({
|
||||
apply: "build",
|
||||
org: "imex",
|
||||
reactComponentAnnotation: { enabled: true },
|
||||
release: {
|
||||
name: `${process.env.VITE_APP_IS_TEST ? "test" : "production"}-${currentDatePST}-${commitHash}`.trim()
|
||||
},
|
||||
project: InstanceRenderManager({
|
||||
instance: process.env.VITE_APP_INSTANCE,
|
||||
imex: "imexonline",
|
||||
rome: "rome-online"
|
||||
})
|
||||
})
|
||||
],
|
||||
|
||||
define: {
|
||||
APP_VERSION: JSON.stringify(process.env.npm_package_version),
|
||||
__COMMIT_HASH__: JSON.stringify(commitHash)
|
||||
},
|
||||
|
||||
server: {
|
||||
host: true,
|
||||
port: 3000,
|
||||
open: true,
|
||||
proxy: {
|
||||
"/ws": {
|
||||
target: "ws://localhost:4000",
|
||||
secure: false,
|
||||
ws: true
|
||||
},
|
||||
"/wss": {
|
||||
target: "ws://localhost:4000",
|
||||
secure: false,
|
||||
ws: true
|
||||
},
|
||||
"/api": {
|
||||
target: "http://localhost:4000",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: false,
|
||||
rewrite: (path) => {
|
||||
const replacedValue = path.replace(/^\/api/, "");
|
||||
logger.info(
|
||||
`${chalk.grey.bold(getFormattedTimestamp())} ${chalk.cyan.bold("[vite]")} ${chalk.green.bold("[API]")} ${chalk.blue(replacedValue)}`
|
||||
);
|
||||
return replacedValue;
|
||||
}
|
||||
}
|
||||
},
|
||||
https: httpsCerts
|
||||
},
|
||||
|
||||
preview: {
|
||||
port: 6000,
|
||||
host: true,
|
||||
open: true,
|
||||
https: httpsCerts,
|
||||
proxy: {
|
||||
"/ws": {
|
||||
target: "ws://localhost:4000",
|
||||
rewriteWsOrigin: true,
|
||||
secure: false,
|
||||
ws: true
|
||||
},
|
||||
"/wss": {
|
||||
target: "ws://localhost:4000",
|
||||
rewriteWsOrigin: true,
|
||||
secure: false,
|
||||
ws: true
|
||||
},
|
||||
"/api": {
|
||||
target: "http://localhost:4000",
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
ws: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
cssMinify: "lightningcss"
|
||||
},
|
||||
build: {
|
||||
sourcemap: true,
|
||||
|
||||
// Strip console/debugger in prod to shrink bundles
|
||||
esbuild: {
|
||||
//drop: ["console", "debugger"]
|
||||
},
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
antd: ["antd"],
|
||||
"react-redux": ["react-redux"],
|
||||
redux: ["redux"],
|
||||
lodash: ["lodash"],
|
||||
"@sentry/react": ["@sentry/react"],
|
||||
"@splitsoftware/splitio-react": ["@splitsoftware/splitio-react"],
|
||||
logrocket: ["logrocket"],
|
||||
firebase: [
|
||||
"@firebase/analytics",
|
||||
"@firebase/app",
|
||||
"@firebase/firestore",
|
||||
"@firebase/auth",
|
||||
"@firebase/messaging"
|
||||
],
|
||||
markerjs2: ["markerjs2"],
|
||||
"@apollo/client": ["@apollo/client"],
|
||||
"libphonenumber-js": ["libphonenumber-js"],
|
||||
recharts: ["recharts"]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
"react",
|
||||
"react-dom",
|
||||
"antd",
|
||||
"lodash",
|
||||
"@sentry/react",
|
||||
"@apollo/client",
|
||||
"@reduxjs/toolkit",
|
||||
"axios",
|
||||
"react-router-dom",
|
||||
"dayjs",
|
||||
"redux",
|
||||
"react-redux",
|
||||
"@firebase/app",
|
||||
"@firebase/analytics",
|
||||
"@firebase/firestore",
|
||||
"@firebase/auth",
|
||||
"@firebase/messaging",
|
||||
"@firebase/util"
|
||||
],
|
||||
esbuildOptions: {
|
||||
loader: { ".jsx": "jsx", ".tsx": "tsx" }
|
||||
}
|
||||
},
|
||||
|
||||
css: {
|
||||
transformer: "lightningcss",
|
||||
lightningcss: {
|
||||
targets: lightningCssTargets
|
||||
cssMinify: "lightningcss"
|
||||
},
|
||||
preprocessorOptions: {
|
||||
scss: { quietDeps: true }
|
||||
|
||||
// Strip console/debugger in prod to shrink bundles
|
||||
esbuild: {
|
||||
//drop: ["console", "debugger"]
|
||||
},
|
||||
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
"react",
|
||||
"react-dom",
|
||||
"antd",
|
||||
"lodash",
|
||||
"@sentry/react",
|
||||
"@apollo/client",
|
||||
"@reduxjs/toolkit",
|
||||
"axios",
|
||||
"react-router-dom",
|
||||
"dayjs",
|
||||
"redux",
|
||||
"react-redux",
|
||||
"@firebase/app",
|
||||
"@firebase/analytics",
|
||||
"@firebase/firestore",
|
||||
"@firebase/auth",
|
||||
"@firebase/messaging",
|
||||
"@firebase/util"
|
||||
],
|
||||
esbuildOptions: {
|
||||
loader: { ".jsx": "jsx", ".tsx": "tsx" }
|
||||
}
|
||||
},
|
||||
|
||||
css: {
|
||||
transformer: "lightningcss",
|
||||
lightningcss: {
|
||||
targets: lightningCssTargets
|
||||
},
|
||||
preprocessorOptions: {
|
||||
scss: { quietDeps: true }
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user