Skip to main content

Solid example

Solid (also known as SolidJS) is a JavaScript framework for building interactive web applications. Because of this, Solid is an application or library concern, and not a build system one, since the bundling of Solid is abstracted away through the application or a bundler.

With that being said, we do have some suggestions on utilizing Solid effectively in a monorepo. To begin, install Solid to a project.

yarn workspace <project> add solid-js

Setup​

Solid utilizes JSX for rendering markup, which requires babel-preset-solid for parsing and transforming. To enable the preset for the entire monorepo, add the preset to a root babel.config.js, otherwise add it to a .babelrc.js in each project that requires it.

module.exports = {
  presets: ['solid'],
};

TypeScript integration​

For each project using Solid, add the following compiler options to the tsconfig.json found in the project root.

<project>/tsconfig.json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "solid-js"
  }
}

Vite integration​

If you're using a Vite powered application (Solid Start or starter templates), you should enable vite-plugin-solid instead of configuring Babel. Be sure to read our guide on Vite as well!

<project>/vite.config.js
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  // ...
  plugins: [solidPlugin()],
});