Blog | Clameyes

Astroを使っていてCould not find Sharp.エラーが出た時の対処法

2025/03/20

Astroを使っていて「Could not find Sharp.」というエラーに対処したので備忘録です。

エラーの概要

Astroでビルド時に2種類のエラーが出ました。

このエラーは通常、Astroプロジェクトで画像の最適化を行おうとした際に発生し、Sharpライブラリが見つからないことが原因です。

解決方法

そのままですが、Sharpライブラリが見つからないというエラーなので、Sharpをインストールすることで解決できます。

以下の手順に従って進めてください。

まず、Sharpをプロジェクトにインストールしましょう。
- pnpm
- npm
- yarn
Terminal window
pnpm add sharp
Terminal window
npm install sharp
Terminal window
yarn add sharp

astro.config.mjsファイルで、Sharpが正しく設定されているか確認します。

import { defineConfig } from 'astro/config';

export default defineConfig({
    image: {
        service: { entrypoint: 'astro/assets/services/sharp' },
    },
});

もし上記の手順で解決しない場合は、キャッシュをクリアしてみましょう。
- pnpm
- npm
- yarn
Terminal window
pnpm store prune
Terminal window
npm cache clean --force
Terminal window
yarn cache clean
最後に、依存関係を再インストールし、プロジェクトを再ビルドします。
- pnpm
- npm
- yarn
Terminal window
pnpm install --force pnpm build
Terminal window
npm ci npm run build
Terminal window
yarn install --force yarn build

参考リンク

Cloudflare PagesでNode.jsのバージョンを変更したいとき

2025/03/20

Cloudflare Pagesのビルド時にNode.jsのデフォルトバージョンが古くてエラーになることがありました。

Node.jsのバージョンを変更できたので、その方法を備忘録として残します。

デフォルトのNode.jsバージョン

Cloudflare Pagesのガイドによると、デフォルトでNode.js 10が使用されるとされています。ただし、実際のビルドログを確認すると、v12.18.0が使用されているケースもあるようです。これはプロジェクトの設定やランタイムによって異なる可能性があります。

Node.jsバージョンの変更方法

Node.jsのバージョンを変更するには、以下の2つの方法があります。

Cloudflare Pagesの環境変数を使用
ローカルファイルで環境変数を指定

どちらの方法でも、使用したいNode.jsのバージョンを指定することができます。

Cloudflare Pagesの環境変数を使用

Cloudflareダッシュボードにログインします。
「Workers & Pages」を選択し、該当するPagesプロジェクトを開きます。
「設定」→「変数とシークレット」と進み、NODE_VERSIONという名前の変数を追加します。
値に希望するNode.jsのバージョン（例：20.9.0）を入力します。

Image from Gyazo

ローカルファイルで環境変数を指定

プロジェクトのルートディレクトリに.nvmrcまたは.node-versionファイルを作成し、使用したいNode.jsのバージョンを記述します。

20.9.0

Cloudflare PagesでNode.JS Compatibility Errorが出たとき

2025/03/20

Cloudflare PagesでNext.jsプロジェクトをデプロイする際に、Node.JS Compatibility Errorに遭遇して解決したので備忘録。

Image from Gyazo

エラー内容

デプロイ後、以下のようなエラーメッセージがページに表示されました。

このエラーは、Cloudflare PagesプロジェクトでNode.jsの組み込みモジュールにアクセスできないことを示しています。

解決方法

Cloudflareダッシュボードから設定する方法

Cloudflareダッシュボードにログインします。
「Workers & Pages」を選択し、該当するPagesプロジェクトを開きます。
「設定」→「ランタイム」→「互換性フラグ」と進みます。
「nodejs_compat」フラグを追加します。

Image from Gyazo

注意: フラグは nodejs_compat とだけ入力します。引用符やその他の文字は不要です。

wrangler.tomlファイルで設定する方法

プロジェクトのルートディレクトリにある wrangler.toml ファイルに以下の行を追加します：

compatibility_flags = [ "nodejs_compat" ]

注意点

Compatibility Flagsを設定した後は、変更を反映させるために再デプロイが必要です。
設定方法によっては、ダッシュボードの「Functions」オプションが見つからない場合があります。その場合は wrangler.toml ファイルでの設定をお試しください。

参考リンク

このエラーに遭遇した際は、ぜひこの方法をお試しください。デプロイの成功をお祈りしています！

Astro Starlightにコメント機能(Giscus)を導入する

2025/03/17

AstroのドキュメントテンプレートStarlightに、GitHub Discussionsを利用したコメント機能(Giscus)を導入したので備忘録を残します。

Giscusとは

Giscusは、GitHub Discussionsを利用したコメントシステムです。

軽量で、GitHub認証を使用するため、スパム対策にも優れています。

前提条件

Astro Starlightのウェブサイトがセットアップされていること
GitHubアカウントを持っていること
GitHub Discussionsが有効になっているリポジトリがあること

インストール手順

starlight-giscusのインストール

まず、starlight-giscusプラグインをインストールします。ターミナルで以下のコマンドを実行してください。
- pnpm
- npm
- yarn
Terminal window
pnpm add starlight-giscus
Terminal window
npm install starlight-giscus
Terminal window
yarn add starlight-giscus
Giscusアプリの設定

Giscus公式サイトで、あなたのリポジトリに対してGiscusを設定します。

必要な情報を入力し、スクリプトコードを生成してコピーしてください。

Astro設定ファイルの更新

astro.config.mjsファイルを開き、以下のように設定を追加します。

import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightGiscus from 'starlight-giscus'

export default defineConfig({
    integrations: [
        starlight({
            plugins: [
                starlightGiscus({
                    repo: 'data-repo',
                    repoId: 'data-repo-id',
                    category: 'data-category',
                    categoryId: 'data-category-id'
                })
            ],
            title: 'My Docs',
        }),
    ],
})

repo、repoId、category、categoryIdの値は、Giscusの設定で生成されたものに置き換えてください。

上記4つは必須項目ですが、他にもカスタマイズオプションがあります。詳細は後述します。

カスタマイズオプション

starlight-giscusプラグインには、以下のようなカスタマイズオプションがあります：

mapping (string): ページとディスカッションのマッピング方法(ディスカッションのタイトルがどうなるか)
- pathname (デフォルト): ページのパス名
- URL: ページのURL
- <title>: ページのタイトル
- og:title: ページのog:title
reactions (boolean): リアクション機能の有効/無効
inputPosition (string): 返信フォームの位置
- bottom (デフォルト): コメントの下部
- top: コメントの上部
theme (string): コメント欄のテーマ
- preferred_color_scheme (デフォルト): ユーザーのOSのテーマに合わせる
- その他はStarlight-Giscusのドキュメントを参照
lazy (boolean): 遅延ロードの有効/無効

これらのオプションを使用して、コメント機能をサイトに合わせてカスタマイズできます。

特定ページでのコメント無効化

そのままだと、下記のようなコメントを表示しなくても良いトップページなどでコメントが表示されてしまいます。

Image from Gyazo

コメントを表示したくないページがある場合は、frontmatterで制御できます。

設定手順

src/content.config.tsファイルでスキーマを拡張します

import { defineCollection, z } from 'astro:content'
import { docsLoader } from '@astrojs/starlight/loaders'
import { docsSchema } from '@astrojs/starlight/schema'

export const collections = {
    docs: defineCollection({
        loader: docsLoader(),
        schema: docsSchema({
            extend: z.object({
                giscus: z.boolean().optional().default(true),
            }),
        }),
    }),
}

コメントを無効にしたいページのfrontmatterにgiscus: falseを追加します。
```
---
title: コメント不要なページ
giscus: false
---
```

starlight-blogプラグインを使っている場合

starlight-blogプラグインを使っている場合は、extendの中でblogSchema(context)を呼び出して、その後にgiscusを追加してください。

また、blogのページやtagのページでgiscusを無効にしたいのでデフォルトをfalseにします。

設定手順

src/content.config.tsファイルでスキーマを拡張します

import { defineCollection, z } from 'astro:content'
import { docsLoader } from '@astrojs/starlight/loaders'
import { docsSchema } from '@astrojs/starlight/schema'
import { blogSchema } from 'starlight-blog/schema';

export const collections = {
    docs: defineCollection({
        loader: docsLoader(),
        schema: docsSchema({
            extend: (context) => blogSchema(context).extend({
                giscus: z.boolean().optional().default(false)
            })
        }),
    }),
}

コメントを有効にしたいページのfrontmatterにgiscus: trueを追加します。
```
---
title: コメントを入れたいページ
date: 2025-03-17
giscus: true
---
```

Astro Starlight(Tailwand v3)にshadcn/uiを導入する

2025/03/17

Astro StarlightとTailwind CSSを使用したプロジェクトに、shadcn/uiを導入する方法を紹介します。

shadcn/uiは、美しくカスタマイズ可能なUIコンポーネントを提供するライブラリです。

Starlightは現状、Tailwind CSS v3を使用しているため、shadcn/uiも同様にTailwind CSS v3で導入します。

前提条件

既にAstro Starlightプロジェクトが作成されていること
Tailwind CSS v3が導入されていること

shadcn/uiの導入

プロジェクトのルートディレクトリにあるtsconfig.jsonファイルを開き、以下のコードを追加してパスを解決します：

{
    "compilerOptions": {
        // ...
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        }
        // ...
    }
}

shadcn/uiをセットアップするために、以下のコマンドを実行します：
- pnpm
- npm
- yarn
Terminal window
pnpm dlx [email protected] init
Terminal window
npx [email protected] init
Terminal window
npx [email protected] init
このコマンドを実行すると、プロジェクトの設定に関するいくつかの質問が表示されます。

プロジェクトに適した選択肢を選んでください。

私は下記のように選択しました。
reactがインストールされていない場合、以下のコマンドを実行してreactをインストールします：
- pnpm
- npm
- yarn
Terminal window
pnpm astro add react
Terminal window
npx astro add react
Terminal window
yarn astro add react

shadcn/uiを追加すると下記のようにCSSが追加されます。

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem
}
.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%
}
}
@layer base {
* {
    @apply border-border;
}
body {
    @apply bg-background text-foreground;
}
}

いくつかのカスタムプロパティが追加され、ダークモードのスタイルも追加されます。

これによってStarlightのデフォルトのスタイルが上書きされます。

適宜カスタマイズしましょう。

ちなみに、Starlightとshadcn/uiはダークモードとライトモードの設定が逆なので入れ替えておく必要があります。

フレームワーク	ダークモード	ライトモード
Starlight	:root	:root[data-theme=“light”]
shadcn/ui	.dark	:root

注記：

shadcn/uiの元の設定（ダークモード: .dark、ライトモード: :root）を変更しています。
ダークモードとライトモードの設定を統一するために、shadcn/uiの.darkを:rootに、:rootを:root[data-theme="light"]に変更しています。
この変更により、StarlightとshadcnのCSS設定が一致し、両フレームワークで同じセレクタを使用してダークモードとライトモードのスタイルを定義できるようになります。

コンポーネントの追加

セットアップが完了したら、shadcn/uiのコンポーネントを追加できます。

例えば、Buttonコンポーネントを追加するには以下のコマンドを実行します。

pnpm dlx [email protected] add button

npx [email protected] add button

npx [email protected] add button

コンポーネントの使用

追加したコンポーネントは、以下のように使用できます。

例えば、src/docs/index.mdxファイル

import { Button } from "@/components/ui/button"

<Button>Click me</Button>