react.js - webpack编译react-slick文件报错

问题描述

问 题

在我的项目中引入react-slick组件来实现图片的轮播展示

import React, { Component } from 'react'
import Slider from 'react-slick/src/slider'

class StartupsImgBlock extends Component {
  render(){
    return (
      <div className='user-me-card'>
        <Slide></Slide>
      </div>
    )
  }
}

export default StartupsImgBlock

但是在编译时报错，在我的项目中都是通过ES6 class 定义的组件，而slider组件是通过定义React.createClass的方式，下面是报错信息，我需要重新定义一个loader去解析这个slider文件？

ERROR in ./~/react-slick/src/slider.js
    Module parse failed: /Users/Libbbbc/works/circle-web/node_modules/react-slick/src/slider.js Unexpected token (82:8)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (82:8)
        at Parser.pp.raise (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:920:13)
        at Parser.pp.unexpected (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:1483:8)
        at Parser.pp.parseExprAtom (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:330:12)
        at Parser.pp.parseExprSubscripts (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:225:19)
        at Parser.pp.parseMaybeUnary (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:204:17)
        at Parser.pp.parseExprOps (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:151:19)
        at Parser.pp.parseMaybeConditional (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:133:19)
        at Parser.pp.parseMaybeAssign (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:110:19)
        at Parser.pp.parseParenAndDistinguishExpression (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:373:28)
        at Parser.pp.parseExprAtom (/Users/Libbbbc/works/circle-web/node_modules/.npminstall/acorn/3.1.0/acorn/dist/acorn.js:304:19)
     @ ./webpack/javascripts/react/routes/web/dashboard/components/startups/detail/StartupsImgBlock.js 15:14-47

我的webpack配置中loader的配置是这样的：

loaders: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'react-hot',
    },
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      }
    }
 ]

怎么解决这个问题呢？
这个是slider文件https://github.com/akiran/rea...

解决方案

import 人家的源文件干嘛。

import Slider from 'react-slick'

这篇关于react.js - webpack编译react-slick文件报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！