Astroでzenn-markdown-htmlと埋め込み用scriptタグが使えない

yajihum commented 1 year ago

困っていること

markdownToHtml関数を使うとビルド時にmarkdownToHtml is not a functionとエラーが出てしまう
埋め込みコンテンツ用のscriptタグの読み込みでCORSエラーが発生してしまう

1について

コンポーネントスクリプト内でmarkdownToHtmlを使用しています。


---
import { CollectionEntry, getCollection } from "astro:content";
import BlogPostLayout from "../../../layouts/BlogPostLayout.astro";
import PostBody from "@components/util/PostBody";
import markdownToHtml from "zenn-markdown-html";

export async function getStaticPaths() { const posts = await getCollection("article");

return posts.map((post) => ({ params: { slug: post.slug }, props: post, })); } type Props = CollectionEntry<"article">;

const post = Astro.props;

post.body = markdownToHtml(post.body);

<BlogPostLayout {...post.data} title={post.data.title}


コンポーネントスクリプト内はNode.jsで実行されているはずなので本リポジトリのREADMEに書かれている、`Node.js上でないとエラーになる`というものはクリアしていると思うのと、localhostでは問題なく機能していますがビルド時に`markdownToHtml is not a function`というエラーがでてしまいます

2について

以下のようにheadの中で使用しています。

<head>
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://embed.zenn.studio/js/listen-embed-event.js"
      crossorigin="anonymous"
    ></script>
  </head>

エラー内容は以下です。 scriptタグを単純に使うだけでは駄目で、Headerをつける必要がありそうだなということは調べて分かったのですがCDNでの設定方法が分からず、こちら側で解決できるものなのかと疑問が生じている状態です。

zennのマークダウンがすごく好きでNext.jsではちゃんと機能していたのでAstroでも使いたいと思い、実装中です。

もしかしたらzenn側の問題ではなくAstro側の問題かもしれないのですが、自分の力だけではどうにも解決できなかったため助言をいただきたいです。（当方、技術力がまだまだ未熟であるため基礎的なことで躓いていたらお時間をとらせてしまったこと大変申し訳ないです）お忙しい中大変恐縮ですが、ご返信いただければ幸いです🙇

uttk-dev commented 1 year ago

@yajium

ビルドエラーについて

こちらで確認したところ、markdownToHtml is not a function ビルドエラーになってしまうのは build コマンドを実行すると、import 結果が変わってしまうことが原因でした。具体的には default import の値が Function から { defualt: Function } になってしまいます👇

import lib from "zenn-markdown-html";

console.log( lib ); 
// yarn dev の場合だと `Function`
// yarn build の場合だと `{ default: Function }` になる

本来であれば Astro 側が上手く解決してくれればいいのですが、( 私が Astro をよく知らないのも原因ですが ) 設定を変えても上手くいかなかったので、おそらく、この件に関して zenn-markdown-html 側で対応することは難しそうです。

回避策として以下のように default プロパティの有無で判定するようにすると動くようになると思いますので、そちらで対応して頂ければと思います👇

import lib from "zenn-markdown-html";

const markdownToHtml = lib.default ? lib.default : lib;

/* ... */

CORSエラーについて

crossorigin="anonymous" を設定していることが原因だと思います( 参照 )。 crossorigin を設定しないで使用するとエラーを回避できると思います！

<!-- crossoriginを設定しないで読み込む( no-cors モードで読み込む ) -->
<script src="https://embed.zenn.studio/js/listen-embed-event.js"></script>

yajihum commented 1 year ago

@uttk-dev ご返信ありがとうございます！

1のビルドエラーについては解決できました！原因の調査方法についてもとても参考になりました。ありがとうございます。

CORSエラー

2のCORSエラーですが、crossoriginを設定しても依然としてエラーが出てしまいます。言葉足らずだったのですが、最初はcrossoriginがない場合で試したところ同じエラーが出たのでcrossoriginを追加してみたのですが同じエラーが出ているといった経緯です。

crossoriginがない状態でNetworkをみたところ、↓の画像の黄色い部分がno-corsではなくcorsとなっており、 Next.jsで使った際にはちゃんとno-corsになっていたためAstro側の問題なのかもしれないです。

他に解決方法がなければNext.jsに戻すかAstro側で相談してみるかなどを考えているのですが、何かあったりしますでしょうか？🙇

uttk-dev commented 1 year ago

@yajium

他に解決方法がなければNext.jsに戻すかAstro側で相談してみるかなどを考えているのですが、何かあったりしますでしょうか？🙇

うーん。すいませんが、私では原因が分かりません。 zenn-cli や zenn.dev の方ではちゃんと読み込めているため、Astro 側に問題がありそうです。なので、言及されている通りNext.jsに戻すかAstro 側に相談するなどの対応をして頂ければ幸いです🙏

※ もしその過程で zenn-editor の問題が発覚した場合は、お気軽に issue を立ててくれて問題ないです🙆‍♂️

よろしくお願いします。

yajihum commented 1 year ago

承知いたしました！色々と親身に教えてくださり、ありがとうございました！🙇🙏

zenn-dev / zenn-editor