diff --git a/client/.env.development.imex b/client/.env.development.imex index 32dac9e44..1a43b6c7f 100644 --- a/client/.env.development.imex +++ b/client/.env.development.imex @@ -18,4 +18,3 @@ VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com VITE_APP_AMP_KEY=6228a598e57cd66875cfd41604f1f891 -VITE_ENABLE_COMPILER_IN_DEV=1 diff --git a/client/.env.development.rome b/client/.env.development.rome index 8a2ad85b7..ac5c8e6fe 100644 --- a/client/.env.development.rome +++ b/client/.env.development.rome @@ -20,4 +20,3 @@ VITE_PUBLIC_POSTHOG_KEY=phc_xtLmBIu0rjWwExY73Oj5DTH1bGbwq1G1Y8jnlTceien VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com VITE_APP_AMP_URL=https://vp8k908qy2.execute-api.ca-central-1.amazonaws.com VITE_APP_AMP_KEY=46b1193a867d4e3131ae4c3a64a3fc78 -VITE_ENABLE_COMPILER_IN_DEV=1 diff --git a/client/.gitignore b/client/.gitignore index 0d780b332..7a858909a 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -13,3 +13,6 @@ playwright/.cache/ # Sentry Config File .sentryclirc /dev-dist + +# Local environment overrides (not version controlled) +.env.development.local.overrides diff --git a/client/package.json b/client/package.json index cfc7d9ac1..428469c80 100644 --- a/client/package.json +++ b/client/package.json @@ -92,11 +92,11 @@ "postinstall": "echo 'when updating react-big-calendar, remember to check to localizer in the calendar wrapper'", "analyze": "source-map-explorer 'build/static/js/*.js'", "start": "vite", - "build": "dotenvx run --env-file=.env.development.imex -- vite build", - "start:imex": "dotenvx run --env-file=.env.development.imex -- vite", - "start:rome": "dotenvx run --env-file=.env.development.rome -- vite", - "preview:imex": "dotenvx run --env-file=.env.development.imex -- vite preview", - "preview:rome": "dotenvx run --env-file=.env.development.rome -- vite preview", + "build": "dotenvx run --env-file=.env.development.imex --env-file=.env.development.local.overrides -- vite build", + "start:imex": "dotenvx run --env-file=.env.development.imex --env-file=.env.development.local.overrides -- vite", + "start:rome": "dotenvx run --env-file=.env.development.rome --env-file=.env.development.local.overrides -- vite", + "preview:imex": "dotenvx run --env-file=.env.development.imex --env-file=.env.development.local.overrides -- vite preview", + "preview:rome": "dotenvx run --env-file=.env.development.rome --env-file=.env.development.local.overrides -- vite preview", "build:test:imex": "env-cmd -f .env.test.imex -- npm run build", "build:test:rome": "env-cmd -f .env.test.rome -- npm run build", "build:production:imex": "env-cmd -f .env.production.imex -- npm run build", diff --git a/client/src/App/App.jsx b/client/src/App/App.jsx index e14162274..2bbda1a43 100644 --- a/client/src/App/App.jsx +++ b/client/src/App/App.jsx @@ -100,14 +100,7 @@ export function App({ if (currentUser.authorized && bodyshop) { client.setAttribute("imexshopid", bodyshop.imexshopid); - if ( - client.getTreatment("LogRocket_Tracking") === "on" || - window.location.hostname === - InstanceRenderMgr({ - imex: "beta.imex.online", - rome: "beta.romeonline.io" - }) - ) { + if (client.getTreatment("LogRocket_Tracking") === "on") { console.log("LR Start"); LogRocket.init( InstanceRenderMgr({ diff --git a/client/src/index.jsx b/client/src/index.jsx index 6a87f770e..49abd60eb 100644 --- a/client/src/index.jsx +++ b/client/src/index.jsx @@ -82,13 +82,14 @@ const rootEl = document.getElementById("root"); if (!rootEl) throw new Error('Missing root element:
'); -const appTree = import.meta.env.DEV ? ( - +const appTree = + import.meta.env.DEV && import.meta.env?.VITE_DISABLE_STRICT_MODE !== "true" ? ( + + + + ) : ( - -) : ( - -); + ); ReactDOM.createRoot(rootEl).render(appTree); diff --git a/client/src/pages/manage/manage.page.component.jsx b/client/src/pages/manage/manage.page.component.jsx index e5d1d5241..d87fe96cc 100644 --- a/client/src/pages/manage/manage.page.component.jsx +++ b/client/src/pages/manage/manage.page.component.jsx @@ -2,7 +2,7 @@ import { FloatButton, Layout, Spin } from "antd"; import { Route, Routes } from "react-router-dom"; // import preval from "preval.macro"; -import { lazy, Suspense, useEffect, useRef, useState } from "react"; +import { Suspense, useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { createStructuredSelector } from "reselect"; @@ -29,87 +29,88 @@ import { import InstanceRenderManager from "../../utils/instanceRenderMgr.js"; import useAlertsNotifications from "../../hooks/useAlertsNotifications.jsx"; import { selectDarkMode } from "../../redux/application/application.selectors.js"; +import { lazyDev } from "../../utils/lazyWithPreload.jsx"; -const PrintCenterModalContainer = lazy( +const PrintCenterModalContainer = lazyDev( () => import("../../components/print-center-modal/print-center-modal.container") ); -const NoteUpsertModal = lazy(() => import("../../components/note-upsert-modal/note-upsert-modal.container.jsx")); +const NoteUpsertModal = lazyDev(() => import("../../components/note-upsert-modal/note-upsert-modal.container.jsx")); -const JobsPage = lazy(() => import("../jobs/jobs.page")); +const JobsPage = lazyDev(() => import("../jobs/jobs.page")); -const CardPaymentModalContainer = lazy( +const CardPaymentModalContainer = lazyDev( () => import("../../components/card-payment-modal/card-payment-modal.container.jsx") ); -const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page.container")); -const InventoryListPage = lazy(() => import("../inventory/inventory.page")); -const ProfilePage = lazy(() => import("../profile/profile.container.page")); -const JobsAvailablePage = lazy(() => import("../jobs-available/jobs-available.page.container")); -const ScheduleContainer = lazy(() => import("../schedule/schedule.page.container")); -const VehiclesContainer = lazy(() => import("../vehicles/vehicles.page.container")); -const VehiclesDetailContainer = lazy(() => import("../vehicles-detail/vehicles-detail.page.container")); -const OwnersContainer = lazy(() => import("../owners/owners.page.container")); -const OwnersDetailContainer = lazy(() => import("../owners-detail/owners-detail.page.container")); -const ShopPage = lazy(() => import("../shop/shop.page.component")); -const ShopVendorPageContainer = lazy(() => import("../shop-vendor/shop-vendor.page.container")); -const EmailOverlayContainer = lazy(() => import("../../components/email-overlay/email-overlay.container.jsx")); -const JobsCreateContainerPage = lazy(() => import("../jobs-create/jobs-create.container")); -const CourtesyCarCreateContainer = lazy(() => import("../courtesy-car-create/courtesy-car-create.page.container")); -const CourtesyCarDetailContainer = lazy(() => import("../courtesy-car-detail/courtesy-car-detail.page.container")); -const CourtesyCarsPage = lazy(() => import("../courtesy-cars/courtesy-cars.page.container")); -const ContractCreatePage = lazy(() => import("../contract-create/contract-create.page.container")); -const ContractDetailPage = lazy(() => import("../contract-detail/contract-detail.page.container")); -const ContractsList = lazy(() => import("../contracts/contracts.page.container")); -const BillsListPage = lazy(() => import("../bills/bills.page.container")); -const FeatureRequestPage = lazy(() => import("../feature-request/feature-request.page.jsx")); +const JobsDetailPage = lazyDev(() => import("../jobs-detail/jobs-detail.page.container")); +const InventoryListPage = lazyDev(() => import("../inventory/inventory.page")); +const ProfilePage = lazyDev(() => import("../profile/profile.container.page")); +const JobsAvailablePage = lazyDev(() => import("../jobs-available/jobs-available.page.container")); +const ScheduleContainer = lazyDev(() => import("../schedule/schedule.page.container")); +const VehiclesContainer = lazyDev(() => import("../vehicles/vehicles.page.container")); +const VehiclesDetailContainer = lazyDev(() => import("../vehicles-detail/vehicles-detail.page.container")); +const OwnersContainer = lazyDev(() => import("../owners/owners.page.container")); +const OwnersDetailContainer = lazyDev(() => import("../owners-detail/owners-detail.page.container")); +const ShopPage = lazyDev(() => import("../shop/shop.page.component")); +const ShopVendorPageContainer = lazyDev(() => import("../shop-vendor/shop-vendor.page.container")); +const EmailOverlayContainer = lazyDev(() => import("../../components/email-overlay/email-overlay.container.jsx")); +const JobsCreateContainerPage = lazyDev(() => import("../jobs-create/jobs-create.container")); +const CourtesyCarCreateContainer = lazyDev(() => import("../courtesy-car-create/courtesy-car-create.page.container")); +const CourtesyCarDetailContainer = lazyDev(() => import("../courtesy-car-detail/courtesy-car-detail.page.container")); +const CourtesyCarsPage = lazyDev(() => import("../courtesy-cars/courtesy-cars.page.container")); +const ContractCreatePage = lazyDev(() => import("../contract-create/contract-create.page.container")); +const ContractDetailPage = lazyDev(() => import("../contract-detail/contract-detail.page.container")); +const ContractsList = lazyDev(() => import("../contracts/contracts.page.container")); +const BillsListPage = lazyDev(() => import("../bills/bills.page.container")); +const FeatureRequestPage = lazyDev(() => import("../feature-request/feature-request.page.jsx")); -const JobCostingModal = lazy(() => import("../../components/job-costing-modal/job-costing-modal.container")); -const ReportCenterModal = lazy(() => import("../../components/report-center-modal/report-center-modal.container")); -const BillEnterModalContainer = lazy(() => import("../../components/bill-enter-modal/bill-enter-modal.container")); -const TimeTicketModalContainer = lazy(() => import("../../components/time-ticket-modal/time-ticket-modal.container")); -const TimeTicketModalTask = lazy( +const JobCostingModal = lazyDev(() => import("../../components/job-costing-modal/job-costing-modal.container")); +const ReportCenterModal = lazyDev(() => import("../../components/report-center-modal/report-center-modal.container")); +const BillEnterModalContainer = lazyDev(() => import("../../components/bill-enter-modal/bill-enter-modal.container")); +const TimeTicketModalContainer = lazyDev(() => import("../../components/time-ticket-modal/time-ticket-modal.container")); +const TimeTicketModalTask = lazyDev( () => import("../../components/time-ticket-task-modal/time-ticket-task-modal.container") ); -const PaymentModalContainer = lazy(() => import("../../components/payment-modal/payment-modal.container")); -const ProductionListPage = lazy(() => import("../production-list/production-list.container")); -const ProductionBoardPage = lazy(() => import("../production-board/production-board.container")); -// const ShopTemplates = lazy(() => +const PaymentModalContainer = lazyDev(() => import("../../components/payment-modal/payment-modal.container")); +const ProductionListPage = lazyDev(() => import("../production-list/production-list.container")); +const ProductionBoardPage = lazyDev(() => import("../production-board/production-board.container")); +// const ShopTemplates = lazyDev(() => // import("../shop-templates/shop-templates.container") // ); -const JobIntake = lazy(() => import("../jobs-intake/jobs-intake.page.container")); -const JobChecklistView = lazy(() => import("../jobs-checklist-view/jobs-checklist-view.page")); -const JobDeliver = lazy(() => import("../jobs-deliver/jobs-delivery.page.container")); -const AccountingQboCallback = lazy(() => import("../accounting-qbo/accounting-qbo.page")); -const AccountingReceivables = lazy(() => import("../accounting-receivables/accounting-receivables.container")); -const AccountingPayables = lazy(() => import("../accounting-payables/accounting-payables.container")); -const AccountingPayments = lazy(() => import("../accounting-payments/accounting-payments.container")); -const AllJobs = lazy(() => import("../jobs-all/jobs-all.container")); -const ReadyJobs = lazy(() => import("../jobs-ready/jobs-ready.page")); -const JobsClose = lazy(() => import("../jobs-close/jobs-close.container")); -const JobsAdmin = lazy(() => import("../jobs-admin/jobs-admin.page")); -const TempDocs = lazy(() => import("../temporary-docs/temporary-docs.container")); +const JobIntake = lazyDev(() => import("../jobs-intake/jobs-intake.page.container")); +const JobChecklistView = lazyDev(() => import("../jobs-checklist-view/jobs-checklist-view.page")); +const JobDeliver = lazyDev(() => import("../jobs-deliver/jobs-delivery.page.container")); +const AccountingQboCallback = lazyDev(() => import("../accounting-qbo/accounting-qbo.page")); +const AccountingReceivables = lazyDev(() => import("../accounting-receivables/accounting-receivables.container")); +const AccountingPayables = lazyDev(() => import("../accounting-payables/accounting-payables.container")); +const AccountingPayments = lazyDev(() => import("../accounting-payments/accounting-payments.container")); +const AllJobs = lazyDev(() => import("../jobs-all/jobs-all.container")); +const ReadyJobs = lazyDev(() => import("../jobs-ready/jobs-ready.page")); +const JobsClose = lazyDev(() => import("../jobs-close/jobs-close.container")); +const JobsAdmin = lazyDev(() => import("../jobs-admin/jobs-admin.page")); +const TempDocs = lazyDev(() => import("../temporary-docs/temporary-docs.container")); -const ShopCsiPageContainer = lazy(() => import("../shop-csi/shop-csi.container.page")); -const PaymentsAll = lazy(() => import("../payments-all/payments-all.container.page")); -const ShiftClock = lazy(() => import("../shift-clock/shift-clock.page")); -const Scoreboard = lazy(() => import("../scoreboard/scoreboard.page.container")); -const TimeTicketsAll = lazy(() => import("../time-tickets/time-tickets.container")); -const Help = lazy(() => import("../help/help.page")); -const PartsQueue = lazy(() => import("../parts-queue/parts-queue.page.container")); -const ExportLogs = lazy(() => import("../export-logs/export-logs.page.container")); -const Phonebook = lazy(() => import("../phonebook/phonebook.page.container")); +const ShopCsiPageContainer = lazyDev(() => import("../shop-csi/shop-csi.container.page")); +const PaymentsAll = lazyDev(() => import("../payments-all/payments-all.container.page")); +const ShiftClock = lazyDev(() => import("../shift-clock/shift-clock.page")); +const Scoreboard = lazyDev(() => import("../scoreboard/scoreboard.page.container")); +const TimeTicketsAll = lazyDev(() => import("../time-tickets/time-tickets.container")); +const Help = lazyDev(() => import("../help/help.page")); +const PartsQueue = lazyDev(() => import("../parts-queue/parts-queue.page.container")); +const ExportLogs = lazyDev(() => import("../export-logs/export-logs.page.container")); +const Phonebook = lazyDev(() => import("../phonebook/phonebook.page.container")); -const EmailTest = lazy(() => import("../../components/email-test/email-test-component")); -const Dashboard = lazy(() => import("../dashboard/dashboard.container")); -const Dms = lazy(() => import("../dms/dms.container")); -const DmsPayables = lazy(() => import("../dms-payables/dms-payables.container")); -const ManageRootPage = lazy(() => import("../manage-root/manage-root.page.container")); -const TtApprovals = lazy(() => import("../tt-approvals/tt-approvals.page.container")); -const MyTasksPage = lazy(() => import("../tasks/myTasksPageContainer.jsx")); -const AllTasksPage = lazy(() => import("../tasks/allTasksPageContainer.jsx")); +const EmailTest = lazyDev(() => import("../../components/email-test/email-test-component")); +const Dashboard = lazyDev(() => import("../dashboard/dashboard.container")); +const Dms = lazyDev(() => import("../dms/dms.container")); +const DmsPayables = lazyDev(() => import("../dms-payables/dms-payables.container")); +const ManageRootPage = lazyDev(() => import("../manage-root/manage-root.page.container")); +const TtApprovals = lazyDev(() => import("../tt-approvals/tt-approvals.page.container")); +const MyTasksPage = lazyDev(() => import("../tasks/myTasksPageContainer.jsx")); +const AllTasksPage = lazyDev(() => import("../tasks/allTasksPageContainer.jsx")); -const TaskUpsertModalContainer = lazy(() => import("../../components/task-upsert-modal/task-upsert-modal.container")); +const TaskUpsertModalContainer = lazyDev(() => import("../../components/task-upsert-modal/task-upsert-modal.container")); const { Content } = Layout; const mapStateToProps = createStructuredSelector({ diff --git a/client/src/pages/simplified-parts/simplified-parts.page.component.jsx b/client/src/pages/simplified-parts/simplified-parts.page.component.jsx index 354d6ac35..e5afc133a 100644 --- a/client/src/pages/simplified-parts/simplified-parts.page.component.jsx +++ b/client/src/pages/simplified-parts/simplified-parts.page.component.jsx @@ -1,6 +1,6 @@ import * as Sentry from "@sentry/react"; import { FloatButton, Layout, Spin } from "antd"; -import { lazy, Suspense, useEffect } from "react"; +import { Suspense, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Navigate, Route, Routes, useLocation } from "react-router-dom"; @@ -15,20 +15,21 @@ import UpdateAlert from "../../components/update-alert/update-alert.component.js import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors.js"; import InstanceRenderManager from "../../utils/instanceRenderMgr.js"; import useAlertsNotifications from "../../hooks/useAlertsNotifications.jsx"; +import { lazyDev } from "../../utils/lazyWithPreload.jsx"; -const SimplifiedPartsJobsPage = lazy(() => import("../simplified-parts-jobs/simplified-parts-jobs.page.jsx")); -const SimplifiedPartsJobsDetailPage = lazy( +const SimplifiedPartsJobsPage = lazyDev(() => import("../simplified-parts-jobs/simplified-parts-jobs.page.jsx")); +const SimplifiedPartsJobsDetailPage = lazyDev( () => import("../simplified-parts-jobs-detail/simplified-parts-jobs-detail.container.jsx") ); -const PartsSettingsPage = lazy(() => import("../parts-settings/parts-settings.page.component.jsx")); -const ShopVendorPageContainer = lazy(() => import("../shop-vendor/shop-vendor.page.container.jsx")); -const EmailOverlayContainer = lazy(() => import("../../components/email-overlay/email-overlay.container.jsx")); -const ReportCenterModal = lazy(() => import("../../components/report-center-modal/report-center-modal.container.jsx")); -const PrintCenterModalContainer = lazy( +const PartsSettingsPage = lazyDev(() => import("../parts-settings/parts-settings.page.component.jsx")); +const ShopVendorPageContainer = lazyDev(() => import("../shop-vendor/shop-vendor.page.container.jsx")); +const EmailOverlayContainer = lazyDev(() => import("../../components/email-overlay/email-overlay.container.jsx")); +const ReportCenterModal = lazyDev(() => import("../../components/report-center-modal/report-center-modal.container.jsx")); +const PrintCenterModalContainer = lazyDev( () => import("../../components/print-center-modal/print-center-modal.container") ); -const VehiclesContainer = lazy(() => import("../vehicles/vehicles.page.container.jsx")); -const VehiclesDetailContainer = lazy(() => import("../vehicles-detail/vehicles-detail.page.container.jsx")); +const VehiclesContainer = lazyDev(() => import("../vehicles/vehicles.page.container.jsx")); +const VehiclesDetailContainer = lazyDev(() => import("../vehicles-detail/vehicles-detail.page.container.jsx")); const { Content } = Layout; // Redirector to strip '/parts/jobs' from path for non-detail routes diff --git a/client/src/pages/tech/tech.page.component.jsx b/client/src/pages/tech/tech.page.component.jsx index 43b971a38..678536ae4 100644 --- a/client/src/pages/tech/tech.page.component.jsx +++ b/client/src/pages/tech/tech.page.component.jsx @@ -1,5 +1,5 @@ import { Card, FloatButton, Layout } from "antd"; -import { lazy, Suspense, useEffect } from "react"; +import { Suspense, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { connect } from "react-redux"; import { Route, Routes, useNavigate } from "react-router-dom"; @@ -15,25 +15,26 @@ import { selectTechnician } from "../../redux/tech/tech.selectors"; import InstanceRenderManager from "../../utils/instanceRenderMgr"; import "./tech.page.styles.scss"; import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component.jsx"; +import { lazyDev } from "../../utils/lazyWithPreload.jsx"; -const TimeTicketModalContainer = lazy(() => import("../../components/time-ticket-modal/time-ticket-modal.container")); -const EmailOverlayContainer = lazy(() => import("../../components/email-overlay/email-overlay.container.jsx")); -const PrintCenterModalContainer = lazy( +const TimeTicketModalContainer = lazyDev(() => import("../../components/time-ticket-modal/time-ticket-modal.container")); +const EmailOverlayContainer = lazyDev(() => import("../../components/email-overlay/email-overlay.container.jsx")); +const PrintCenterModalContainer = lazyDev( () => import("../../components/print-center-modal/print-center-modal.container") ); -const TechLogin = lazy(() => import("../../components/tech-login/tech-login.component")); -const TechLookup = lazy(() => import("../tech-lookup/tech-lookup.container")); -const ProductionListPage = lazy(() => import("../production-list/production-list.container")); -const ProductionBoardPage = lazy(() => import("../production-board/production-board.container")); -const TechJobClock = lazy(() => import("../tech-job-clock/tech-job-clock.component")); -const TechShiftClock = lazy(() => import("../tech-shift-clock/tech-shift-clock.component")); -const TimeTicketModalTask = lazy( +const TechLogin = lazyDev(() => import("../../components/tech-login/tech-login.component")); +const TechLookup = lazyDev(() => import("../tech-lookup/tech-lookup.container")); +const ProductionListPage = lazyDev(() => import("../production-list/production-list.container")); +const ProductionBoardPage = lazyDev(() => import("../production-board/production-board.container")); +const TechJobClock = lazyDev(() => import("../tech-job-clock/tech-job-clock.component")); +const TechShiftClock = lazyDev(() => import("../tech-shift-clock/tech-shift-clock.component")); +const TimeTicketModalTask = lazyDev( () => import("../../components/time-ticket-task-modal/time-ticket-task-modal.container") ); -const TechAssignedProdJobs = lazy(() => import("../tech-assigned-prod-jobs/tech-assigned-prod-jobs.component")); -const TechDispatchedParts = lazy(() => import("../tech-dispatched-parts/tech-dispatched-parts.page")); +const TechAssignedProdJobs = lazyDev(() => import("../tech-assigned-prod-jobs/tech-assigned-prod-jobs.component")); +const TechDispatchedParts = lazyDev(() => import("../tech-dispatched-parts/tech-dispatched-parts.page")); -const TaskUpsertModalContainer = lazy(() => import("../../components/task-upsert-modal/task-upsert-modal.container")); +const TaskUpsertModalContainer = lazyDev(() => import("../../components/task-upsert-modal/task-upsert-modal.container")); const { Content } = Layout; diff --git a/client/src/utils/lazyWithPreload.jsx b/client/src/utils/lazyWithPreload.jsx new file mode 100644 index 000000000..92732221d --- /dev/null +++ b/client/src/utils/lazyWithPreload.jsx @@ -0,0 +1,35 @@ +import { lazy } from "react"; + +/** + * Conditionally uses lazy loading based on environment. + * By default, uses React.lazy in all environments. + * Set VITE_DISABLE_LAZY_LOADING=true to load modules immediately in development (avoids compilation delays). + * + * Usage: const MyComponent = lazyDev(() => import('./MyComponent')); + */ +export const lazyDev = (importFunc) => { + // Check if lazy loading should be disabled (dev only, opt-in via env var) + const disableLazyLoading = import.meta.env.DEV && import.meta.env?.VITE_DISABLE_LAZY_LOADING === "true"; + + if (!disableLazyLoading) { + // Default behavior: use React.lazy for code splitting + return lazy(importFunc); + } + + // Dev mode with lazy loading disabled: load immediately to avoid delays + let Component = null; + const promise = importFunc().then((module) => { + Component = module.default; + }); + + const LazyDevComponent = (props) => { + if (!Component) { + throw promise; // Suspense will catch this + } + return ; + }; + + LazyDevComponent.displayName = "LazyDevComponent"; + + return LazyDevComponent; +}; diff --git a/client/vite.config.js b/client/vite.config.js index 261873cbd..395f4134c 100644 --- a/client/vite.config.js +++ b/client/vite.config.js @@ -44,12 +44,15 @@ const httpsCerts = { }; export default defineConfig(({ command, mode }) => { - // Only enable React Compiler on build in production/test (keeps dev as fast as possible) + // React Compiler is always enabled for production/test builds + // In dev mode, it's enabled by default but can be disabled with VITE_DISABLE_COMPILER_IN_DEV=true 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)); + (isBuild && (mode === "production" || isTestBuild)) || // Always enable for prod/test builds + process.env?.VITE_DISABLE_COMPILER_IN_DEV !== "true"; // In dev, enable unless explicitly disabled logger.info( enableReactCompiler ? chalk.green.bold("React Compiler enabled") : chalk.yellow.bold("React Compiler disabled")