React/Next.jsでのimportができないエラーを解決する方法

React/Next.jsを触りたて、アウトプットしようと思ったけれど、
ここでつまづく！というポイント。

importに関して説明していきます。

最近私はnext.jsを使って簡易的サイトを作ろうと、アウトプットしていたのですが、

「なぜかcomponentsファイルから呼び出せない」問題がありまして2日ほど苦難しておりました。

実際のエラー文章↓

プロパティ 'mainVisual' は型 'JSX.IntrinsicElements' に存在しません。

じゃあそこで何をすればいいのか。
試行錯誤した結果。。。

「初歩的なミス😱😱」

「でも同じ人いるだろう...!」

というわけで同じような初歩的なミスに何日も悩むことがないように、
確認して欲しいことと、ちょっとばかりそこで得たテクニックなどもお伝えしようと思います。

有益な内容ではないから、そこはどうか勘弁してくれ🙏

解決するために確認すべきこと

1. ファイルが大文字になっているか
2. パス指定を誤っていないか。

この2点を確認すべき。

自分の場合は、まさに1番の理由でimportできませんでした。

間違った記載に関して

まずはフォルダ構成から。

src
∟components
　∟mainVisual
∟mainVisual.tsx
∟pages
∟index.tsx
∟_app.tsx

mainVisual.tsx

export const mainVisual: React.FC = () => {
  return (
  <>
   <p>ここにテキスト</p>
  <>
 )
}

index.tsx

import { mainVisual } from ../components/mainVisual/mainVisual

const Home = () => {
 return (
  <mainVisual />
  
 );
}

このように記載していたが、これでは読み込めず
エラー文章

プロパティ 'mainVisual' は型 'JSX.IntrinsicElements' に存在しません。

と出るはず。

べつに相対パスだけど、ディレクトリ指定は間違っていないし、
関数の書き方も間違っているわけではない、、、

と思ってたところ。

「ファイルを大文字から書かないといけない。」

という理由でした。
なんと初歩的ーーーーー！！！

というわけで。

解決方法

src
∟components
　∟mainVisual→MainVisual
∟mainVisual.tsx→MainVisual
∟pages
∟index.tsx
∟_app.tsx

mainVisual.tsx

export const MainVisual: React.FC = () => {
  return (
  <>
   <p>ここにテキスト</p>
  <>
 )
}

index.tsx

import { MainVisual } from ../components/MainVisual/MainVisual

const Home = () => {
 return (
  <MainVisual />
 );
}

これで完了！

なんと初歩的な。。。

ちなみに、MainVisualファイル下の.tsxは、
index.tsxでも可能です🙋‍♂️

あとは、相対パスでやるのではなく、
絶対パスで記載するほうがディレクトリ指定も間違えないで済むので設定してみてくださいね！

tsconfig.json

{
  "compilerOptions": {
   "baseUrl": "."
  }

以上！importできない時の解決方法でしたー！
みてくれてありがとうございます🙇‍♂️