環境
- M1 Mac Mini
- macOS Sequoia 15.5
- Node.js v22.17.1
- npm 11.5.1
- pnpm 10.13.1
- bun 1.2.19
- SolidJS 1.9.5
- SolidStart 1.1.0
はじめに
SolidStartとPark UIの環境構築を行った際に
思った以上に手間取ったため、その手順の備忘録となります。
利用するパッケージマネージャーについて
環境構築を行うにあたり、本記事では「pnpm」を利用します。
手順は含めませんが、「bun」を利用しても構築できることは確認できています。
対して「npm」を利用した場合は、途中でエラーが発生し環境構築が行えません。
Githubでも報告されているようですが、同様の症状が依然として発生します。
(2025/08/01 時点)
npmでのインストール失敗ログ
以下のように、Park UI用のPanda CSSプリセット導入時にエラーが発生します。
user@Mac-mini solidstart-npm-test % npm install @park-ui/panda-preset -D
npm error code 127
npm error path /Users/User/Git/solidstart-npm-test/node_modules/@park-ui/panda-preset
npm error command failed
npm error command sh -c bun run build
npm error $ tsup
npm error /bin/bash: tsup: command not found
npm error error: script "build" exited with code 127
1. 「SolidStart」の導入
プロジェクトディレクトリの作成・移動
# プロジェクトディレクトリを作成
mkdir solidstart-project
# プロジェクトディレクトリ配下へ移動
cd solidstart-project
SolidStartプロジェクトのテンプレートを作成
pnpm create solid@latest
インストール時の選択肢
- プロジェクト名
- ドット(.)にて、カレントディレクトリの名前を指定
- プロジェクト形式
- SolidStartを指定
- TypeScriptを利用するか？
- 利用するを指定
- templateの選択
- basicを指定
依存関係のインストール
pnpm i
2. pnpmの依存関係エラーを解消
SolidStartのインストール後に、以下の警告文が表示されるので解決します。
╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Ignored build scripts: @parcel/watcher, esbuild. │
│ Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts. │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
以下のコマンドを実行し、設定を始めます。
pnpm approve-builds
コマンド実行後、対話形式で設定が始まるので指示に従い許可設定を行います。
user@Mac-mini solidstart-project % pnpm approve-builds
✔ Choose which packages to build (Press <space> to select, <a> to toggle all, <i> to invert selection) · @parcel/watcher, esbuild
✔ The next packages will now be built: @parcel/watcher, esbuild.
Do you approve? (y/N) · true
3. 「Panda CSS」の導入
Panda CSSをインストールする
pnpm install -D @pandacss/dev
Panda CSSの初期化コマンドを実行する
pnpm panda init --postcss
- プロジェクトディレクトリの直下に「styled-system」が自動生成されます。
package.jsonの編集を行う
"scripts"部分に、"prepare"コマンドを追加します。
{
"scripts": {
+ "prepare": "panda codegen",
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
}
}
panda.config.tsの確認
panda.config.tsを開いて、SolidJSのコンポーネントファイルが
"include"に含まれていることを確認します。
記載されている内容に問題がなければ、ファイルの編集の必要はありません。
index.css周りの設定
index.cssファイルを作成します。
touch ./src/index.css
index.css内に、以下内容を記載します。
@layer reset, base, tokens, recipes, utilities;
app.tsxを開いて、index.cssをimportするよう記述し
元からあるapp.cssの記述は削除しておきます。
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
// 削除する
// import "./app.css";
import "./index.css"
export default function App() {
//以下省略
4. 「Park UI」の導入
Ark UIのモジュールをインストール
以下コマンドにて、
SolidJS用のArk UIをインストールします。
pnpm install @ark-ui/solid
Park UI用のPanda CSSプリセット導入
続けて、Panda CSSのプリセットをインストールします。
pnpm install @park-ui/panda-preset -D
panda.config.tsの更新
panda.config.tsファイルを開き、
以下のように内容を編集します。
import { defineConfig } from "@pandacss/dev";
import { createPreset } from '@park-ui/panda-preset'
import amber from '@park-ui/panda-preset/colors/amber'
import sand from '@park-ui/panda-preset/colors/sand'
export default defineConfig({
// Whether to use css reset
preflight: true,
presets: [createPreset({ accentColor: amber, grayColor: sand, radius: 'sm' })],
// Where to look for your css declarations
include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
// Files to exclude
exclude: [],
// Useful for theme customization
theme: {
extend: {},
},
jsxFramework: 'solid',
// The output directory for your css system
outdir: "styled-system",
});
panda.config.tsファイルの編集後、以下コマンドにて設定を更新します。
pnpm prepare
tsconfig.jsonの編集
tsconfig.jsonを開いて、必要な設定を追記します。
{
"compilerOptions": {
// 省略
+ "baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
},
+ "include": ["src", "styled-system"]
}
app.config.tsの編集
Vite側で「styled-system」が認識できるように設定の追記を行います。
SolidStartを利用しているので、app.config.tsへ記述することになりますが、
解決方法としては2つあるので、どちらか一方を選択してください。
Viteのライブラリを利用する解決方法
Vite関係のライブラリ2種を追加インストールし、
それをインポートして設定を行う方法です。
以下、2つのインストールを行います。
pnpm add -D vite@^6
pnpm install -D vite-tsconfig-paths
app.config.tsにて、インポートして利用します。
// vite-tsconfig-pathsを利用する
import { defineConfig } from "@solidjs/start/config";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
vite: {
plugins: [tsconfigPaths({ root: "./" })],
},
});
コード編集のみの解決方法
Vite関係のライブラリ2種をインストールせずに、
app.config.tsのコード編集のみで解決する方法です。
// viteとvite-tsconfig-pathsをインストールしない
import { defineConfig } from "@solidjs/start/config";
import path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
export default defineConfig({
vite: {
resolve: {
alias: {
"styled-system": path.resolve(__dirname, "styled-system"),
},
},
},
});
5. Park UIのコンポーネント導入
コマンドにて、任意のPark UIのコンポーネントを指定し
プロジェクトフォルダ内に追加します。
# buttonとspinnerコンポーネントを追加
pnpx @park-ui/cli components add button spinner
初期設定
初めてコンポーネントを追加する際に、初期設定がありますので
対話形式で設定を行います。
- 利用しているJSフレームワークの選択
- Solid
- ダウンロードしたコンポーネントの格納先
- デフォルトのまま
参考
- Getting started - SolidStart Docs
- Using SolidJS - Panda CSS
- Getting Started | Ark UI
- @ark-ui/solid - npm
- Getting Started | Park UI
- @park-ui/panda-preset should not assume Bun is installed (fails npm install with error code 127) · Issue #507 · cschroeter/park-ui