React.jsでモジュール（見つかりません）を解決できません

明らかな質問をしているとは信じられませんが、それでもコンソールログにエラーが表示されます。

コンソールに、ディレクトリ内にモジュールが見つからないと表示されますが、タイプミスがないか少なくとも10回チェックしました。とにかく、これがコンポーネントコードです。

ルートにヘッダーをレンダリングしたい

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

これはHeaderコンポーネントです

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

モジュールがこの場所./src/components/header/headerにあることを少なくとも10回確認しましたが、そうです（フォルダー「header」には「header.js」が含まれています）。

それでも、Reactはまだこのエラーをスローします：

コンパイルに失敗しました

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npmテストは同じことを言います。

私たちが通常使用する方法は、import相対パスに基づいています。

.そして..私たちが移動するために使用する方法と似ているterminalようなcd ..ディレクトリの外出するとmv ~/file .移動するためにfile、現在のディレクトリに。

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

あなたの場合、App.jsはsrc/ディレクトリにあり、header.jsはにありsrc/componentsます。importあなたのだろうimport Header from './components/header'。これは大まかに私の現在のディレクトリに変換され、ヘッダーファイルを含むコンポーネントフォルダを見つけます。

さて、からheader.js、あなたがからimport何かをする必要cardがあるなら、あなたはこれをするでしょう。import Card from '../containers/card'。これは、現在のディレクトリから移動して、カードファイルを含むフォルダ名コンテナを探すことを意味します。

import React, { Component } from 'react'これは始まらない./か、../または/そのためのノードがでモジュールを探し始めますnode_modulesまで、特定の順序でreact発見されました。詳細については、こちらをご覧ください。

react-create-appを使用してアプリケーションを作成する場合は、環境変数を設定することを忘れないでください。

NODE_PATH=./src

または、.envファイルをルートフォルダに追加します。

にNODE_PATH環境変数として追加すること.envは非推奨であり、、"baseUrl": "./src"をcompilerOptionsinjsconfig.jsonまたはに追加することで置き換えられtsconfig.jsonます。

参照

package-lock.jsonファイルを削除してから実行しました

npm install

さらに読む

私の場合、エラーメッセージは

Module not found: Error: Can't resolve '/components/body

すべてが正しいディレクトリにあった間。

問題body.jsxをbody.js解決するために名前を変更していることがわかりました。

だから私はこのコードを追加しwebpack.config.jsて解決しjsxましたjs

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

そして、ビルドエラーがなくなりました！

ヘッダーの二重使用だと思います。自分と同じようなことを試したところ、問題が発生しました。コンポーネントファイルを大文字にして他のファイルと一致させたところ、機能しました。

import Header from './src/components/header/header';

する必要があります

import Header from './src/components/header/Header';

同様の問題がありました。

原因：

import HomeComponent from "components/HomeComponent";

解決：

import HomeComponent from "./components/HomeComponent";

注： ./コンポーネントの前でした。使用方法については、上記の@ZacKwanの投稿を読むことができますimport

新しいreactアプリを作成したときに同じ問題に直面し、https：//github.com/facebook/create-react-app/issues/2534ですべてのオプションを試しまし たが、役に立ちませんでした。新しいアプリのポートを変更する必要があり、それで機能しました。デフォルトでは、アプリはポート3000を使用します。次のようにpackage.jsonでポートを8001に変更しました。

  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Reactアプリでモジュールのインポートを処理するためのより良い方法があります。これを行うことを検討してください：

jsconfig.jsonベースフォルダにファイルを追加します。これは、package.jsonを含む同じフォルダーです。次に、ベースURLのインポートを定義します。

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

これで、電話../../をかけるのではなく、代わりにこれを簡単に行うことができます。

import navBar from 'components/header/navBar'
import 'css/header.css'

'components /'は '../components/'とは異なることに注意してください

このようにすっきりしています。

ただし、同じディレクトリにファイルをインポートする場合は、次の方法も実行できます。

import logo from './logo.svg'

あなたがそれらのフォルダにいる、srcまたはpublicあなたがそれらのフォルダから出なければならない場合、あなたはプロジェクトフォルダにいる必要があります。あなたのreact-project名が 'hello-react'であると仮定しますcd hello-react

importHeaderを 'から変更する必要があります。/ src / components / header / header 'から

' .. / src / components / header / header'からヘッダーをインポートします

appフォルダーで「npminstall」を実行してみてください。これも問題を解決する可能性があります。それは私のために働いた。

私は同じ問題に直面していて、それを解決しました。index.jsファイルがsrcフォルダー内にあるかどうかを確認し、インポートするファイルが何であれ、それを含むフォルダーもsrcフォルダー内にある必要があります。

つまり、コンポーネントフォルダーがフォルダーの外にある場合は、srcフォルダーのsrc外のファイルsrcはインポートされないため、エディターのフォルダー内にドラッグするだけです。

次に、./components/header/header（この場合） を使用してインポートできるようになります。

インポートステートメントを確認します。セミコロンで終了する必要があります。いずれかを見逃すと、このエラーが発生します。

また、次のインポートステートメントがコンポーネントに追加されているかどうかも確認してください。

import {threadId} from'worker_threads ';

その場合は、その行を削除します。わたしにはできる。

私の場合、入力は正しいのですnpm startが、バグがある可能性があります（少なくとも、WindowsおよびLinuxのHyperターミナルで使用します）。ファイルを別のフォルダーに移動すると、npmstartはこれらの変更を認識しません。npmの開始プロセスをキャンセルし、移動し、保存してから実行するnpm start必要があります。ファイルが表示されます。

私の場合、コンポーネントファイルの名前を変更し、VSCodeで次のコード行を追加します。

import React, { Component } from "./node_modules/react";

だから私は削除することで修正しました： ./node_modules/

import React, { Component } from "react";

乾杯！