Add NextJS / Preact matrix to CI tests

[e271828-]

v1.5.0 introduced a breaking change in NextJS, as we don't have specific test coverage for it.

It seems like either a test matrix or explicit integration tests are the way to go here.

[thathurtabit]

On this issue, I'm using "next": "13.2.4" and have been running into the following problems when running npm run next build:

info  - Collecting page data ...ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and ...\node_modules\@hcaptcha\react-hcaptcha\package.json' contains "type": 
"module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at .../node_modules/@hcaptcha/react-hcaptcha/dist/index.js:3:31

Using next 13's transpilePackages option (docs here) in next.config.mjs, i.e.

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  transpilePackages: ['@hcaptcha/react-hcaptcha'], // <--- HERE
};
export default config;

You then run into this error in next build:

./src/pages/account/sign-in/index.tsx
Attempted import error: '@hcaptcha/react-hcaptcha' does not contain a default export (imported as 'HCaptcha').

info  - Collecting page data ..Error: Cannot find module './utils.js'

I don't have a utils.js file in my code, so I'm guessing this must come from @hcaptcha/react-hcaptcha package? 🤔

Also the @hcaptcha/react-hcaptcha docs do mention using the default export, i.e.
import HCaptcha from "@hcaptcha/react-hcaptcha"; - which I'm using.

[zoryana94]

Hi @thathurtabit,

Which version of react-hcaptcha gives you the following error?
It looks similar to the issue we've had with 1.5.0.
It should be fixed in our latest 1.6.0 release

If you still have that issue when using the latest react-hcaptcha 1.6.0, could you please provide more details on how to reproduce it?

Also please feel free to contribute to the project. We really appreciate it.

Best Regards,
IMI Dev Team

[thathurtabit]

Hi @zoryana94 - sorry, my bad. My package.json was showing "@hcaptcha/react-hcaptcha": "^1.6.0" but my package-lock.json was still using "@hcaptcha/react-hcaptcha": "^1.4.4", maybe I just hadn't regenerated the lock file after updating. I can confirm ^1.6.0 seems to fix the issue 👍 thanks!

Also, I should mention I didn't need to use next's transpilePackages setting for ^1.6.0 to work. 💥

[zoryana94]

Hi @thathurtabit ,

Thank you for confirming! We appreciate your help a lot!
Hope you enjoy your experience with hCaptcha!

Best Regards,
IMI Dev Team