node.jsのrequire()でjsxファイルを読み込めない

Question

###前提・実現したいこと
node.jsとreachでelectronアプリケーションを作成しようとしています。
electron src
でアプリケーションを実行したところ、
作成した画面が表示されていませんでした。
以下jsのみを記載したディレクトリ構成になります。

src/app/javascripts/
├── main
│   ├── main.js
│   └── timeline-window.js
└── renderer
    ├── components
    │   └── main.jsx
    ├── renderer-main.js
    └── services
        └── twitter.js

###発生している問題・エラーメッセージ

Error: Cannot find module './components/main'

###該当のソースコード
src/app/javascripts/renderer/renderer-main.js

(() =>{
     require('babel-register')(
          {plugins: 'transform-react-jsx'}
     );

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

     //id: rootにMainContentクラスを入れる
     const root = document.getElementById('root');
     ReactDOM.render(React.createElement(MainContent), root);
})();

src/app/javascripts/renderer/components/main.jsx

const React = require('react');
const T = require('../service/twitter');

class Tweet extends React.Component {
   render(){
      const isRetweet = this.props.tweet.
         hasOwnProperty('retweeted_status');
      const status = isRetweet ? this.props.tweet.
         retweeted_status : this.props.tweet.
      const media = status.entities.media || [];
      const firstImage = media.find((item) => {
         return item.type === 'photo';
      });

      return(
         <li className='list-group-item'>
            <img src={status.user.profile_image_url_https}
               className='img-rounded media-object pull-left'
               width='32'
               height='32' />
            <div className='media-body'>
               <strong className='user-name'>
                  {status.user.name}
               </strong>
               <span className='user-screen_name'>
                  @{status.user.screen_name}
               </span>
               <p className='text'>{status.text}</p>
               {firstImage?
                  <img src={firstImage.media_url_https}
                     className='img-rounded media-object media-img' />
                     : null }
            </div>
         </li>
      );
   }
}

//timeline class
class Timeline extends React.Component{
   render(){
      const tweets = this.props.tweets.map((tweet) =>{
         return <Tweet tweet={tweet} key={tweet.id}/>;
      });

      return (
         <ul className='list-group'>
            {tweets}
         </ul>
      );
   }
}

module.exports = class MainContent extends React.Component {
   constructor(props){
      super(props);
      this.state = {tweets: []};
   }

   render(){
      return (
         <div className='window'>
            <div id='window-content' 
            className='window-content'>
               <Timeline tweets={this.state.tweets}/>
            </div>
         </div>
      );
   }

componentDidMount(){
   T.get('statuses/home_timeline')
      .catch(error => {
         console.log(error);
      })
      .then((result) => {
         this.setState({tweets: result.data});
         this.connectStream();
      });
}

connectStream(){
   const stream = T.stream('user');

   stream.on('error',(error) =>{
      throw error;
   });

   stream.on('tweet', (tweet) =>{
      const tweets = this.state.tweets;
      const newTweets = [tweet].concat(tweets);
      this.setState({tweets:newTweets});
   });
  }
};

###試したこと
・nodeのシェルに入り、requireで呼び出そうとしたところ、
ファイルがそもそも見つかりませんでした。

・main.jsxのあるディレクトリで、node main.jsxをしたところ、
syntaxエラーが出たところを見ると、一応ファイル内は読み込めるそうでした。

###補足情報(言語/FW/ツール等のバージョンなど)
node 7.0.0
package.jsonは以下

{
  "private": true,
  "scripts": {
    "start": "electron src"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "electron-prebuilt": "1.2.8"
  },
  "dependencies": {
    "react": "^15.4.0"
  }
}

src/package.jsonは以下

{
  "name": "electron-twitter",
  "version": "1.0.0",
  "description": "twitter client from electron",
  "author": "subaru",
  "license": "ISC",
  "main":"./app/javascripts/main/main.js",
  "devDependencies": {
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-register": "^6.14.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "twit": "2.2.4"
  }
}

かなり調べてみたのですが、どうしてもわからないため、
ご教示いただきたいです。よろしくお願いします。

Answer 1

上の回答にもあるようにそのままでは読み込めないので、
↓下のどれかの対応策はどうでしょうか

• require('./components/main.jsx') と拡張子も指定する
• node-require-jsx を読み込んで require が jsx を認識するように拡張する
• ./components/main.jsx を ./components/main.js にリネームする (ファイルとして)

Comments

[HayateTabata]

・require('./components/main.jsx') と拡張子も指定する
・./components/main.jsx を ./components/main.js にリネームする (ファイルとして)
こちらはすでに両方とも実行しており、結果は同じでした。

・node-require-jsx を読み込んで require が jsx を認識するように拡張する
→こちらの解決策は、読み込む対象のjsxファイルに
`require('node-require-jsx').install()`
を記述するだけということで問題ないでしょうか？

[kt3k]

jsx ファイルの中ではなくて、jsx ファイルの require が走る前のタイミング (たとえば、renderer-main.js の上の方など) で、呼ぶ必要があるかと思います。

ただ、 `require('./components/main.jsx')` この指定がダメだとすると、うまくいかないかもしれません。

`src/app/javascripts/renderer/renderer-main.js` 自体はどこから読み込んでいますか？ script タグで指定していたりしますか？

[HayateTabata]

読み込めませんでした。。。
renderer-main.js自体は、
src/app/html/main.html
からscriptタグで読み込んでいます。

[kt3k]

html から `<script src='path/to/render-main.js'></script>` としてしまうと、render-main.js が、 html のあるディレクトリで実行されたことになって、相対パスの起点がずれてしまっているのではないかなと思います。
なので、src/app/html/ から見た src/app/javascripts/renderer/components/main.jsx なので、
`require('../javascripts/renderer/componets/main.jsx')` としてみてはどうでしょうか、、？

[HayateTabata]

ありがとうございます！読み込めました！