モジュールが見つかりません：エラー：

Question

Imは私のHomepage.jsxファイルに

import SignupLoginForm from '../container/SignupLoginForm'; 

を使用して、私のSignupLoginForm.jsxファイルをインポートしようとしている「ファイル」または「ディレクトリ」を解決できません。

SignupLoginForm.jsxは、client/container/SignupLoginForm.jsxに位置しています。 Homepage.jsxはclient/components/homepage/HomePage.jsxにあります。

私はこのエラーを取得する：あなたのcontainerフォルダには、二回../を使用する必要がHomepage.jsxファイルから2つのレベルアップしているので

import SignupLoginForm from '../../container/SignupLoginForm'; 

：

ERROR in ./client/components/homepage/HomePage.jsx 
Module not found: Error: Cannot resolve 'file' or 'directory' ../container/SignupLoginForm in /Users/Proj_V/client/components/homepage 
@ ./client/components/homepage/HomePage.jsx 23:23-62 

Answer 1

はこれを使用してください。

意味の./、../ -

./は、現在のフォルダに滞在し、この内のファイルを検索を意味し、カレントディレクトリを意味します。

../は、現在のディレクトリ/ファイルの親を意味し、1つ上のレベルに移動してファイルを検索することを意味します。例については

は、ツリーデータ構造として、あなたのフォルダ構造を想像してみて、あなたがFILE1からFILE2をインポートしたい、これらのパスで二つのファイルfile1.jsとfile2.jsを持っていると言うます：

ケース1

file1 - >a/b/c/file1.js

file2 - >a/b/c/file2.js

同じフォルダにあるファイルuは、./file2.jsのように直接インポートできます。

ケース2

file1 - >a/b/c/file1.js

file2 - この場合は>a/b/c/d/file2.js

内部file1の同じレベルにあるdを提示FILE2、あなたは次のようにそれをインポートすることができますこれは./d/file2.jsです。

ケース3。

file1 - >a/b/c/file1.js

file2からfile2存在file1の親レベルでこの場合は>a/b/file2.js

、あなたはこのように、../を使用して、1つのステップを上がる必要があるので：../file2.js

ケース4

：この場合は>a/file2.js

file1の親の親のレベルでfile2存在するので、あなたは、このように二回../を使用して2のステップアップを移動する必要があります - 10

file1 - >a/b/c/file1.js

file2。

簡易ルール：./は、同じフォルダ内で検索することを意味します。../は、1ステップ上に移動して検索します。 .././

Answer 2

上記のMayankの答えに加えて、私はあなたがインポートしてルートベースのパスで必要とする 'babel-root-import'プラグインを使うことをお勧めします。

例：あなたのホームページからは、以下のようにSignupLoginFormにアクセスすることができます。

import SignupLoginForm from '~/container/SignupLoginForm'; 

詳細はhttps://www.npmjs.com/package/babel-root-import