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....