Skip to content

Troubleshooting

Common problems and their fixes. All guidance is based on how TSkeleton is actually implemented.

Table of Contents

The component does not render

Components are only registered when the code that registers them has run. Make sure you have called registerAll() or imported the component's subpath, or that you loaded the UMD bundle via a <script> tag.

Check the browser console for errors such as Uncaught ReferenceError: customElements is not defined — that indicates the code ran in an environment without Web Components support.

Nothing happens after importing in a Node or SSR context

By design, defineSkeleton(), registerAll() and configure() no-op outside the browser, and SkeletonBase falls back to a plain class. This makes imports SSR-safe. Register components inside the browser, for example in a useEffect (React) or onMounted (Vue) hook. See Usage.

The custom element name appears twice in warnings

registerAll() is idempotent and defineSkeleton() ignores duplicates, so repeated registration is safe and does not throw. No action needed.

Styling with ::part() has no effect

Parts are only exposed on elements that carry a part attribute in the component template. The built-in parts are card, avatar, media, shimmer and line. For custom skeletons you write yourself, add part="..." attributes to the blocks you want to target. See API Reference.

My theme attribute is ignored

Attribute values map to CSS custom properties on the host element. An inline style or a more specific CSS rule on the element can override them. Also confirm you used the exact attribute names: color, color-dark, color-light, highlight, radius, duration, card-bg, card-radius, variant. See Configuration.

npm install tskeleton fails with 404

The package has not been published to the npm registry yet. Install from GitHub until it is:

npm install github:rkriad585/TSkeleton

The build output directory looks incomplete

The build runs four steps in sequence (build:main, build:umd, build:sub, build:css). If a step fails, run npm run build again and check the output for errors. Each step uses emptyOutDir: false (except the first) so the bundles write into the same dist/ directory.

npm run dev does not start the playground

Make sure dependencies are installed (npm install) and that Node.js >= 18 is available, per the engines field in package.json. The dev server serves index.html at http://localhost:5173.

Back to README