Add NextJS / Preact matrix to CI tests

e271828- commented 1 year ago

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

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

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

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

Hi @thathurtabit ,

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

Best Regards, IMI Dev Team

hCaptcha / react-hcaptcha

Add NextJS / Preact matrix to CI tests #180