solid-js

library1.9.12jsnpmunverified

SolidJS is a declarative JavaScript library for building user interfaces, currently stable at version 1.9.12, with a 2.0 beta release recently announced. It distinguishes itself from other UI libraries by compiling JSX templates directly to real DOM operations and fine-grained reactive primitives, avoiding a virtual DOM. This approach typically leads to excellent performance characteristics and a smaller bundle size. Solid focuses on explicit reactivity through signals, memos, and effects, providing granular control over updates without component re-renders. The project maintains a regular release cadence, primarily focusing on quality-of-life improvements and performance optimizations within the 1.x line, while actively developing the significant architectural changes and API re-evaluations slated for the upcoming 2.0 release.

web-framework

npm install solid-js

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SOLID-JS

solid-js

web-frameworkjavascriptv1.9.12

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createSignal

✓ import { createSignal } from 'solid-js';

✗ const createSignal = require('solid-js').createSignal;

SolidJS is primarily consumed as an ES module. While CommonJS might work with some build setups, ESM imports are standard. Signals are functions: call `signal()` to get its value.

render

✓ import { render } from 'solid-js/web';

✗ import { render } from 'solid-js'; // or const render = require('solid-js/web').render;

The `render` function for mounting Solid applications to the DOM is specifically exported from the `solid-js/web` entry point, not the main `solid-js` package. Ensure correct path for browser rendering.

For

✓ import { For } from 'solid-js';

✗ import For from 'solid-js';

Solid's control flow components like `For`, `Show`, `Switch`, `Match`, and `Suspense` are named exports from the main `solid-js` package, not default exports.

Demonstrates a basic SolidJS component using `createSignal` for state, `createEffect` for side effects, and `render` to mount the application to the DOM. It shows a simple interactive counter.

import { createSignal, createEffect, onCleanup } from 'solid-js'; import { render } from 'solid-js/web'; function Counter() { const [count, setCount] = createSignal(0); createEffect(() => { console.log(`Current count: ${count()}`); // Example of cleanup logic for an effect onCleanup(() => console.log('Cleaning up effect for count change.')); }); return ( <div> <h1>SolidJS Counter</h1> <p>Count: {count()}</p> <button onClick={() => setCount(c => c + 1)}>Increment</button> <button onClick={() => setCount(c => c - 1)}>Decrement</button> </div> ); } const appRoot = document.getElementById('app'); if (appRoot) { render(() => <Counter />, appRoot); } else { console.error("Element with id 'app' not found."); }

Debug

Known issues

breakingThe announcement of Solid 2.0 Beta (v2.0.0-beta.0) signifies an upcoming major version with likely significant breaking changes, API re-evaluations, and a focus on migration strategies. Developers should review the roadmap and beta releases for changes.

fix

Consult the SolidJS 2.0 migration guide and beta release notes for specific API changes and recommended migration paths before upgrading.

affects: >=2.0.0-beta.0

deprecatedStarting with v1.7.0, Solid began a migration roadmap to v2.0, introducing new APIs while reasonably deprecating existing ones. Developers should monitor release notes for specific deprecation warnings and future removal plans.

fix

Regularly check SolidJS release notes and documentation for deprecated APIs and transition to recommended alternatives as they become available.

affects: >=1.7.0

gotchaFeatures like streaming HTML, isomorphic error boundaries, multiple async hydration roots, partial hydration, and islands (introduced in v1.3.0 and v1.6.0) can be challenging to configure correctly, often leading to hydration mismatches or performance issues if not handled precisely.

fix

Carefully follow SolidStart and SolidJS documentation for Server-Side Rendering (SSR) and hydration best practices. Ensure server and client render trees are identical, especially concerning conditional logic.

affects: >=1.3.0

breakingA long-standing issue with proper merging of JSX spreads on native elements was addressed in v1.6.0. This fix might alter behavior for applications that previously relied on or implicitly handled the buggy spread merging, potentially requiring adjustments.

fix

Test your application's components that use JSX spreads extensively after upgrading to v1.6.0 or later, and adjust attribute handling if behavior changes are observed.

affects: >=1.6.0

gotchaThe `createUniqueId` utility (introduced in v1.1.0), while universal, only guarantees unique IDs on the server when used within hydratable components. Its behavior in non-hydratable server contexts might not meet expectations for uniqueness across multiple server renders.

fix

Ensure `createUniqueId` is only called within components that are intended for hydration on the server. For non-hydratable server-only rendering, consider server-specific UUID generation if absolute uniqueness is critical outside of a hydration context.

affects: >=1.1.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'call') or (intermediate value) is not a function

Attempting to use a SolidJS signal (or other reactive primitive) as a direct value without calling it as a function.

fix

Always invoke signals as functions to retrieve their current value, e.g., `count()` instead of `count`.

Error: Hydration completed but element was not found.

Mismatch between the server-rendered HTML and the client-side SolidJS application's initial render output during hydration. Often caused by conditional rendering differences or external scripts modifying the DOM.

fix

Ensure identical rendering logic on both server and client. Avoid direct DOM manipulation by third-party scripts before hydration completes. Use Solid's built-in control flow components (`<Show>`, `<For>`) for conditional rendering.

ReferenceError: createSignal is not defined

Missing or incorrect import statement for a SolidJS reactive primitive or utility.

fix

Add the correct named import from `'solid-js'` or `'solid-js/web'`, e.g., `import { createSignal } from 'solid-js';`.

Uncaught SyntaxError: Cannot use import statement outside a module (in browser console)

Attempting to run ES module syntax (`import`/`export`) directly in a browser without a build step, or without `type="module"` on the script tag.

fix

Configure a build tool (e.g., Vite, Webpack, Rollup) with `vite-plugin-solid` or `babel-preset-solid` to correctly transpile and bundle your SolidJS application for browser execution. Ensure your `package.json` specifies `type: "module"` or use a bundler.

Upgrade

Version history

1.9.12latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

3 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/solidjs/solid ↗

packagehttps://www.npmjs.com/package/solid-js ↗

homepagehttps://solidjs.com ↗