AstroでNo loader is configured for ".node" files: node_modules/.pnpm/@resvg+resvg-js-linux-x64-gnu@2.6.2/node_modules/@resvg/resvg-js-linux-x64-gnu/resvgjs.linux-x64-gnu.node エラーを解決する

programming #astro #resvg #node

Astroでsatoriを使ったOGP画像の生成で、@resvg/resvg-jsを追加したら、
astro devで次のようなエラーが発生するようになりました。

Terminal window
✘ [ERROR] No loader is configured for ".node" files: node_modules/.pnpm/@resvg+resvg-js-linux-x64-gnu@2.6.2/node_modules/@resvg/resvg-js-linux-x64-gnu/resvgjs.linux-x64-gnu.node

このエラーは、Node.jsのネイティブモジュールである.nodeファイルをViteが処理できない(そのようなローダーが設定されていない)ために発生します。

@resvg/resvg-jsは .node ファイル（resvgjs.darwin-arm64.nodeなど）を内部的に読み込むネイティブモジュールです。これは、通常のJavaScriptファイルではなく、C++などでコンパイルされたバイナリです。

Viteは、通常の依存関係を**事前バンドル（pre-bundle）**します。これは開発サーバーの起動を高速化するためです。

ところが、

Viteがこのパッケージを処理しようとすると、.nodeファイルが登場それに対応するローダーが存在しないため、上記のようなエラーになります。

解決方法

astro.config.mjsに以下の設定を追加することで解決できます。

astro.config.mjs
import { defineConfig } from 'astro/config';


export default defineConfig({
  vite: {
    optimizeDeps: {
      exclude: ["@resvg/resvg-js"],
    }
  },
});

AstroでOGP画像生成で@resvg/resvg-jsを追加してエラーが発生した場合は、こちらの方法を試してみてください。