SolidJS

Common errors

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

  cause 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.

  cause 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

  cause 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)

  cause 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.

Warnings

• breaking The 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.
• deprecated Starting 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.
• gotcha Features 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.
• breaking A 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.
• gotcha The `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.

Install

• npm install solid-js npm
• yarn add solid-js yarn
• pnpm add solid-js pnpm

Imports

• createSignal
  wrong:

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

  correct:

  import { createSignal } from 'solid-js';

  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
  wrong:

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

  correct:

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

  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
  wrong:

  import For from 'solid-js';

  correct:

  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.

Quickstart

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.");
}