Registry /
web-framework / babel-plugin-react-inline-svg-unique-id
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.
default
✓ module.exports = require('babel-plugin-react-inline-svg-unique-id')
✗ import babelPluginReactInlineSvgUniqueId from 'babel-plugin-react-inline-svg-unique-id'
CommonJS only; no default ESM export. Use require in Babel config.
useUniqueInlineId
✓ import { useUniqueInlineId } from '@inline-svg-unique-id/react'
✗ import useUniqueInlineId from '@inline-svg-unique-id/react'
Named export from the runtime package.
Provider
✓ import { Provider } from '@inline-svg-unique-id/react'
✗ import { UniqueIdGeneratorProvider } from '@inline-svg-unique-id/react'
Named export; also available as UniqueIdGeneratorProvider alias for clarity.
Shows setup with Babel config, Provider wrapper, and hook usage to generate unique SVG definition IDs.
// Install: npm install babel-plugin-react-inline-svg-unique-id @inline-svg-unique-id/react
// .babelrc
{
"plugins": ["react-inline-svg-unique-id"]
}
// App.jsx
import { Provider as UniqueIdGeneratorProvider } from '@inline-svg-unique-id/react';
const YourApp = () => (
<UniqueIdGeneratorProvider>
<Icon />
<Icon />
</UniqueIdGeneratorProvider>
);
// Icon.jsx
import { useUniqueInlineId } from '@inline-svg-unique-id/react';
const Icon = () => {
const gradientId = useUniqueInlineId();
return (
<svg>
<defs>
<linearGradient id={gradientId}>
<stop offset="0%" stopColor="red" />
</linearGradient>
</defs>
<ellipse fill={`url(#${gradientId})`} />
</svg>
);
};
Errors
Common errors & fixes
Error: Cannot find module '@inline-svg-unique-id/react'
The runtime dependency is not installed.
fixnpm install @inline-svg-unique-id/react
The id 'grad1' is already defined, skipping definition
Missing Provider wrapper causing ID collision warning from browser.
fixWrap your app with <Provider> from '@inline-svg-unique-id/react'.
Attempted import error: 'useUniqueInlineId' is not exported from '@inline-svg-unique-id/react'
Using incorrect import syntax (default import instead of named).
fixUse import { useUniqueInlineId } from '@inline-svg-unique-id/react' Audit
Dependencies
@inline-svg-unique-id/reactrequiredRuntime dependency provides useUniqueInlineId hook and Provider for SSR