CommonJSライブラリの有効化

[ZEKE320]

CommonJSライブラリの有効化（出来ていませんでした）

検証作業中にCommonJS系ライブラリをESModulesとして読み込む方法が見つかったので共有しておきます
追記: この方法ではastro devではJSDOMが動作しますが、astro buildではエラーとなります。

何ができるようになるのか？

jsdomなどのCommonJSライブラリが利用可能になる

方法

1. 次のコマンドを実行する

npm i cjstoesm
npm i -D rollup-plugin-typescript2 typescript tslib

2. astro/astro.config.mjsへ次のコードを追加する

import xxx
...
+ import ts from 'rollup-plugin-typescript2';

// https://astro.build/config
/** @type {import('tailwindcss').Config} */
export default defineConfig({
  base: "/",

  ...

  adapter: cloudflare(),
+  vite: {
+    build: {
+      rollupOptions: {
+        plugins: [ts({ transformers: [() => cjsToEsm()] })],
+      },
+    },
+  },
});

(動作確認例) getOgpMeta.tsにおけるOGP取得をjsdomで実装

1. 次のコマンドを実行

npm i jsdom
npm i -D @types/jsdom

2. astro/src/pages/api/getOgpMeta.tsのextractHeadを置き換え

import xxx
import yyy
/****/
import { JSDOM } from "jsdom";

const extractHead = (html: string): ogpMataData => {

    const dom = new JSDOM(html);
    const { document } = dom.window;

    let title: string = document
        .querySelector("meta[name='twitter:title']")
        ?.getAttribute("content") ?? "";
    if (title === "") {
        title = document
            .querySelector("meta[property='og:title']")
            ?.getAttribute("content") ?? "";
    }

    let description = document
        .querySelector("meta[name='twitter:description']")
        ?.getAttribute("content") ?? "";

    if (description==="") {
        description = document
            .querySelector("meta[property='og:description']")
            ?.getAttribute("content") ?? "";
    }

    let image = document
        .querySelector("meta[name='twitter:image']")
        ?.getAttribute("content") ?? "";
    if (image==="") {
        image = document
        .querySelector("meta[property='og:image']")
        ?.getAttribute("content") ?? "";
    }

    return {
        type: "meta",
        title: title,
        description: description,
        image: image
    }
};

[ZEKE320]

astro build実行時は上手く動いていないみたいですね...

[nekono-dev]

残念。DOMで、Cloudflareのアダプタに対応しているパッケージ（@cloudflare/hogehoge）があればいいのですが...

[ZEKE320]

色々試した様子では、JSDOMが

• CommonJS形式で書かれているため

ではなく、

• Node.js組み込みの関数を使おうとしているために

ビルドに失敗しているようですね

@astrojs/cloudflareのアダプターを導入してNode.jsの関数を呼び出す場合、

import { Buffer } from 'node:buffer'

のようなnode:接頭辞付きの記法が必須なことと、
加えてすべての関数には対応していない問題があるようで
@astrojs/cloudflare | ASTRO DOCS
Node.js compatibility | Cloudflare Docs

結局、JSDOM内のrequire()の中で

• node:接頭辞が無いか

• Cloudflare Workersで互換性がない

Node.jsモジュールがビルドエラーとなってしまう

というのがオチかなと思っています

(実際JSDOM内のconst path = require("path")を"node:path"に変えるとエラーが１つ減ります)

[nekono-dev]

すごい、詳細な調査ありがとうございます！これはしょうがないですね...やっぱり使わない方向で考えましょう。
Cloudflareから離れるってなると、現状料金的な部分でこれ以上に安くて(安いという無料でできる範囲の広い)実用的なプロダクトを調査するところまで巻き戻ってしまうので...