※追記:その後実装を変えました ブログに画像を貼れるようにした〜その後〜
少しずつ弄ってるブログですが、この度画像を貼れるようにしました。
その時少しハマったので、ログを残しておきます。
https://github.com/Pon57/blog/commit/a74e1a337368daa3b692f78a9ae92f9b90b8881e
gray-matter
でメタデータを解析したのち、コンテンツの文字列を抜き出して使っていた。
const post = ALL_POSTS.find(post => slug === post.slug) as Post
const processedContent = await unified()
.use(remarkParse)
.use(remarkEmoji)
.use(remarkBreaks)
.use(remarkExternalLinks)
.use(remark2rehype)
.use(rehypeHighlight)
.use(rehypeSlug)
.use(rehypeStringify)
.process(post.content)
これにそのまま .use(remarkEmbedImages)
を忍び込ませ、ブログ本文に画像を入れてみた。
パスは /posts/[slug]/hoge.png
という感じ。マークダウンファイルのパスはその当時は /posts/[slug].md
だけどどうもうまくいかなかったみたい。
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
試しに絶対パスを入れたけど、画像の変換が行われず、固定文字列が入っちゃった。
プロジェクトルートから考えた相対パスを入れれば問題なく動いたけど、マークダウンファイルとの相対的な位置が合わず、プレビューもできないし嫌だな〜ということでボツ。
出ている場所は remarkEmbedImages
で間違いないが、なんのこっちゃという感じ。
エラーが示していた場所はここ。
https://github.com/remarkjs/remark-embed-images/blob/main/index.js#L27
入れている path
が関係あるのかと思いきや、path
の引数が undefined
の場合もこういうエラーが出るらしい。(※追記:エラー文に書いてあるじゃん!)
VSCode で特に何もせず使えたデバッガーを利用して変数の中身を見てみると、どうやら file.dirname
が原因だろうというところまでわかった。
じゃあ file
はなんなの?となるけど、コードを見てもいまいち分からず・・・
なんか検索しているうちに再実装しているリポジトリを見つけた。
https://github.com/ahlec/jyosuushi/blob/0990e7c75c2df7c704acb9bcaca23bf999b3d181/scripts/markdown/parsing/embeded-images.ts
そんなこんなしているうちに file.dirname
に posts
という固定文字列を入れてみた。動いた!
この時世界が動き出した。
なんでか覚えてないけど .process()
には vfile
を入れることができるということを知り、vfile
は dirname
や path
、cwd
があり、なんかみたことのあるな〜という感じ。
https://github.com/vfile/vfile
そうか、remark-embed-images
の file
は vfile
のことだったのか・・・となった(どうして vfile
なのかはまだ分かってない)
const post = ALL_POSTS.find(post => slug === post.slug) as Post
+ const file = toVFile({ value: post.content, path: process.cwd(), dirname: 'posts' })
const processedContent = await unified()
.use(remarkParse)
...
.use(rehypeStringify)
- .process(post)
+ .process(file)
としたら無事動いた 🎉
なんで動いたのかとかあんまりよく分かっていないけど、文字列を .process()
に入れるとファイルの中身だけはあるけど実体は無いみたいな扱いをされて、その結果 dirname
が undefined
になっていたとかそんな感じかなぁって思ってる。
そのうち気が向いたら追ってみると思う。
とりあえず動くようになったのでよかった 😚