Notion APIが発表されてさ、APIができるまでのつなぎで作られていたのが多かったからさ、エラーだらけでさ、サクッと入れ替えた。
サクッとは入れ替えられていないけど...
エラーだらけ...
前に使った notion-blog でエラーが出まくってるし、どうしたものかと調べていたら、Notion APIが発表されたことでNotionからデータ取得ができなくなったりしていることが影響みたいな感じ。
更新もされる様子もないし自分ではどうしようもできないわって思って入れ替えた。
どうやったらエラーが出ないようにできるかなあ？と調べていたときに見つけた Next.js Notion Starter Kit に入れ替えた！
GTMを入れようと思って調べた
前に入れた時よりはいろいろなことが分かってきたからもう一度入れ方を調べてみたら GitHub の Next.js で現在進行系でなにかが行われている様子だった。（よく分かってないけどな！w）
だもんで、使うためには色々と最新の状態にしておいた方が良いのかな？と思って作業中のディレクトリをコピーしてテストディレクトリを作って Next.js のバージョンアップをしてみた。
（コピーをとって作業するところが成長していると思う！＼(^o^)／）
React & Next.js のアップグレード
アップグレードの方法も知らないからググるでしょ。親切な人がいるのよね。
Next.js をアップグレードするには、まずは React をアップグレードしないといけないんだって。
ググったときには複数ページ確認しないとだめだよね。他のところでは Next.js だけのアップグレードの方法しか書いてなかったりしてたし。
で、
yarn dev してみるとさ案の定エラー出んの。コピー取っといて良かった。Error: `future.webpack5` in `next.config.js` has moved to the top level `webpack5` flag https://nextjs.org/docs/messages/future-webpack5-moved-to-webpack5おそらく・・・URLの先の対応すればいいのね？
module.exports = withBundleAnalyzer({
images: {
domains: ['pbs.twimg.com']
},
future: {
webpack5: true
}
})から
module.exports = withBundleAnalyzer({
images: {
domains: ['pbs.twimg.com']
},
webpack5: true
})に書き換えて
yarn dev したらOKだった。後、ついでに
build したときにバージョンエラーらしきものが出るから package.json にかかれているバージョンとインストールしている node.js のバージョンが違うから出てるのかなと思ってアップデートしようと思ったら脱線...Warning: Due to "engines": { "node": ">=10" } in your `package.json` file, the Node.js Version defined in your Project Settings ("14.x") will not apply. Learn More: http://vercel.link/node-versionnvm install v15.0.1 して yarn build したら コマンド 'yarn' が見つかりません。次の方法でインストールできます: って言われちゃった。何で？よく分かんないけど
npm install -g yarn してと。ググってたら脆弱性のあるパッケージを更新した方がいいって出てきたら yarn audit して確認して yarn upgrade してみた。で、私ってば何をしようとしてたんだっけ？あれ？また
package-lock.json ができてる！私って何したっけ？w
あー、 npm install -g yarn したらか。そうそう、アップデートは無事にできて、
yarn build したら下のエラーが出てきた。
エラー内容を検索すると対応方法っぽいのを GitHub で見つけたので関係がありそうなところをちょこちょこ修正して yarn build したらエラーは出たけどできた😆$ yarn build
yarn run v1.22.11
$ next build
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
error - ESLint: Cannot read config file: ~/nextjs-notion-starter-kit-test/node_modules/eslint-config-prettier/standard.js Error: "prettier/standard" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21 Referenced from: ~/nextjs-notion-starter-kit-test/.eslintrc
info - Creating an optimized production build
info - Compiled successfully
> Build error occurred
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ~/nextjs-notion-starter-kit-test/node_modules/static-tweets/node_modules/unist-util-visit/index.js
require() of ES modules is not supported.
require() of ~/nextjs-notion-starter-kit-test/node_modules/static-tweets/node_modules/unist-util-visit/index.js from ~/nextjs-notion-starter-kit-test/node_modules/static-tweets/build/cjs/markdown/rehype-tweet.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from ~/nextjs-notion-starter-kit-test/node_modules/static-tweets/node_modules/unist-util-visit/package.json.
at new NodeError (node:internal/errors:258:15)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1100:13)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at Object.<anonymous> (~/nextjs-notion-starter-kit-test/node_modules/static-tweets/build/cjs/markdown/rehype-tweet.js:4:26)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
at Module.load (node:internal/modules/cjs/loader:948:32) {
type: 'Error',
code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.$ yarn build
yarn run v1.22.11
$ next build
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info - Checking validity of types
error - ESLint: Cannot read config file: ~/nextjs-notion-starter-kit-test/node_modules/eslint-config-prettier/standard.js Error: "prettier/standard" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21 Referenced from: ~/nextjs-notion-starter-kit-test/.eslintrc
info - Creating an optimized production build
info - Compiled successfullyあれ？何やってたんだっけ？
もう、色々となにをやっているのかも分からなくなってきたのでアップデートは中止！
おとなしくアップデートされるのを待とうw