u-ecmaker commented 1 month ago

Bug/ #77 fix F12エラー撲滅する

手法2 (new)

→ #80

手法1 (old)

bug/#77_F12エラー撲滅

F5デバッグのF12押下時の赤エラーを直した。
これではデプロイされたときのエラーは直らなかったのでマージを中止した。

updated

エラーの解決

NumberedList.tsxの修正
SearchButton.tsxの修正
BulletedList.tsxの修正

HowTo

chat GPT 4o を使ったら一瞬で解決した。 3.5とは偉い違いだ。2-3段階進んだ気がする。

next.js でブログを開発中。chromeのF12でエラーが出ている模様。どのように対処したらよいか方針を述べよ。また解決策を提示しろ。

次のエラーです

hoge fuga

ToDo

バクあった。 kwsk
いったん中止。手法2を行う。

github-actions[bot] commented 1 month ago

Netlify Build
──────────────────────────────────────────────────────────────── ❯ Version @netlify/build 29.54.4 ❯ Flags accountId: 64825fd12059ab0e3dd39238 ❯ Current directory /home/runner/work/blog/blog ❯ Config file No config file was defined: using default values. ❯ Context production ❯ Using Next.js Runtime - v4.41.3 ❯ Outdated plugins

@netlify/plugin-nextjs@4.41.3: latest version is 5.7.3 To upgrade this plugin, please update its version in "package.json" No Next.js cache to restore. Build command from Netlify app
──────────────────────────────────────────────────────────────── $ yarn run build yarn run v1.22.22 $ next build info - Linting and checking validity of types...

./src/hooks/apiHooks/fetcher.ts 36:28 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any 49:29 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any

./src/server/utils/algolia.ts 20:45 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any

./src/server/utils/ogp.ts 43:16 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any 43:57 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any

./src/utils/storage.ts 9:53 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules info - Creating an optimized production build... info - Compiled successfully info - Collecting page data... info - Generating static pages (0/32) info - Generating static pages (8/32) MyInputFileListComponent inputFiles null MyInputFileComponent inputFiles [] MyInputMultiFileListComponent inputFiles null MyInputMultiFileListControlComponent inputFiles null info - Generating static pages (16/32) info - Generating static pages (24/32) info - Generating static pages (32/32) info - Finalizing page optimization...

Route (pages) Size First Load JS ┌ ● / (ISR: 1 Seconds) (389 ms) 2.15 kB 167 kB ├ /_app 0 B 165 kB ├ ○ /404 480 B 166 kB ├ λ /api/auth/[...nextauth] 0 B 165 kB ├ λ /api/hello 0 B 165 kB ├ λ /api/notion-blog/comments 0 B 165 kB ├ λ /api/notion-blog/likes/[page_id] 0 B 165 kB ├ ℇ /api/notion-blog/og 0 B 165 kB ├ λ /api/ogp 0 B 165 kB ├ ○ /contact 6.23 kB 299 kB ├ ○ /login 1.99 kB 167 kB ├ ● /posts (ISR: 1 Seconds) (2826 ms) 17 kB 213 kB ├ ● /posts/[slug] (ISR: 1 Seconds) (102180 ms) 25.9 kB 378 kB ├ ├ /posts/kakuteishinkoku_r5 (12935 ms) ├ ├ /posts/icon (12201 ms) ├ ├ /posts/debug-test (10909 ms) ├ ├ /posts/notion-blog_image-issue (8543 ms) ├ ├ /posts/logo (8153 ms) ├ ├ /posts/next.js_TipTap_plugin (7407 ms) ├ ├ /posts/RDP_remote-desktop (7068 ms) ├ └ [+10 more paths] (avg 3496 ms) ├ ● /profile (5600 ms) 1.86 kB 236 kB ├ ● /sandbox 825 B 197 kB ├ ○ /sandbox/input-file-list 1.54 kB 223 kB ├ ○ /sandbox/react-hook-form 21.3 kB 243 kB ├ ○ /sandbox/react-memo 854 B 222 kB ├ ○ /sandbox/react-use-memo 696 B 222 kB ├ ○ /sandbox/rive 24.4 kB 246 kB ├ ○ /sandbox/svgr 2.09 kB 224 kB └ ○ /sandbox/swr 1.03 kB 228 kB

First Load JS shared by all 172 kB ├ chunks/framework-2c79e2a64abdb08b.js 45.2 kB ├ chunks/main-f11614d8aa7ee555.js 26.8 kB ├ chunks/pages/_app-9989771b6df407d9.js 92.3 kB ├ chunks/webpack-c4acd79e87956a0e.js 947 B └ css/b9cc55740dae8374.css 6.37 kB

ℇ (Streaming) server-side renders with streaming (uses React 18 SSR streaming or Server Components) λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps)

Done in 102.80s. (build.command completed in 1m 42.9s) NextAuth package detected, setting NEXTAUTH_URL environment variable to https://blog.ec-maker.com Moving static page files to serve from CDN... Moved 15 files to CDN The following routes use "revalidate" values of under 60 seconds, which is not supported. They will use a revalidate time of 60 seconds instead. ┌─────────┬─────────────────────────────────────────────┬────────────┐ │ (index) │ Route │ Revalidate │ ├─────────┼─────────────────────────────────────────────┼────────────┤ │ 0 │ '/' │ 1 │ │ 1 │ '/posts' │ 1 │ │ 2 │ '/posts/debug-test' │ 1 │ │ 3 │ '/posts/notion-blog_netlify-deploy-methods' │ 1 │ │ 4 │ '/posts/next.js_TipTap_plugin' │ 1 │ │ 5 │ '/posts/logo' │ 1 │ │ 6 │ '/posts/notion-blog_getting-started' │ 1 │ │ 7 │ '/posts/icon' │ 1 │ │ 8 │ '/posts/kakuteishinkoku_r5' │ 1 │ │ 9 │ '/posts/notion-blog_image-issue' │ 1 │ │ 10 │ '/posts/openAI-API' │ 1 │ │ 11 │ '/posts/notion-blog_google-analytics' │ 1 │ │ 12 │ '/posts/notion-blog_image-size' │ 1 │ │ 13 │ '/posts/schedule-git' │ 1 │ │ 14 │ '/posts/RDP_remote-desktop' │ 1 │ │ 15 │ '/posts/relocation' │ 1 │ │ 16 │ '/posts/BI_seikika' │ 1 │ │ 17 │ '/posts/nodejs_npm-audit-fix' │ 1 │ │ 18 │ '/posts/github-pr-auto-branch' │ 1 │ └─────────┴─────────────────────────────────────────────┴────────────┘ You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable. ✨ Deploying middleware and functions to Netlify Edge Functions ✨ Functions bundling
──────────────────────────────────────────────────────────────── Packaging Functions from .netlify/functions-internal directory:

netlify-handler/netlify-handler.js
netlify-odb-handler/netlify-odb-handler.js
_ipx/_ipx.js (Functions bundling completed in 2m 0.8s) Edge Functions bundling
──────────────────────────────────────────────────────────────── Packaging Edge Functions from .netlify/edge-functions directory:
next_pages_api_notion_blog_og (Edge Functions bundling completed in 8.8s) Next.js cache saved. Deploy path: /home/runner/work/blog/blog/.next Deploying to draft URL... Netlify Build
──────────────────────────────────────────────────────────────── ❯ Version @netlify/build 29.54.4 ❯ Flags auth: nfp_GoRr3esto6qez5kYyUhqYYVSpSHm3zB166e2 build: true deployId: 66ff9e4f3c37fcc510da0f4f open: false prod: false prodIfUnlocked: false site: 80899a26-cfcb-42f8-886e-c84364cdaae9 skipFunctionsCache: false ❯ Current directory /home/runner/work/blog/blog ❯ Config file No config file was defined: using default values. ❯ Context dev Netlify Build Complete
──────────────────────────────────────────────────────────────── (Netlify Build completed in 4m 11.7s)

Build logs: https://app.netlify.com/sites/blog-ecmaker/deploys/66ff9e4f3c37fcc510da0f4f Function logs: https://app.netlify.com/sites/blog-ecmaker/logs/functions?scope=deploy:66ff9e4f3c37fcc510da0f4f Website draft URL: https://66ff9e4f3c37fcc510da0f4f--blog-ecmaker.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag. netlify deploy --build --prod

u-ecmaker commented 1 month ago

いや、だめじゃんw

F5デバッグのF12していたが、それは関係なく、
run dev したときのF12 、いや、もっと言えば、
実際デプロイされたサイトの F12 をしないといけない！

F5, run dev, デプロイされたサイトそれぞれのF12で言っていることが全然違うことに気づいた。

bug/#77 run dev のF12 pタグ

run dev のF12では pタグを divタグにしろと言われる。
これ以外にも沢山ある。

これは本質的でないので、このあとのコミットでrevertする。

デプロイされたサイトのF12を解決しないといけない。

arning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.
    at p
    at RichText (webpack-internal:///./src/components/notion/RichText.tsx:12:11)
    at p
    at Paragraph (webpack-internal:///./src/components/notion/blocks/Paragraph/Paragraph.tsx:13:11)
    at div
    at div
    at div
    at PostContent (webpack-internal:///./src/components/features/notionBlog/PostContent/PostContent.tsx:11:11)
    at div
    at div
    at div
    at PostDetailTemplate (webpack-internal:///./src/components/@templates/PostDetailTemplate.tsx:24:11)
    at Post (webpack-internal:///./pages/posts/[slug].tsx:16:11)
    at div
    at main
    at div
    at Layout (webpack-internal:///./src/components/@layouts/Layout.tsx:36:11)
    at TableOfContentsProvider (webpack-internal:///./src/components/features/notionBlog/TableOfContentsContext.tsx:25:11)
    at NotificationsProvider (webpack-internal:///./node_modules/@mantine/notifications/esm/NotificationsProvider/NotificationsProvider.js:67:5)
    at SpotlightProvider (webpack-internal:///./node_modules/@mantine/spotlight/esm/SpotlightProvider.js:51:14)
    at RecoilRoot_INTERNAL (webpack-internal:///./node_modules/recoil/es/index.js:4473:3)
    at RecoilRoot (webpack-internal:///./node_modules/recoil/es/index.js:4639:5)
    at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js:455:24)
    at App (webpack-internal:///./pages/_app.tsx:54:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11)
  | 他 14 件のフレームを表示

この警告は、HTMLの構造において

タグが別の

タグの中にネストされていることを示しています。HTMLの仕様では、

タグは他の

タグの中に入れることができません。これを修正するためには、HTMLの構造を見直し、適切なタグを使用する必要があります。解決策 HTML構造の見直し:

タグの中に別の

タグが入らないように、HTMLの構造を修正します。例えば、内側の

タグを

やタグに変更することが考えられます。 2. コンポーネントの修正: RichTextやParagraphコンポーネント内で、

タグがどのように使用されているか確認し、必要に応じて修正します。例以下は、

タグのネストを修正する例です。

github-actions[bot] commented 1 month ago

Netlify Build
──────────────────────────────────────────────────────────────── ❯ Version @netlify/build 29.54.4 ❯ Flags accountId: 64825fd12059ab0e3dd39238 ❯ Current directory /home/runner/work/blog/blog ❯ Config file No config file was defined: using default values. ❯ Context production ❯ Using Next.js Runtime - v4.41.3 ❯ Outdated plugins

@netlify/plugin-nextjs@4.41.3: latest version is 5.7.3 To upgrade this plugin, please update its version in "package.json" No Next.js cache to restore. Build command from Netlify app
──────────────────────────────────────────────────────────────── $ yarn run build yarn run v1.22.22 $ next build info - Linting and checking validity of types...

./src/hooks/apiHooks/fetcher.ts 36:28 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any 49:29 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any

./src/server/utils/algolia.ts 20:45 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any

./src/server/utils/ogp.ts 43:16 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any 43:57 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any

./src/utils/storage.ts 9:53 Warning: Unexpected any. Specify a different type. @typescript-eslint/no-explicit-any

info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules info - Creating an optimized production build... info - Compiled successfully info - Collecting page data... info - Generating static pages (0/32) MyInputFileListComponent inputFiles null MyInputFileComponent inputFiles [] MyInputMultiFileListComponent inputFiles null MyInputMultiFileListControlComponent inputFiles null info - Generating static pages (8/32) info - Generating static pages (16/32) info - Generating static pages (24/32) info - Generating static pages (32/32) info - Finalizing page optimization...

Route (pages) Size First Load JS ┌ ● / (ISR: 1 Seconds) (430 ms) 2.15 kB 167 kB ├ /_app 0 B 165 kB ├ ○ /404 480 B 166 kB ├ λ /api/auth/[...nextauth] 0 B 165 kB ├ λ /api/hello 0 B 165 kB ├ λ /api/notion-blog/comments 0 B 165 kB ├ λ /api/notion-blog/likes/[page_id] 0 B 165 kB ├ ℇ /api/notion-blog/og 0 B 165 kB ├ λ /api/ogp 0 B 165 kB ├ ○ /contact 6.23 kB 299 kB ├ ○ /login 1.99 kB 167 kB ├ ● /posts (ISR: 1 Seconds) (1627 ms) 17 kB 213 kB ├ ● /posts/[slug] (ISR: 1 Seconds) (82216 ms) 25.9 kB 378 kB ├ ├ /posts/logo (11191 ms) ├ ├ /posts/debug-test (9286 ms) ├ ├ /posts/icon (7789 ms) ├ ├ /posts/notion-blog_google-analytics (6027 ms) ├ ├ /posts/RDP_remote-desktop (5869 ms) ├ ├ /posts/notion-blog_image-issue (5614 ms) ├ ├ /posts/kakuteishinkoku_r5 (4955 ms) ├ └ [+10 more paths] (avg 3149 ms) ├ ● /profile (458 ms) 1.86 kB 236 kB ├ ● /sandbox 825 B 197 kB ├ ○ /sandbox/input-file-list 1.54 kB 223 kB ├ ○ /sandbox/react-hook-form 21.3 kB 243 kB ├ ○ /sandbox/react-memo 854 B 222 kB ├ ○ /sandbox/react-use-memo 696 B 222 kB ├ ○ /sandbox/rive 24.4 kB 246 kB ├ ○ /sandbox/svgr 2.09 kB 224 kB └ ○ /sandbox/swr 1.03 kB 228 kB

First Load JS shared by all 172 kB ├ chunks/framework-2c79e2a64abdb08b.js 45.2 kB ├ chunks/main-f11614d8aa7ee555.js 26.8 kB ├ chunks/pages/_app-9989771b6df407d9.js 92.3 kB ├ chunks/webpack-c4acd79e87956a0e.js 947 B └ css/b9cc55740dae8374.css 6.37 kB

ℇ (Streaming) server-side renders with streaming (uses React 18 SSR streaming or Server Components) λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps)

Done in 91.81s. (build.command completed in 1m 31.9s) NextAuth package detected, setting NEXTAUTH_URL environment variable to https://blog.ec-maker.com Moving static page files to serve from CDN... Moved 15 files to CDN The following routes use "revalidate" values of under 60 seconds, which is not supported. They will use a revalidate time of 60 seconds instead. ┌─────────┬─────────────────────────────────────────────┬────────────┐ │ (index) │ Route │ Revalidate │ ├─────────┼─────────────────────────────────────────────┼────────────┤ │ 0 │ '/' │ 1 │ │ 1 │ '/posts' │ 1 │ │ 2 │ '/posts/debug-test' │ 1 │ │ 3 │ '/posts/notion-blog_netlify-deploy-methods' │ 1 │ │ 4 │ '/posts/next.js_TipTap_plugin' │ 1 │ │ 5 │ '/posts/logo' │ 1 │ │ 6 │ '/posts/notion-blog_getting-started' │ 1 │ │ 7 │ '/posts/icon' │ 1 │ │ 8 │ '/posts/kakuteishinkoku_r5' │ 1 │ │ 9 │ '/posts/notion-blog_image-issue' │ 1 │ │ 10 │ '/posts/openAI-API' │ 1 │ │ 11 │ '/posts/notion-blog_google-analytics' │ 1 │ │ 12 │ '/posts/notion-blog_image-size' │ 1 │ │ 13 │ '/posts/schedule-git' │ 1 │ │ 14 │ '/posts/RDP_remote-desktop' │ 1 │ │ 15 │ '/posts/relocation' │ 1 │ │ 16 │ '/posts/BI_seikika' │ 1 │ │ 17 │ '/posts/nodejs_npm-audit-fix' │ 1 │ │ 18 │ '/posts/github-pr-auto-branch' │ 1 │ └─────────┴─────────────────────────────────────────────┴────────────┘ You are not using Netlify Edge Functions for image format detection. Set env var "NEXT_FORCE_EDGE_IMAGES=true" to enable. ✨ Deploying middleware and functions to Netlify Edge Functions ✨ Functions bundling
──────────────────────────────────────────────────────────────── Packaging Functions from .netlify/functions-internal directory:

netlify-handler/netlify-handler.js
netlify-odb-handler/netlify-odb-handler.js
_ipx/_ipx.js (Functions bundling completed in 2m 1.5s) Edge Functions bundling
──────────────────────────────────────────────────────────────── Packaging Edge Functions from .netlify/edge-functions directory:
next_pages_api_notion_blog_og (Edge Functions bundling completed in 8.5s) Next.js cache saved. Deploy path: /home/runner/work/blog/blog/.next Deploying to draft URL... Netlify Build
──────────────────────────────────────────────────────────────── ❯ Version @netlify/build 29.54.4 ❯ Flags auth: nfp_GoRr3esto6qez5kYyUhqYYVSpSHm3zB166e2 build: true deployId: 6701f5da19eadab9815f1d47 open: false prod: false prodIfUnlocked: false site: 80899a26-cfcb-42f8-886e-c84364cdaae9 skipFunctionsCache: false ❯ Current directory /home/runner/work/blog/blog ❯ Config file No config file was defined: using default values. ❯ Context dev Netlify Build Complete
──────────────────────────────────────────────────────────────── (Netlify Build completed in 4m 0.4s)

Build logs: https://app.netlify.com/sites/blog-ecmaker/deploys/6701f5da19eadab9815f1d47 Function logs: https://app.netlify.com/sites/blog-ecmaker/logs/functions?scope=deploy:6701f5da19eadab9815f1d47 Website draft URL: https://6701f5da19eadab9815f1d47--blog-ecmaker.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag. netlify deploy --build --prod

ECMaker / blog

Bug/#77_F12エラー撲滅 #79

手法2 (new)

手法1 (old)

updated

HowTo

ToDo