Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
DonationWidget
✓ import { DonationWidget } from 'clarety-widgets'
✗ import DonationWidget from 'clarety-widgets'
Named export, not default export.
CheckoutWidget
✓ import { CheckoutWidget } from 'clarety-widgets'
✗ const CheckoutWidget = require('clarety-widgets').CheckoutWidget
ESM-only package; CJS require not supported.
UpdatePaymentDetailsWidget
✓ import { UpdatePaymentDetailsWidget } from 'clarety-widgets'
✗ import { UpdatePaymentDetails } from 'clarety-widgets'
Full component name is UpdatePaymentDetailsWidget, not shortened.
WidgetConfig
✓ import type { WidgetConfig } from 'clarety-widgets'
✗ import { WidgetConfig } from 'clarety-widgets'
Type import recommended for TypeScript users; it is a type.
Basic setup of a DonationWidget with required config and Bootstrap CSS.
import React from 'react';
import { DonationWidget } from 'clarety-widgets';
import 'bootstrap/dist/css/bootstrap.min.css';
const config = {
apiKey: process.env.CLARETY_API_KEY ?? '',
organizationId: 'org_123',
campaignId: 'camp_456',
topCountries: ['US', 'CA', 'GB']
};
function App() {
return (
<div className="App">
<h1>Donate Now</h1>
<DonationWidget config={config} />
</div>
);
}
export default App;
Debug
Known issues
breakingReact 16.8+ required; will not work with older React versions.fixUpgrade React to 16.8 or later.
affects: >=0.0.0
breakingESM-only package; CommonJS require() will fail.fixUse import syntax or configure bundler to handle ESM.
affects: >=13.0.0
deprecatedVersion 12.x branches are no longer receiving new features; only critical fixes.fixUpgrade to v13.x for latest features.
affects: >=12.0.0 <13.0.0
gotchaBootstrap CSS must be imported separately; not included in the package.fixAdd 'import "bootstrap/dist/css/bootstrap.min.css";' in your entry point.
affects: >=0.0.0
gotchaConfiguration object may be passed as `config` prop; other prop names might not work.fixUse `config` prop for configuration object.
affects: >=12.0.0
breakingNode 22.11.0 or later required for build; lower Node versions may cause issues.fixUpgrade Node to v22.11.0+.
affects: >=13.0.0
gotchaLoqate address autocomplete requires extra configuration and API key.fixSet Loqate API key in config under `loqate` key.
affects: >=13.0.3
Errors
Common errors & fixes
Error: Cannot find module 'clarety-widgets'
Package not installed or version mismatch.
fixRun 'npm install clarety-widgets@13.0.6'.
TypeError: Cannot read properties of undefined (reading 'apiKey')
Config prop not passed or missing required fields.
fixEnsure you pass a config object with required `apiKey`, `organizationId`, and `campaignId`.
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function but got: object
Default import instead of named import for a widget.
fixUse named import: import { DonationWidget } from 'clarety-widgets'. Audit
Dependencies
bootstraprequiredPeer dependency for styling
reactrequiredPeer dependency for React components
react-bootstraprequiredPeer dependency for React Bootstrap integration
react-domrequiredPeer dependency for DOM rendering