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


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.

"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!

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

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