DevTools in production

[spacecat]

Hi,

Stupid question maybe but what happens with the DevTools component that I have in my forms when I deploy to production?

I have "@hookform/devtools": "^4.3.1", in my devDependencies in package.json but won't my app break in production wherever I'm referencing @hookform/devtools?

[ViewableGravy]

What you might consider doing is a similar approach with most other libraries and their dev tools that should be lazy loaded;

ie. Tanstack Router

So in the case of this particular package, you can likely accomplish the same thing with the below code (untested)

export const HookFormDevtools =
  process.env.NODE_ENV === 'production'
    ? () => null // Render nothing in production
    : React.lazy(() =>
        // Lazy load in development
        import('@hookform/devtools').then((res) => ({
          default: res.DevTool
        })),
      )

Note: I am not a maintainer of this library, this just seems like a common approach that would work in the case of these dev tools, similar to others.

[ahkhanjani]

@spacecat I think it should be mentioned in the readme. As for what happens, if you take a look at rollup/writeCjsEntryFile.js file the bundler handles this case:

if (process.env.NODE_ENV !== 'development') {
  module.exports = {
    DevTool: () => null,
  };
} else {
  ${baseLine}.${formatName}.development.js')
}

So there's no devtools in prod. No need for manual checking.

[spacecat]

@spacecat I think it should be mentioned in the readme. As for what happens, if you take a look at rollup/writeCjsEntryFile.js file the bundler handles this case:

if (process.env.NODE_ENV !== 'development') {
  module.exports = {
    DevTool: () => null,
  };
} else {
  ${baseLine}.${formatName}.development.js')
}

So there's no devtools in prod. No need for manual checking.

@ahkhanjani I agree that it should be mentioned in the docs. I don't think it is ATM, however? I haven't checked recently....

[spacecat]

@bluebill1049 got any directions for how to go about this?

[pcostanz]

@spacecat I use this

import React, { lazy, Suspense } from 'react';

import { Form as FormProvider } from '@wherever-your-shadcn-form-is-located';

import { Debug } from '@/lib/debug'; // an internal debug conditional render wrapper

import type { Control, FieldValues, UseFormReturn } from 'react-hook-form';

const DevTool = lazy(() =>
  import('@hookform/devtools').then((module) => ({ default: module.DevTool }))
);

/**
 * Props for the Form component
 * Extends the Form component props and adds debug-specific functionality
 */
interface FormProps<TFieldValues extends FieldValues = FieldValues> {
  /** The form object from useForm() - can be passed as a prop or spread */
  form?: UseFormReturn<TFieldValues>;
  /** Children to render inside the form */
  children?: React.ReactNode;
  /** Spread props from the form object (for compatibility with Form component) */
  [key: string]: unknown;
}

/**
 * A thin wrapper around the Form (FormProvider) component from @surface/components that
 * conditionally enables the react-hook-form DevTool.
 *
 * This component uses the useDebug hook to determine whether to show the DevTool.
 * The DevTool is dynamically imported to avoid bundling it in production builds
 * when debug mode is disabled.
 *
 * NOTE: There are documented issues with the watch function in react-hook-form
 * when DevTools is enabled. Use the useWatch hook in all cases to avoid this.
 *
 * This component can be used as a drop-in replacement for Form:
 * - With form prop: <Form form={form}>...</Form>
 * - With spread props: <Form {...form}>...</Form>
 *
 * @see {@link useDebug} - Hook that manages debug state
 * @see {@link Form} - The underlying form component
 */
export const Form = <TFieldValues extends FieldValues = FieldValues>({
  form,
  children,
  ...spreadProps
}: FormProps<TFieldValues>) => {
  // Determine the form object - prioritize form prop over spread props
  const formObject = form || (spreadProps as UseFormReturn<TFieldValues>);
  const control = formObject?.control;

  if (
    !formObject ||
    !control ||
    !formObject.watch ||
    !formObject.setValue ||
    !formObject.handleSubmit
  ) {
    console.warn(
      'Form: No valid form object provided - missing required properties'
    );
    return <>{children}</>;
  }

  return (
    <>
      <FormProvider {...formObject}>{children}</FormProvider>
      <Debug>
        <Suspense fallback={null}>
          <DevTool control={control as Control<FieldValues>} />
        </Suspense>
      </Debug>
    </>
  );
};