compiler-errors - Gulp + CJSX : Unexpected indentation while parsing

Question

好的，所以我尝试使用React + Coffeescript并使用Gulp对其进行编译。我对gulp不太熟悉，但是我知道在处理cjsx时遇到了麻烦。 (如果删除render:方法，它将停止错误)

Gulpfile:

gulp.task('js', function () {
    return browserify({
        entries: [ SRC + 'scripts/index.cjsx' ],
        extensions: ['.cjsx', '.coffee'],
    })
    .bundle()
    .pipe(source('app.min.js'))
    //.pipe(streamify(uglify({ mangle: false })))
    .pipe(gulp.dest(DIST + 'js'))
    .pipe(notify({message: 'JS Complete.'}))
    .pipe(connect.reload());
});

文件抛出解析错误:

React = require 'react'
Header = require 'components/Header.cjsx'
Footer = require 'components/Footer.cjsx'
Store = require 'Store'
Actions = require 'Actions'

Home = React.createClass

  displayName: 'Home'

  getInitialState: ->
    Store.toJSON()

  componentDidMount: ->
    Store.listenTo Store, 'change:counter', this._onChange

  componentWillUnmount: ->
    Store.stopListening Store, 'change:counter', this._onChange

  _onChange: ->
    @setState Store.toJSON()

  render: ->
    return
      <div>
        <Header />
        <h1> HI from React and CJSX </h1>
        <Footer />
      </div>

module.exports = Home

谁能告诉我gulpfile怎么了？我还需要其他一些node_module吗？我知道没有空格问题，我已经检查过了。

Answer 1

您的问题似乎是return语句后的换行符。编译器将其视为render方法的末尾作为空返回，然后遇到了进一步缩进的代码，它不知道如何处理。

请尝试以下操作:

render: ->
  <div>
    <Header />
    <h1> HI from React and CJSX </h1>
    <Footer />
  </div>

或者，如果其他所有方法都失败，则将所有内容放在一行上。