|<!-- -->flabaka.com

yarn buildしたら、エラーが出る

yarn buildしたら、エラーが出る

yarn dev では…

NextJS と TailWindCSS でブログを作っているんですが、ある程度形になったので build してみようか…と

で、yarn build してみたら、エラーが…

yarn dev ではエラーは出なかったのに、何故?

Page Without Valid React Component

Build optimization failed: found page without a React Component as default export in
pages/lib/api

See https://nextjs.org/docs/messages/page-without-valid-component for more info.

エラーを見ると、pages フォルダ以下にある lib フォルダ内の api ファイルに問題があるっぽい。

まずはこのページを見てねと書かれているリンク先を、確認してみる。

If the file is not meant to be a page, and instead, is a shared component or file, move the file to a different folder like components or lib.

これが原因っぽい。そもそも何で pages フォルダ以下に lib フォルダを配置したのかも、意味不明ですね。

lib フォルダを components フォルダと同一階層に移動させたら、このエラーは消えました。

next-sitemap

サイトマップを作成しようかと思い、以下を導入してみました。

いくつか記事を読んでみたところ、next-sitemap.js ファイルを作成し、それに必要な項目を記入し、build すれば OK っぽい。

で、ビルドしてみたら…

Unable to find next-sitemap.config.js or custom config file.

IMPORTANT: Default config file has been renamed to `next-sitemap.config.js`

If you are using custom config file, make sure to invoke `next-sitemap --config <custom-config-file>.js`

node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);

どうやら、ファイル名が駄目っぽい。

next-sitemap.js から、next-sitemap.config.js に変更し、再度ビルドしてみると…

今度は問題なく、ビルド出来ました。

feed

これは yarn build の際ではなく、yarn dev の際にエラーになったものですが…

こちらを使って feed を作成してみたんですが、markdown ファイルをパースするには、marked もインストールするようなので、こちらもインストール。

import marked from "marked"
(略)
content: marked(post.content),

いくつかの記事を参考に、こんな感じでコードを作成し、yarn dev してみたところ…

TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_3__.default) is not a function

怒られました。

marked のコードを見てみると…

//export default function じゃない…
export function marked(src: string, options?: marked.MarkedOptions): string;

そりゃエラー出るよねってことで…

import { marked } from "marked"

コードを修正し、yarn dev してみると、エラーは出ませんでした。

上記ページの Node.js の箇所を見てみると、{ marked }になっていました。

Vercel にデプロイ?

NextJS は、Vercel にデプロイするのが、いいんですかね?

個人利用ならお金も掛からないっぽいし、とりあえず使ってみるのもアリなのかも?

それとも契約しているサーバ上で動かそうかなぁ…

©2022 flabaka.com