react-hook-form / devtools

📋 DevTools to help debug forms.
https://react-hook-form.com/dev-tools
MIT License
646 stars 47 forks source link

Importing as ES module, DevTool is included in production build #175

Open jpa00 opened 2 years ago

jpa00 commented 2 years ago

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 commented 2 years ago

+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 commented 2 years ago

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

AdiRishi commented 1 year ago

Any updates on this issue?

timsofteng commented 1 year ago

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

burnedikt commented 1 year ago

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 commented 1 year ago

+1 any updates?

RomainMorlevat commented 10 months ago

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

edit: it's not working :confused:

ShahadatAnik commented 1 month ago

+1 Any Update?