webpack/reactjsアプリでモジュールが見つかりませんでした。

Question

私はmain.jsで作成したコンポーネントでreactjs/WebPACKのアプリを作成しました：私はES6でインポートおよびエクスポートのまわりで私の頭を取得しようと同じディレクトリにモジュールを作成しています

import React from 'react'; 
import cube from 'my-module'; 

class MainLayout extends React.Component { 

    constructor(props) { 
     super(props); 
     console.log('testing=main constructor') 

     console.log(cube(3)); 

    } 


    render() { 
     console.log('main render') 
     return (
      <div>hello</div> 
     ); 
    } 
} 

export default MainLayout 

：

// module "my-module.js" 
export default function cube(x) { 
    return x * x * x; 
} 

は、しかし、私はこのエラーを取得しています：

ERROR in ./app/components/layouts/main/main.js 
Module not found: Error: Cannot resolve module 'my-module' in ... 

どのように私はこのエラーを解決することができますか？

Answer 1

モジュールの名前の前にパス（./で始まる）を指定しないと、webpack（通常のnodejsモジュール解決を使用）は、node_modulesフォルダのmy-moduleを検索します。

だからあなた MainLayoutクラスを含むファイルが my-module.jsと同じフォルダにある場合、あなたのimport文は次のようになります。

import cube from './my-module' 

それは1つ上のレベルは次のようになりました場合は、次の

import cube from '../my-module' 

そして、その上で1：

import cube from '../../my-module' 

など。

別名でwebpackを設定したり、トップレベルモジュールのように動作する特定のファイルについて知ってもらうことができます。その後、

node_modules/ 
src/ 
    node_modules/ 
    app.js 
    my-module.js 

webpack.config.js 

あなたは常にノードが最初にあなたのsrc/node_modulesフォルダになりますので、パスを指定せずに独自のモジュールのいずれかを探すことができますこの方法：私は非常に有用であることが分かってきた別の技術は次のようにアプリを構築することです見つけられない場合は、すべてのnpmパッケージが存在する最上位のnode_modulesフォルダを探します。この場合でもsrc/node_modulesを.gitignoreに入れないでください！