web-dev-qa-db-ja.com

Reactコンポーネントをインポートできません-モジュールが見つかりません

React.jsで始めたばかりで、コンポーネントをインポートできません。

このチュートリアル（YouTubeリンク） が続くこの構造を持っています：

-- src
----| index.html
----| app
------| index.js
------| components
--------| MyCompontent.js

これは私の index.js：

import React from 'react';
import { render } from 'react-dom';

import { MyCompontent } from "./components/MyCompontent";

class App extends React.Component {
    render() {
        return (
            <div>
              <h1>Foo</h1>
              <MyCompontent/>
            </div>
        );
    }
}

render(<App />, window.document.getElementById('app'));

これは MyComponent.js：

import React from "react";

export class MyCompontent extends React.Component {
  render(){
    return(
      <div>MyCompontent</div>
    );
  }
}

このwebpackファイル（GitHubリンク） を使用しています。

ただし、これを実行すると、モジュールのロードに失敗します。

ブラウザコンソールにこのエラーが表示されます。

エラー：モジュール「./components/MyCompontent」が見つかりません

[WDS] Hot Module Replacement enabled.  bundle.js:631:11
[WDS] Errors while compiling.  bundle.js:631:11
./src/app/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./components/MyCompontent in /home/kuno/code/react-hoteli/src/app
resolve file
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.js doesn't exist
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent.json doesn't exist
resolve directory
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent/package.json doesn't exist (directory description file)
  /home/kuno/code/react-hoteli/src/app/components/MyCompontent doesn't exist (directory default file)
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.webpack.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.web.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.js]
[/home/kuno/code/react-hoteli/src/app/components/MyCompontent.json]
 @ ./src/app/index.js 11:20-56  bundle.js:669:5

ここで何が悪かったのかわかりません。

javascriptreactjswebpack
18
Kunok

インポートにタイプミスがあります。 MyCompontentをリクエストしています。への変更：

import MyComponent from "./components/MyComponent";

そして、すべてのタイプミスも。

17
Omri Aharon

ここに来る人のためにwithoutタイプミスでWebpackを使用している場合は、次のような節を確認してください：

resolve: {
    extensions: [".jsx", ".js"]
},

webpack.config.jsで。

これにより、トランスパイラーは次のようなステートメントを解決するようになります。

import Setup from './components/Setup'

に

import Setup from './components/Setup.jsx'

この方法では、拡張機能は必要ありません。

33
Parth Mehrotra

「./components/MyCompontent.js」からMyCompontentをインポートしてみることができます。

このような

import MyCompontent from "./components/MyCompontent.js";
2
RainDev

ファイル名はMyComponent.jsであると書きました。

したがって、インポートは次のようになります。

import { MyCompontent } from './components/MyComponent.js'
0
Anish Hirlekar

私にとっての問題は、インポート行が正しく生成されなかったことです。私はこのシナリオを持っています：

--src
----elements
-----myCustomText.tsx

これはmyCustomText.tsxファイルです。

export interface Props {
  text: string;
}

const MyCustomText = ({ text }: Props) => (
  <Text>{text}</Text>
);

export default MyCustomText

生成されたインポートは次のとおりです。

import MyCustomText from '../../elements/MyCustomText';

そしてこれに変更しました：

import MyCustomText from '../../elements/myCustomText'

生成されたインポート行が自動的に間違って生成された理由がわかりません。

0
Adrian Buciuman