otoyo / easy-notion-blog

✍️ Let's start your own Notion Blog easily. / Notion Blogを始めましょう!

Home Page:https://easy-notion-blog-otoyo.vercel.app/blog

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'call')となる

kishipoyo opened this issue · comments

不具合の概要

npm run devした際に下記のエラーが表示される。

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'call')

再現方法

README.jaの手順通りに実行(1/10時点)
https://github.com/otoyo/easy-notion-blog/blob/main/README.ja.md

エラーログ

下記はエラーメッセージの全文になります。

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'call')

Call Stack
options.factory
file:///C:/www_dev/notion-blog-test/easy-notion-blog/.next/static/chunks/webpack.js (722:31)
__webpack_require__
/_next/static/chunks/webpack.js (37:33)
fn
file:///C:/www_dev/notion-blog-test/easy-notion-blog/.next/static/chunks/webpack.js (377:21)
require
node_modules\next\dist\client\link.js (7:31)
./node_modules/next/dist/client/link.js
file:///C:/www_dev/notion-blog-test/easy-notion-blog/.next/static/chunks/app/layout.js (126:1)
options.factory
/_next/static/chunks/webpack.js (722:31)
__webpack_require__
file:///C:/www_dev/notion-blog-test/easy-notion-blog/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (377:21)
__webpack_require__
node_modules\next\dist\client\app-index.js (26:16)
requireModule
node_modules\next\dist\compiled\react-server-dom-webpack\client.js (142:0)
initializeModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\client.js (427:0)
readChunk
node_modules\next\dist\compiled\react-server-dom-webpack\client.js (252:0)
mountLazyComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23079:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24792:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (32185:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (31082:0)
workLoopSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (30891:0)
renderRootSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (30856:0)
recoverFromConcurrentError
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (30109:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (29996:0)
workLoop
node_modules\next\dist\compiled\scheduler\index.js (10:3921)
flushWork
node_modules\next\dist\compiled\scheduler\index.js (10:3629)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\index.js (10:1811)

スクリーンショット

image

追加情報

過去に以下でも同じような課題が挙がっていたため、
「.next」ディレクトリを削除する方法を試しましたが改善されませんでした。
#19

ご教示いただけると助かります!

easy-notion-blog をお使いくださりありがとうございます。
easy-notion-blog に使用している Notion データベースのスクリーンショットと、エラーとなってしまうコードがある GitHub リポジトリを教えていただけますでしょうか?

早々のご確認ありがとうございます。
以下情報になります。

▼GitHub リポジトリ
https://github.com/kishipoyo/easy-notion-blog

▼Notion データベースのスクリーンショット
image
Notionデータベースは「Webで公開」をONの状態にしています。

情報提供ありがとうございます。Notion データベースはWebで公開する必要はありませんので、特に必要がなければプライベートにしてください。

提供いただいた情報を見る限りどこもおかしくないようですので、Windows 特有の問題かもしれません。
Web上で開発ができる Gitpod というサービスが無料なのでよかったらお試しください。
https://www.gitpod.io/

下記は簡単な使い方です。

  • Gitpod にアクセスして GitHub でログインします
  • ワークスペースで読み込むURLとして https://github.com/kishipoyo/easy-notion-blog を入力して開始します
  • コードが読み込まれた後、自動で yarn install と yarn start が走ります。yarn start で失敗してエラーになりますが問題ありません(下記スクショ)

スクリーンショット 2023-01-10 18 10 37

  • 同じターミナルで NOTION_API_SECRETDATABASE_ID を下記のようにして設定します
export NOTION_API_SECRET=aaa
export DATABASE_id=aaa

上記はご自身のものに置き換えてください。

  • ターミナルで yarn dev を実行します
  • 画面右下に下記スクショのようなダイアログが出るので「Open Browser」を選択します

スクリーンショット 2023-01-10 18 06 16

以上です。コードを変更したら yarn dev で動作確認しながら開発してみてください。

無事にdev環境で確認することができました!
image

Gitpod自体初めて使ったので、慣れるところから始めていきたいと思います。
この度はものすごいスピードで回答くださりありがとうございました!

解決して良かったです。
もしまたわからないところが出てきましたらTwitterコミュニティもあわせてご活用ください。
https://twitter.com/i/communities/1497431576975908868