fontdue-js 3.2.1 → 3.2.2

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 3.2.2
+
+- **Fixed the reCAPTCHA forms failing to server-render under Vite SSR** (Astro, and any framework whose dev SSR externalizes CJS deps through Node's ESM interop). 3.2.1 switched to `react-google-recaptcha`'s default export, which bundlers honouring the `__esModule` marker (webpack/Next, and Vite's browser optimizer) unwrap straight to the widget wrapper — but Node's strict ESM↔CJS interop models that same default import as the whole module *namespace*, so `<ReCAPTCHA>` was an object at SSR time. React threw "Element type is invalid … got: object" and the checkout, `NewsletterSignup` and `TestFontsForm` islands fell back to client rendering with a console error. The re-export now normalises the binding (`__esModule ? .default : obj`), resolving the wrapper on every path. A no-op for webpack and Vite's browser build. No public API change.
+
 ## 3.2.1
 
 - **Fixed checkout, newsletter signup and trial-font downloads hanging forever on reCAPTCHA-enabled foundries.** `StoreModalUnifiedCheckout`, `NewsletterSignup` and `TestFontsForm` imported the *named* `ReCAPTCHA` export from `react-google-recaptcha` — the barebone widget, which never injects Google's `api.js` and expects you to supply `grecaptcha` yourself. So the invisible widget rendered an empty `<div>`, `window.grecaptcha` stayed undefined, `execute()` was a permanent silent no-op, and the submit button froze on "Submitting…" with no network request and no error. All three forms now use the package's default export (the `react-async-script` wrapper that actually loads the script). This has affected every release since 3.0.0. As defence in depth, each form also arms a 15-second timeout after calling `execute()`: if the reCAPTCHA script never loaded, the form resets and surfaces an inline error so the buyer can retry, while a challenge already in progress is never cancelled. No public API change — no new or changed props.

package/dist/components/Recaptcha.js

@@ -15,11 +15,24 @@
 // error. This module re-exports the wrapper under the same name so callers get
 // the working component.
 //
-// nodenext models this CJS package's default import as the whole module
-// namespace (the @types package declares an ESM `export default` over a CJS
-// runtime), so the default binding isn't directly usable as a JSX component.
-// We cast it to the widget class type. react-async-script forwards refs to the
-// inner widget, so `.execute()` / `.reset()` / `.getValue()` still work through
-// a ref typed as the class.
-import ReCAPTCHAImpl from 'react-google-recaptcha';
-export const ReCAPTCHA = ReCAPTCHAImpl;
+// Interop caveat — why we normalise the default binding instead of re-exporting
+// it directly: react-google-recaptcha is CJS. Bundlers that honour the
+// `__esModule` marker (webpack/Next, and Vite's *browser* optimizer, which
+// `fontdue-js/vite` pre-bundles this package through) unwrap `import Default
+// from 'react-google-recaptcha'` straight to the wrapper. But Node's strict
+// ESM↔CJS interop — which Vite *dev SSR* uses for this externalized dep — models
+// the same default import as the whole module *namespace*
+// (`{ __esModule, default, ReCAPTCHA }`), not the wrapper. Re-exporting that
+// object made `<ReCAPTCHA>` an object at SSR time, so React threw "Element type
+// is invalid … got: object" and the reCAPTCHA form islands failed to
+// server-render (they fell back to client rendering with a console error).
+// Applying the standard `obj.__esModule ? obj.default : obj` normalisation here
+// resolves the wrapper on every path — webpack, Vite browser, and Node/Vite SSR.
+// react-async-script forwards refs to the inner widget, so `.execute()` /
+// `.reset()` / `.getValue()` still work through a ref typed as the class.
+import ReCAPTCHADefault from 'react-google-recaptcha';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const mod = ReCAPTCHADefault;
+const Wrapper = mod && mod.__esModule && mod.default ? mod.default : mod;
+export const ReCAPTCHA = Wrapper;

package/dist/relay/environment.js

@@ -8,7 +8,7 @@ import { NODE_ACCESS_HEADER } from '../nodeAccess.js';
 // (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
 // Exported so UI (the admin toolbar) can surface it without re-reading the
 // build-time global in a 'use client' module.
-export const version = "3.2.1";
+export const version = "3.2.2";
 const IS_SERVER = typeof window === typeof undefined;
 
 // Opt server fetches into Next's data cache only in production; dev stays

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",