refactor: disable react compiler

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx

@@ -41,8 +41,8 @@ interface AutomationFormProps {
   onClose: () => void;
 }
 
-export default function AutomationForm(props: AutomationFormProps) {
+export default function AutomationForm({ automation, onClose }: AutomationFormProps) {
-  const { automation, onClose } = props;
+  'no memo'; // RHF and react-compiler dont seem to get along
   const isEdit = isAutomation(automation);
   const { data } = useCustomFields();
   const { refetch } = useAutomationSettings();

apps/client/src/features/app-settings/panel/automations-panel/AutomationSettingsForm.tsx

@@ -20,8 +20,12 @@ interface AutomationSettingsProps {
   oscPortIn: number;
 }
 
-export default function AutomationSettingsForm(props: AutomationSettingsProps) {
+export default function AutomationSettingsForm({
-  const { enabledAutomations, enabledOscIn, oscPortIn } = props;
+  enabledAutomations,
+  enabledOscIn,
+  oscPortIn,
+}: AutomationSettingsProps) {
+  'no memo'; // RHF and react-compiler dont seem to get along
 
   const {
     handleSubmit,

apps/client/src/features/app-settings/panel/automations-panel/OntimeActionForm.tsx

@@ -23,8 +23,15 @@ interface OntimeActionFormProps {
   setValue: UseFormSetValue<AutomationDTO>;
 }
 
-export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFormProps>) {
+export default function OntimeActionForm({
-  const { index, register, setValue, rowErrors, value, children, watch } = props;
+  index,
+  register,
+  setValue,
+  rowErrors,
+  value,
+  children,
+  watch,
+}: PropsWithChildren<OntimeActionFormProps>) {
   const [selectedAction, setSelectedAction] = useState<string>(value);
 
   const handleSetAction = (value: OntimeActionKey) => {
@@ -70,7 +77,7 @@ export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFo
           New time
           <Input
             {...register(`outputs.${index}.time`, {
-              required: { value: true, message: 'Required field' },  //TODO:(automation set aux) not sure what way around to have the string and where to have the ms value
+              required: { value: true, message: 'Required field' }, //TODO:(automation set aux) not sure what way around to have the string and where to have the ms value
             })}
             fluid
             placeholder='eg: 10m5s'

apps/client/src/features/app-settings/panel/automations-panel/TriggerForm.tsx

@@ -31,6 +31,7 @@ export default function TriggerForm({
   onCancel,
   postSubmit,
 }: TriggerFormProps) {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const {
     handleSubmit,
     register,

apps/client/src/features/app-settings/panel/feature-panel/GenerateLinkForm.tsx

@@ -1,3 +1,5 @@
+'use no memo'; // RHF and react-compiler don't seem to get along
+
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import QRCode from 'react-qr-code';
@@ -32,6 +34,7 @@ interface GenerateLinkFormOptions {
 type GenerateLinkState = 'pending' | 'loading' | 'success' | 'error';
 
 export default function GenerateLinkForm({ hostOptions, pathOptions, isLockedToView }: GenerateLinkFormProps) {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const [formState, setFormState] = useState<GenerateLinkState>('pending');
   const [url, setUrl] = useState(serverURL);
 

apps/client/src/features/app-settings/panel/feature-panel/UrlPresetsForm.tsx

@@ -27,6 +27,7 @@ type FormData = {
 };
 
 export default function UrlPresetsForm() {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const { data, status, refetch } = useUrlPresets();
   const {
     control,

apps/client/src/features/app-settings/panel/manage-panel/composite/CustomFieldForm.tsx

@@ -25,8 +25,14 @@ interface CustomFieldsFormProps {
 
 type CustomFieldFormData = CustomField & { key: string };
 
-export default function CustomFieldForm(props: CustomFieldsFormProps) {
+export default function CustomFieldForm({
-  const { onSubmit, onCancel, initialColour, initialLabel, initialKey } = props;
+  onSubmit,
+  onCancel,
+  initialColour,
+  initialLabel,
+  initialKey,
+}: CustomFieldsFormProps) {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const { data } = useCustomFields();
 
   // we use this to force an update

apps/client/src/features/app-settings/panel/manage-panel/sources-panel/import-map/ImportMapForm.tsx

@@ -24,8 +24,14 @@ interface ImportMapFormProps {
   onSubmitImport: (importMap: ImportMap) => Promise<void>;
 }
 
-export default function ImportMapForm(props: ImportMapFormProps) {
+export default function ImportMapForm({
-  const { hasErrors, isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
+  hasErrors,
+  isSpreadsheet,
+  onCancel,
+  onSubmitExport,
+  onSubmitImport,
+}: ImportMapFormProps) {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const namedImportMap = getPersistedOptions();
   const { revoke } = useGoogleSheet();
   const {

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -22,9 +22,8 @@ type ProjectCreateFormValues = {
   custom?: { title: string; value: string }[];
 };
 
-export default function ProjectCreateForm(props: ProjectCreateFromProps) {
+export default function ProjectCreateForm({ onClose }: ProjectCreateFromProps) {
-  const { onClose } = props;
+  'use no memo'; // RHF and react-compiler don't seem to get along
-
   const [error, setError] = useState<string | null>(null);
 
   const {

apps/client/src/features/app-settings/panel/project-panel/ProjectForm.tsx

@@ -20,6 +20,7 @@ interface ProjectFormProps {
 }
 
 export default function ProjectForm({ action, filename, onSubmit, onCancel }: ProjectFormProps) {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const {
     handleSubmit,
     register,

apps/client/src/features/app-settings/panel/project-panel/ProjectMergeForm.tsx

@@ -27,8 +27,8 @@ type ProjectMergeFormValues = {
   automation: boolean;
 };
 
-export default function ProjectMergeForm(props: ProjectMergeFromProps) {
+export default function ProjectMergeForm({ onClose, fileName }: ProjectMergeFromProps) {
-  const { onClose, fileName } = props;
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const [error, setError] = useState<string | null>(null);
   const queryClient = useQueryClient();
 

apps/client/src/features/app-settings/panel/settings-panel/GeneralSettings.tsx

@@ -16,6 +16,7 @@ import * as Panel from '../../panel-utils/PanelUtils';
 import GeneralPinInput from './composite/GeneralPinInput';
 
 export default function GeneralSettings() {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const { data, status, refetch } = useSettings();
   const {
     handleSubmit,

apps/client/src/features/app-settings/panel/settings-panel/ProjectData.tsx

@@ -18,6 +18,7 @@ import * as Panel from '../../panel-utils/PanelUtils';
 import style from './SettingsPanel.module.scss';
 
 export default function ProjectData() {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const { data, status, refetch } = useProjectData();
 
   const {

apps/client/src/features/app-settings/panel/settings-panel/ViewSettings.tsx

@@ -18,6 +18,7 @@ import CodeEditorModal from './composite/StyleEditorModal';
 const cssOverrideDocsUrl = 'https://docs.getontime.no/features/custom-styling/';
 
 export default function ViewSettings() {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const { data, isPending, mutateAsync } = useViewSettings();
   const [isCodeEditorOpen, codeEditorHandler] = useDisclosure();
 

apps/client/src/features/app-settings/quick-start/QuickStart.tsx

@@ -20,6 +20,7 @@ interface QuickStartProps {
 }
 
 export default function QuickStart({ isOpen, onClose }: QuickStartProps) {
+  'use no memo'; // RHF and react-compiler don't seem to get along
   const { defaultWarnTime, defaultDangerTime, setDangerTime, setWarnTime } = useEditorSettings();
 
   const {

apps/client/vite.config.js

@@ -9,18 +9,11 @@ import { ONTIME_VERSION } from './src/ONTIME_VERSION';
 
 const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN;
 const isDev = process.env.NODE_ENV === 'local' || process.env.NODE_ENV === 'development';
-const ReactCompilerConfig = {
-  runtimeModule: '@/mycache',
-};
 
 export default defineConfig({
   base: './', // Ontime cloud: we use relative paths to allow them to reference a dynamic base set at runtime
   plugins: [
-    react({
+    react(),
-      babel: {
-        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
-      },
-    }),
     svgrPlugin(),
     !isDev &&
       sentryVitePlugin({