Node.js v20 で GitHubActions から Vercel へのデプロイがコケた話
Vercel が Node.js v20 無いとかエラー出してくる → Error: Found invalid Node.js Version: "20.x". Please set "engines": { "node": "18.x" } in your `package.json` file to use Node.js 18.
// ~/components/CodeBlock.tsx import React from "react" // syntax highlight の styleはお好み、自分は JetBrains 信者なので darcula 推し import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism" interface P { value: string language?: string } const CodeBlock: React.FC<P> = ({ language, value }) => { return ( <SyntaxHighlighter language={language} style={darcula}> {value} </SyntaxHighlighter> ) } export default CodeBlock
// 呼び出し側、どこかのページとか任意の場所で import React from "react" import ReactMarkdown from 'react-markdown' import CodeBlock from "~/components/CodeBlock" interface P { // マークダウンで記述された内容をstringとして受け取るとする markdown: string } const Page: React.FC = ({ markdown }) => { // 先に用意した CodeBlock コンポーネントを renderers に渡すと // md から html に変換する際、code タグになる部分だけ渡したコンポーネントを使って描画してくれるので // syntax highlight が簡単にできる return ( <ReactMarkdown source={markdown} renderers={{ code: CodeBlock }} /> ) }
// CommonJS 準拠 import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism" // ECMAScript 準拠 import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism"
ES6構文のexport
に対応してない環境だと esm
から import してしまうとエラーとなるので、環境に合わせて esm
か cjs
か選択する。
他に使えるオプションとかはそれぞれの README に書いてる。
Vercel が Node.js v20 無いとかエラー出してくる → Error: Found invalid Node.js Version: "20.x". Please set "engines": { "node": "18.x" } in your `package.json` file to use Node.js 18.
public ディレクトリにおいてる画像とかのパスを補完が効くようにしたい
windows はクソ(暴論)