Nextjsでかんたんなサイトを作ろうと思っていると、Next.jsのpageのベースとなるファイルである_app.tsxというファイルでこんなエラーがビルド時に表示されて困りました。
1日これで潰したかもしれないくらいハマりました。
Type error: 'Component' cannot be used as a JSX component.
前提
ツールやアプリのバージョンは以下です。
| TH | バージョン | 確認方法 |
|---|---|---|
| docker | 20.10.14 | コマンド(docker -v)で確認 |
| Node | 14.17.0 | Dockerfileで確認 |
| Next.js | 12.1.4 | package.jsonより |
| yarn | 1.22.5 | コマンド(yarn -v) で確認 |
「Type error: 'Component' cannot be used as a JSX component.」とは？
ここで書いているエラーを読んでみると、「ComponentがJSXコンポーネントとして使われてないですよ」とというエラーみたいです。
Type error: 'Component' cannot be used as a JSX component.
このエラーが発生しているファイルである _app.tsx にtailwind cssを有効にしたくらいしか変更していないのでよくわからず、なんの手がかりにもなりませんでした。
_app.tsx
import '../styles/globals.css';
import React from 'react';
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp
vscodeが勝手に警告しているだけかと思い、(yarn build)ビルドをしてみましたけど、結果は同じでした。
./pages/_app.tsx:7:6
Type error: 'Component' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/usr/src/app/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
5 | function MyApp({ Component, pageProps }: AppProps) {
6 | return (
> 7 | <Component {...pageProps} />
| ^
8 | );
9 | }
10 |
error Command failed with exit code 1.
解決策
package.jsonでresolutionsで依存関係を解決しました。
解決はできたけども、なぜこれでうまくいくのかはよくわかりませんでした。（もう少し調査する必要がありますね。）
package.json
"dependencies": {
"react": "18.0.0",
"react-dom": "18.0.0"
},
"resolutions": {
"@types/react": "17.0.40"
},
"devDependencies": {
"@types/react": "17.0.14",
"@types/react-dom": "17.0.14"
}
Discussion