refactor: disable react compiler

2026-08-13 03:13:47 +00:00 · 2025-07-13 08:12:02 +02:00
parent e5f8a99bff
commit fd9bf0120c
16 changed files with 49 additions and 24 deletions
@@ -41,8 +41,8 @@ interface AutomationFormProps {
  onClose: () => void;
 }

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

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

  const {
    handleSubmit,
@@ -23,8 +23,15 @@ interface OntimeActionFormProps {
  setValue: UseFormSetValue<AutomationDTO>;
 }

-export default function OntimeActionForm(props: PropsWithChildren<OntimeActionFormProps>) {
-  const { index, register, setValue, rowErrors, value, children, watch } = props;
+export default function OntimeActionForm({
+  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'
@@ -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,
@@ -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);

@@ -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,
@@ -25,8 +25,14 @@ interface CustomFieldsFormProps {

 type CustomFieldFormData = CustomField & { key: string };

-export default function CustomFieldForm(props: CustomFieldsFormProps) {
-  const { onSubmit, onCancel, initialColour, initialLabel, initialKey } = props;
+export default function CustomFieldForm({
+  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
@@ -24,8 +24,14 @@ interface ImportMapFormProps {
  onSubmitImport: (importMap: ImportMap) => Promise<void>;
 }

-export default function ImportMapForm(props: ImportMapFormProps) {
-  const { hasErrors, isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
+export default function ImportMapForm({
+  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 {
@@ -22,9 +22,8 @@ type ProjectCreateFormValues = {
  custom?: { title: string; value: string }[];
 };

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

  const {
@@ -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,
@@ -27,8 +27,8 @@ type ProjectMergeFormValues = {
  automation: boolean;
 };

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

@@ -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,
@@ -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 {
@@ -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();

@@ -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 {
@@ -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({
-      babel: {
-        plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],
-      },
-    }),
+    react(),
    svgrPlugin(),
    !isDev &&
      sentryVitePlugin({