SSR(Server Side Rendering)を採用したのに、静的な内容でも’use client’を付けないとエラーになったので、試行錯誤。結果、原因が特定できたのでメモしておきます。
Material UI(MUI)を導入して、App Routerを使っています。
→ React事始め：フレームワークとUIコンポーネントライブラリ選定＋トップページ実装
Unhandled Runtime Error Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.
前提と現象
MUI Core libraries support the Next.js App Router – MUI
we've updated all MUI Core components to ship with the "use client" directive, to let your apps know that these are Client Components (since Server Components are now the default). = すべての MUI コア コンポーネントをディレクティブに同梱するように更新し"use client"、 アプリにこれらがクライアント コンポーネントであることを認識できるようにしました (サーバー コンポーネントがデフォルトになったため) they do support server-side rendering (SSR). = サーバーサイド レンダリング (SSR) はサポートされています。
サポートされているので出来る筈ですが、
Pageは’use client’がなくても動くのに、Componentはないとエラーになりました。何故？
動的要素以外は、サーバーで組み立てたいところ。
src/app/page.tsx
import { Grid, Card, CardActionArea, CardContent, Typography, Link, Box } from "@mui/material"
src/app/components/SignUp.tsx
'use client'
import { Card, CardActionArea, CardContent, CardActions, Typography, Divider, Button, Link } from "@mui/material"
このページにあるサンプルでは出来ている。
material-ui/examples/material-ui-nextjs-ts/src/components/MediaCard.tsx at master · mui/material-ui · GitHub
原因
“@mui/material”で1行でimportしましたが、個別に書かないとダメだった。
多分、共通の何かが悪さしているんだろうな。
Pageの方は1行で問題ないけど、トラブルを防ぐ為、同じ書き方にしたいので、全体的に”@mui/material”を使うのは止める事にしました。
ドキュメントも大事だけど、コード見るのも大事ですね。
src/app/components/SignUp.tsx
- 'use client'
- import { Card, CardActionArea, CardContent, CardActions, Typography, Divider, Button, Link } from "@mui/material"
+ import Card from '@mui/material/Card'
+ import CardActionArea from '@mui/material/CardActionArea'
+ import CardContent from '@mui/material/CardContent'
+ import CardActions from '@mui/material/CardActions'
+ import Typography from '@mui/material/Typography'
+ import Divider from '@mui/material/Divider'
+ import Button from '@mui/material/Button'
+ import Link from '@mui/material/Link'
