Webpack Ошибка не может решить файл или каталог (React)

Question

Webpack работает нормально, когда все компоненты находятся в одном файле. Когда я пытаюсь отделить каждый компонент к своему файлу я получаю сообщение об ошибке:

'module not found: error: cannot resolve file or directory'.

Я использую окно 10.

структура папок:

reacttest (root) 
    node_modules 
    public 
     components 
     GreeterMassage.jsx 
     app.jsx 
    bundle.js 
    index.html 
package.json 
server.js 
webpack.config.js 

app.jsx код:

const React = require('react'); 
    const ReactDOM = require('react-dom'); 
    const GreeterMassage = require('./components/GreeterMassage'); 

    const GreeterForm = React.createClass({ 
     onFormSubmit: function(e) { 
     e.preventDefault(); 

     const updates = {} 
     const name = this.refs.name.value; 
     const massage = this.refs.massage.value; 

     if(name.length > 0) { 
      this.refs.name.value = ''; 
      updates.name = name; 
     } 
     if(massage.length > 0) { 
      this.refs.massage.value = ''; 
      updates.massage = massage; 
     } 
     this.props.onNewData(updates); 
     }, 
     render: function() { 
     return (
      <form onSubmit={this.onFormSubmit}> 
      <div> 
       <input type="text" ref="name" placeholder="Name"/> 
      </div> 
      <div> 
       <textArea type="text" ref="massage" placeholder="Massage"/> 
      </div> 
      <div> 
       <button>Set</button> 
      </div> 
      </form> 
     ); 
     } 
    }); 

    const Greeter = React.createClass({ 
     getDefaultProps: function() { 
     return { 
      name: 'React', 
      massage: 'Default massage' 
     }; 
     }, 
     getInitialState: function() { 
     return { 
      name: this.props.name, 
      massage: this.props.massage 
     }; 
     }, 
     handleNewData: function(updates) { 
     this.setState(updates); 
     }, 
     render: function() { 
     const name = this.state.name; 
     const massage = this.state.massage; 
     return (
      <div> 
      <GreeterMassage name={name} massage={massage}/> 
      <GreeterForm onNewData={this.handleNewData}/> 
      </div> 
     ); 
    } 
    }); 

    const firstname = 'My First Name'; 

    ReactDOM.render(
    <Greeter name={firstname}/>, 
    document.getElementById('app') 
); 

GreeterMassage.jsx код:

const React = require('react'); 

    const GreeterMassage = React.createClass({ 
     render: function() { 
     const name = this.props.name; 
     const massage = this.props.massage; 
     return (
      <div> 
      <h1>Hello {name}</h1> 
      <p>{massage}</p> 
      </div> 
     ); 
     } 
    }); 

    module.exports = GreeterMassage; 

webpack.config.js

module.exports = { 
     entry: './public/app.jsx', 
     output: { 
     path: __dirname, 
     filename: './public/bundle.js' 
     }, 
     resolve: { 
     extesions: ['', '.js', '.jsx'] 
     }, 
     module: { 
     loaders: [ 
      { 
      loader: 'babel-loader', 
      query: { 
       presets: ['react', 'es2015'] 
      }, 
      test: /\.jsx?$/, 
      exclude: /(node_modules | bower_components)/ 
      } 
     ] 
     } 
    }; 

Answer 1

app.jsx находится в том же каталоге, GreeterMassage.jsx и импорта по отношению к файлу делает импорт, поэтому он должен быть:

const GreeterMassage = require('./GreeterMassage');