Error with Vite on build

[Drilio]

Hello, I try to use hCaptcha into my react app but I've got an error with Vite. I use TypeScript and I think this is the hcaptcha/types package that cause the error.

import HCaptcha from "@hcaptcha/react-hcaptcha";

const myComponent = ()=> {
  const [token, setToken] = useState<any>(null);
  const captchaRef = useRef(null);

  const onLoad = () => {
    // this reaches out to the hCaptcha JS API and runs the
    // execute function on it. you can use other functions as
    // documented here:
    // https://docs.hcaptcha.com/configuration#jsapi
    hcaptcha.execute();
  };


  useEffect(() => {

    if (token)
      console.log(`hCaptcha Token: ${token}`);

  }, [token]);

return(
        <form>
          <HCaptcha
            sitekey="your-sitekey"
            onLoad={onLoad}
            onVerify={setToken}
            ref={captchaRef}
          />
        </form>
)
}

the error at built is the following :

------                                                                                                                                                                                                                                
 > [frontend 8/8] RUN npm run build:                                                                                                                                                                                                  
0.371                                                                                                                                                                                                                                 
0.371 > [email protected] build                                                                                                                                                                                                     
0.371 > tsc && vite build                                                                                                                                                                                                             
0.371 
7.872 vite v5.3.5 building for production...
7.953 transforming...
10.46 ✓ 806 modules transformed.
10.47 x Build failed in 2.56s
10.47 error during build:
10.47 [commonjs--resolver] Failed to resolve entry for package "@hcaptcha/types". The package may have incorrect main/module/exports specified in its package.json.
10.47     at packageEntryFailure (file:///app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:46351:15)
10.47     at resolvePackageEntry (file:///app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:46348:3)
10.47     at tryNodeResolve (file:///app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:46164:16)
10.47     at Object.resolveId (file:///app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:45914:19)
10.47     at file:///app/node_modules/rollup/dist/es/shared/node-entry.js:19774:40
10.47     at async PluginDriver.hookFirstAndGetPlugin (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:19674:28)
10.47     at async resolveId (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:18355:26)
10.47     at async ModuleLoader.resolveId (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:18758:15)
10.47     at async Object.resolveId (file:///app/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:12802:10)
10.47     at async PluginDriver.hookFirstAndGetPlugin (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:19674:28)
------
failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1

Is this a known issue and I missed something ?

[zoryana94]

Hi @Drilio,

Thank you a lot for notifying us! I tried to reproduce it, though I received successful builds for vite v5.3.5 (I see you're using it), vite v5.4.10, and vite v4.2.1 Do you use the latest version of react-hcaptcha? Maybe you can provide some more info on how to reproduce the issue

We also welcome any contributions to the project If you will find the solution, please do not hesitate to create the PR with the fix

By the way, you can execute hcaptcha the following way:

const executeCaptcha = async () => {
    if (!captchaRef?.current) {
      return;
    }

    try {
      const captchaResponse = await captchaRef.current.execute({
        async: true
      });
      const { response: responseToken } = captchaResponse;

      console.log('Verified asynchronously: ', responseToken);
    } catch (error) {
      console.log(error);
    }
  };

  const onLoad = () => {
    executeCaptcha();
  };

Best Regards, hCaptcha Dev Team