Ошибка анализа: Неожиданный токен <Reactjs

Question

error message: 

ERROR in ./src/index.jsx 

C:\Users\Steven\Desktop\Social-Wall\src\index.jsx 
    26:7 error Parsing error: Unexpected token < 

✖ 1 problem (1 error, 0 warnings) 

У меня возникла эта ошибка при запуске сервера webpack dev. Я попытался запустить его через плункер, и это сработало. Я просто не могу понять, в чем проблема. Я попытался обернуть компонент возврата, но он тоже не работает.

so line 26 is the <img> here: 

render: function() { 
    var img = (this.props.showImage) ? this.props.src : this.props.loader; 
    return (

     <img src={img} alt={this.props.alt} /> 
    ); 
    } 

---

and this is my index.jsx file: 

// Product list item image 
var ProductImage = React.createClass({ 
    getDefaultProps: function() { 
    return { 
     loader: '../img/loader.gif', 
     showImage: false 
    }; 
    }, 

    componentDidUpdate: function(prevProps) { 
    if (! this.props.showImages && prevProps.viewport) { 
     this.updatePosition(); 
    } 
    }, 

    updatePosition: function() { 
    var el = this.getDOMNode(); 
    this.props.updateImagePosition(el.offsetTop, el.offsetHeight); 
    }, 

    render: function() { 
    var img = (this.props.showImage) ? this.props.src : this.props.loader; 
    return (
     <img src={img} alt={this.props.alt} /> 
    ); 
    } 
}); 

// Product list item 
var Product = React.createClass({ 
    getInitialState: function() { 
    return { 
     showImage: false 
    }; 
    }, 

    getDefaultProps: function() { 
    return { 
     showImage: false 
    }; 
    }, 

    componentWillMount: function() { 
    // allow image display override 
    if (this.props.showImage) { 
     setShowImage(true); 
    } 
    }, 

    updateImagePosition: function(top, height) { 
    // image is already displayed, no need to check anything 
    if (this.state.showImage) { 
     return; 
    } 

    // update showImage state if component element is in the viewport 
    var min = this.props.viewport.top; 
    var max = this.props.viewport.top + this.props.viewport.height; 

    if ((min <= (top + height) && top <= (max - 300))) { 
     this.setShowImage(true); 
    } 
    }, 

    setShowImage: function(show) { 
    this.setState({ 
     showImage: !!(show) 
    }); 
    }, 

    render: function() { 
    return (
     <div> 
     <h2>{this.props.title}</h2> 
     <div> 
      <ProductImage src={this.props.image} alt={this.props.title} viewport={this.props.viewport} showImage={this.state.showImage} 
      updateImagePosition={this.updateImagePosition} /> 
     </div> 
     </div> 
    ); 
    } 
}); 

// Product list 
var ProductList = React.createClass({ 
    getInitialState: function() { 
    return { 
     viewport: { 
     top: 0, 
     height: 0 
     } 
    }; 
    }, 

    componentDidMount: function() { 
    window.addEventListener('scroll', this.updateViewport, false); 
    window.addEventListener('resize', this.updateViewport, false); 
    this.updateViewport(); 
    }, 

    componentWillUnmount: function() { 
    window.removeEventListener('scroll', this.updateViewport); 
    window.removeEventListener('resize', this.updateViewport); 
    }, 

    updateViewport: function() { 
    // TODO: debounce this call 
    this.setState({ 
     viewport: { 
     top: window.pageYOffset, 
     height: window.innerHeight 
     } 
    }); 
    }, 

    render: function() { 
    var self = this; 

    var itemViews = this.props.items.map(function(item) { 
     return <Product title={item.title} image={item.image} viewport={self.state.viewport} /> 
    }); 

    return (
     <div> 
     <h1>Items</h1> 
     {itemViews} 
     </div> 
    ); 
    } 
}); 

var items = [ 
    { title: 'Kitten 1', image: 'http://placekitten.com/311/313' }, 
    { title: 'Kitten 2', image: 'http://placekitten.com/302/302' }, 
    { title: 'Kitten 3', image: 'http://placekitten.com/303/303' }, 
    { title: 'Kitten 4', image: 'http://placekitten.com/304/304' }, 
    { title: 'Kitten 5', image: 'http://placekitten.com/305/305' }, 
    { title: 'Kitten 6', image: 'http://placekitten.com/306/306' }, 
    { title: 'Kitten 7', image: 'http://placekitten.com/307/307' }, 
    { title: 'Kitten 8', image: 'http://placekitten.com/308/308' }, 
    { title: 'Kitten 9', image: 'http://placekitten.com/310/310' }, 
    { title: 'Kitten 10', image: 'http://placekitten.com/311/311' } 
]; 

var el = document.getElementById('app'); 
ReactDOM.render(<ProductList items={items} />, el); 

это мой webpack.config.js

const path = require('path'); 

const PATHS = { 
    dist: path.resolve(__dirname, 'dist'), 
    src: path.resolve(__dirname, 'src'), 
    css: path.resolve(__dirname, 'dist/css') 
}; 

module.exports = { 
    entry: [ 
     'webpack-dev-server/client?http://0.0.0.0:8080', 
     'webpack/hot/only-dev-server', 
     PATHS.src 
     ], 
    output: { 
     path: PATHS.dist, 
     filename: 'bundle.js' 
    }, 
    module: { 
     preLoaders: [ 
      { 
       test: /\.jsx?$/, 
       include: PATHS.src, 
       loader: 'eslint-loader' 
      } 
     ], 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel' 
      }, 
      { 
       test: /\.css?$/, 
       include: PATHS.src, 
       loaders: ['style', 'css'] 
      } 
     ] 
    }, 
    resolve: { 
     modulesDirectories: [ 
      'node_modules', 
      'src' 
     ], 
     extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
     contentBase: PATHS.dist, 
     inline: true, 
     stats: 'errors-only', 
     hot: true 
    }, 
    eslint: { 
     configFile: './.eslintrc' 
    } 
}; 

Это мой .babelrc

{ 
    "presets": [ 
    "react", 
    "es2015" 
    ], 
    "plugins": ["react-hot-loader/babel"] 
} 

большое спасибо!

Answer 1

Установка babel-latest запрограммированной

npm i babel-preset-latest --save-dev 

и добавить его в .babelrc

{ 
    "presets": [ 
    "latest", 
    "resct" 
    ], 
    "plugins": ["react-hot-loader/babel"] 
} 

Надеется, что это помогает!