Importing as ES module, DevTool is included in production build

[jpa00]

As the title says, when a project by default imports and builds everything from ES modules, hookform's DevTool import returns the entire code even in production builds, instead of the noop of the default import.

Depending on the environment, a quick workaround may be to import from /dist/index for now, which returns either the CommonJS-version or a noop DevTool.

[AdiRishi]

+1 I just came across this as well (building a React app with Vite)

Made a quick demo to showcase the problem - https://stackblitz.com/edit/github-ei8jpp?file=src/Home/index.tsx

[steveoh]

Is this going to be addressed or should we use the work around?

[AdiRishi]

Any updates on this issue?

[timsofteng]

+1
@bluebill1049 may you take a look at this issue please?

[burnedikt]

A workaround (that could turn into a solution) inspired by react-query-devtools that worked for me is to create the following file and always import the DevTool from there:

hookform-devtools.ts

import * as hookFormDevTools from "@hookform/devtools";

export const DevTool: (typeof hookFormDevTools)["DevTool"] =
  process.env.NODE_ENV !== "development"
    ? function () {
        return null;
      }
    : hookFormDevTools.DevTool;

then change your import from

- import { DevTool } from "@hookform/devtools";
+ import { DevTool } from "../hookform-devtools";

[hadson172]

+1 any updates?

[RomainMorlevat]

My workaround:
{import.meta.env.VITE_RHF_DEVTOOLS && <DevTool control={control} />}

edit: it's not working 😕