(Next.js)コンポーネントをインポートするとエラーになる

Question

Next.jsとTypescriptで簡単なアプリを作っています。
vsコードでトップページにコンポーネントをインポートすると、下記の画像の通り、コンポーネントをインポートする文の下に波線がついており、ブラウザにはエラーメッセージが出ています。

トップページのコード

ブラウザ

パスのスペルミスはありません。ダイナミックインポートを試しましたが駄目でした。
対処法を教えていただけますと幸いです。

Comments

[hoshi-takanori]

../ じやなくて ./ でしょうね。

Answer 1

../ から始めるのが間違いで、 ./ とすれば治ると思います。

相対パスは、カレントフォルダをピリオドひとつ「.」、一つ上の階層のフォルダをピリオドふたつ「..」で表し、フォルダをスラッシュ「/」または円マーク「￥」で区切ります。

https://www.yamanjo.net/knowledge/file/file_05.html

Answer 2

この回答はGPT-4による自動生成回答です

エラーメッセージが表示されていないため、具体的な解決策を提案することが難しいですが、一般的なトラブルシューティングの方法を提案します。

1. インポートのパスが正しいか確認:
   インポート文のパスが正しいか再度確認してください。

   import ComponentName from './path/to/ComponentName';
   

2. コンポーネントのエクスポートが正しいか確認:
   インポートしようとしているコンポーネントが正しくエクスポートされているか確認してください。

   // ComponentName.tsx or ComponentName.ts
   export default function ComponentName() {
     // component logic
   }
   

3. VSCodeの再起動:
   たまに、VSCodeがキャッシュや設定の問題で正常に動作しないことがあります。VSCodeを再起動して、問題が解決するか確認してください。

4. 依存関係の再インストール:
   node_modulesフォルダを削除し、npm installまたはyarnコマンドを実行して依存関係を再インストールしてください。

もし、これらの方法で問題が解決しない場合は、エラーメッセージやコードの詳細を提供してください。