リバースコードがwebpackでコンパイルされていません

Question

何らかの理由でコンパイルされません。奇妙なことは、ブラウザのインタプリタを使用するとうまくいくということです。

var Cookies = require('cookies'); 

var cookieParser = require('cookie-parser'); 


var name = document.getElementById('name').innerHTML; 
//var name = req.user.name; 

    var start = false; 
    var Assets = React.createClass({ 
    getInitialState: function(){ 
     return({ 
     assets: [], 
     secondsElapsed: 0 
     }); 
    }, 
    tick: function() { 
     //this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 
     if(start === true){ 
     console.log(name); 

     var myHeaders = new Headers(); 

     var token = new Cookies(req,res).get('access_token'); 

     myHeaders.append('acess_token', token); 

     var myInit = { method: 'GET', 
       headers: myHeaders}; 

     fetch('/api/user/all/?name='+name, myInit).then(function(data){ 
      return data.json(); 
     }).then(json => { 
      this.setState({ 
       assets: json 
      }); 
     }); 
    } 
    }, 
    componentDidMount: function() { 
     this.interval = setInterval(this.tick, 1000); 
    }, 
    componentWillUnmount: function() { 
     clearInterval(this.interval); 
    }, 
    render: function(){ 
     var assets = this.state.assets; 
     assets = assets.map(function(asseti,index){ 
     return(
      asseti.map(function(asset, index){ 
      return(
       <li key={index}> 
         <span className={asset.active}></span> 
         <span>{asset.name}</span> 
         <span >{asset.description}</span> 
         <span>{asset.location.coordinates[0]}{asset.location.coordinates[1]}</span> 
       </li> 
      ) 
      }) 
     ) 
     }); 
     return(
     <div> 
      <form onSubmit={this.handleSubmit}> 
      <input type="submit" value="Find assets" /> 
      </form> 
      {assets} 
     </div> 
    ); 
    }, 
    handleSubmit: function(e){ 
     e.preventDefault(); 
     start = true; 
    // name = this.refs.name.value; 

     fetch('/api/user/all/?name='+name).then(function(data){ 
     return data.json(); 
     }).then(json => { 
     this.setState({ 
      assets: json 
     }); 
     }); 
    } 
    }); 

ReactDOM.render(<Assets />, document.getElementById('assets')); 

Webpack.config.js：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
<script src="https://unpkg.com/react@15/dist/react.js"></script> 
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> 

は、コードを反応させるの

var path = require('path'); 

module.exports = { 
    entry: path.resolve(__dirname, 'puplic') + '\\js\\baseReact.js', 
    output: { 
     path: path.resolve(__dirname, 'dist') + '/app', 
     filename: 'bundle.js', 
     publicPath: '/app/' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       include: path.resolve(__dirname, 'public/js'), 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015', 'stage-0'] 
       } 
      }, 
      { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader' 
      } 
     ] 
    }, 
    devServer: { 
historyApiFallback: true 
} 
}; 

エラー：

ERROR in ./puplic/js/baseReact.js                 
Module parse failed: C:\Users\test\Documents\GPSTracker\puplic\js\baseReact.js Unexpected token (
53:14)                       
You may need an appropriate loader to handle this file type.          
|   asseti.map(function(asset, index){             
|    return(                   
|    <li key={index}>                 
|       <span className={asset.active}></span>         
|       <span>{asset.name}</span>            

私は何かが足りないような間抜けな何かをしなければならない把握それは奇妙なブラウザで動作します。それは実行される前にコンパイルされていたのとは対照的に解釈されるので、いくつかのエラーを覆っていますか？

Answer 1

コメントに基づいて、fetchインポートが不足している可能性があります。フェッチはnot readily available in all browsersです。

npmパッケージwhatwg-fetchには、ウェブパック対応環境でfetchを動作させる方法が具体的に記載されています。

Installation

npm install whatwg-fetch --save

or

bower install fetch .

You will also need a Promise polyfill for older browsers. We recommend taylorhakes/promise-polyfill for its small size and Promises/A+ compatibility.

For use with webpack, add this package in the entry configuration option before your application entry point:

entry: ['whatwg-fetch', ...]

For Babel and ES2015+, make sure to import the file (in your react-components):

import 'whatwg-fetch'

また、間隔の点では通常のJavaScriptスタイルガイドからTADを逸脱しているあなたのコード、を見て、私はこれらのようなエラーのためのより良いフィードバックをお使いの環境でeslint稼働取得に見えると思います。もしあなたがeslintを有効にしていたなら、最初にfetchをインポートせずに、このようなことをしようとするとすぐにfetch is undefinedを得るでしょう。

私のもう一つの個人的なメモは、あなたのwebpack設定を改ざんする前に、ファイルにwhatwg-fetchをインポートするだけです。エントリとして追加する必要はないかもしれません。

運が良かった！