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.