Hooks exports have incorrect references

[KoenPasman]

Im trying to use the provider/hook but running into these errors upon compile:
I'm using it like this:

import { HCaptchaProvider, useHCaptcha } from '@hcaptcha/react-hcaptcha/hooks';

Getting these errors:

ERROR in ./node_modules/@hcaptcha/react-hcaptcha/dist/esm/hooks/useHCaptcha.tsx 3:0-48
Module not found: Error: Can't resolve './Context.jsx' in '/<redacted>/node_modules/@hcaptcha/react-hcaptcha/dist/esm/hooks'
 @ ./node_modules/@hcaptcha/react-hcaptcha/dist/esm/hooks/index.js 1:0-48 1:0-48
 @ ./client/src/context/captcha.js 8:0-79 19:6-17 56:10-21 72:30-46
 @ ./client/src/containers/Event/index.js 20:0-59 147:39-61
 @ ./client/src/containers/EventContainer/index.js 18:0-39 102:35-40
 @ ./client/src/router/main.js 8:0-57 83:40-54
 @ ./client/src/app.js 13:0-39 123:34-44
 @ ./client/src/index.js 12:0-24 22:43-46

ERROR in ./client/src/context/captcha.js 72:30-46
export 'HCaptchaProvider' (imported as 'HCaptchaProvider') was not found in '@hcaptcha/react-hcaptcha/hooks' (possible exports: useHCaptcha)
 @ ./client/src/containers/Event/index.js 20:0-59 147:39-61
 @ ./client/src/containers/EventContainer/index.js 18:0-39 102:35-40
 @ ./client/src/router/main.js 8:0-57 83:40-54
 @ ./client/src/app.js 13:0-39 123:34-44
 @ ./client/src/index.js 12:0-24 22:43-46

ERROR in ./node_modules/@hcaptcha/react-hcaptcha/dist/esm/hooks/index.js 2:0-50
Module not found: Error: Can't resolve './Provider.jsx' in '/<redacted>/node_modules/@hcaptcha/react-hcaptcha/dist/esm/hooks'
 @ ./client/src/context/captcha.js 8:0-79 19:6-17 56:10-21 72:30-46
 @ ./client/src/containers/Event/index.js 20:0-59 147:39-61
 @ ./client/src/containers/EventContainer/index.js 18:0-39 102:35-40
 @ ./client/src/router/main.js 8:0-57 83:40-54
 @ ./client/src/app.js 13:0-39 123:34-44
 @ ./client/src/index.js 12:0-24 22:43-46

In the dist output i'm seeing a line like this:

export { HCaptchaProvider } from "./Provider.jsx";

But Provider.jsx does not exist, only Provider.js. Similar issue with Context.jsx not existing.

[KoenPasman]

As a temporary resolution I configured webpack to do some aliasing for this module:

      new webpack.NormalModuleReplacementPlugin(/(\.jsx$)|(Context$)/, (resource) => {
        if (resource.context.includes('@hcaptcha/react-hcaptcha')) {
          if (resource.request.endsWith('.jsx')) {
            // eslint-disable-next-line no-param-reassign
            resource.request = resource.request.replace(/\.jsx$/, '.js');
          } else if (resource.request.endsWith('Context')) {
            // eslint-disable-next-line no-param-reassign
            resource.request = `${resource.request}.js`;
          }
        }
      }),

[zoryana94]

Hi @KoenPasman ,
Just prepared this PR: #341 to fix the issue
Thank you a lot for notifying!

[e271828-]

Fixed in 1.17.4, now released. Thanks!

[KoenPasman]

@zoryana94 Thanks for the quick action! It looks like the references in the code are fixed but the filenames are now showing as .jsx instead of .js?

[zoryana94]

@KoenPasman please check it in the dist/
or does it cause any issues? if yes, could you please add more details?

[KoenPasman]

@zoryana94 You're right, i was looking in the wrong place. However, im still getting errors while compiling because I believe ES Module require file extensions to be used in the imports.

This would mean that

export { HCaptchaProvider } from "./Provider";

Is not supported and should be something like

export { HCaptchaProvider } from "./Provider.js";

[zoryana94]

@KoenPasman could you please send te screenshot of the issues?

[KoenPasman]

[zoryana94]

@KoenPasman what node version do you use? and what is your build setup?
any other details for us to reproduce the issue?

[KoenPasman]

It's a pretty old setup: Node v18, Webpack 5.97.1

Also using an old version of create-react-app boilerplate