###前提・実現したいこと
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
node.js
1(() =>{ 2 require('babel-register')( 3 {plugins: 'transform-react-jsx'} 4 ); 5 6 const React = require('react'); 7 const ReactDOM = require('react-dom'); 8 const MainContent = require('./components/main'); 9 10 //id: rootにMainContentクラスを入れる 11 const root = document.getElementById('root'); 12 ReactDOM.render(React.createElement(MainContent), root); 13})();
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" } }
かなり調べてみたのですが、どうしてもわからないため、
ご教示いただきたいです。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/03 04:48
2017/02/03 05:50 編集
2017/02/03 12:40
2017/02/03 15:46
2017/02/06 03:01