2016-12-25 23 views
5

React.jsを使い始めましたが、コンポーネントをインポートできませんでした。 this tutorial (YouTube link)が続くようReactコンポーネントをインポートできません - モジュールが見つかりません

私はこのような構造を持っている:

-- 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> 
    ); 
    } 
} 

私はthis webpack file (GitHub link)を使用しています。

しかし、これを実行すると、モジュールが読み込まれません。

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

Error: Cannot find module "./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 

はここに何が悪かったのかを把握することはできません。

答えて

3

インポートに入力ミスがあります。あなたはMyCompontentをリクエストしています。変更:

import MyComponent from "./components/MyComponent"; 

また、すべてのタイプミス。

+0

まだ同じエラーがあります。 'エラー:モジュールが見つかりません" ./components/MyCompontent " – Kunok

+1

あなたはタイプミスがあります。関連性があります:' MyComponent'ではなく 'MyCompontent' –

+0

はい、タイプミスでした。ごめんなさい。 – Kunok

1

あなたは "./components/MyCompontent.js" あなたはファイル名がMyComponent.jsであることを書かれているこの

import MyCompontent from "./components/MyCompontent.js"; 
0

よう

からMyCompontentをインポートしようとすることができます。

このように、あなたのインポートがせずにここにタイプミスを来て、誰のために

import { MyCompontent } from './components/MyComponent.js' 
12

ようになっているはず、とのWebPACKを使用している、このような句をチェックしてください:

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

webpack.config.jsにあります。

import Setup from './components/Setup' 

拡張子を必要としないこの方法で

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

へ:

は、これはのような文を解決するために、あなたのtranspilerを伝えます。

関連する問題