Question

我正在尝试创建一种非常简单的reactjs组件方法，但是却无缘无故出现此错误。

  throw er; // Unhandled 'error' event
  ^
SyntaxError: 
/home/junaid/letsVote/app/src/js/components/Feed.js:21
      <div>
      ^
ParseError: Unexpected token

设置非常简单，我将共享我的Gulpfile和所有内容，这样您就可以清楚地了解我要做什么

var gulp = require("gulp"),
    connect = require("gulp-connect"),
    open = require("gulp-open"),
    browserify = require("gulp-browserify"),
    concat = require("gulp-concat"),
    port = process.env.port || 3031;

gulp.task('browserify', function() {
  gulp.src("./app/src/js/main.js")
      .pipe(browserify({ transform: 'reactify' }))
      .pipe(gulp.dest('./app/dist/js'));
});

gulp.task("open", function() {
  var options = {
    url: "http://localhost:" + port
  };
  gulp.src("./app/index.html")
      .pipe(open("", options));
});

gulp.task("connect", function() {
  connect.server({
    root: "app",
    port: port,
    livereload: true
  });
});

gulp.task("js", function() {
  gulp.src("./app/dist/**/*.js")
      .pipe(connect.reload());
});

gulp.task("html", function() {
  gulp.src("./app/*.html")
      .pipe(connect.reload());
});

gulp.task("watch", function() {
  gulp.watch("app/dist/js/*.js", ["js"]);
  gulp.watch("app/index.html", ["html"]);
  gulp.watch("app/src/js/**/*.js", ["browserify"]);
});

gulp.task("default", ["browserify"]);
gulp.task("serve", ["browserify", "connect", "open", "watch"]);

以上都是我处理的gulpfile。

var React = require("react");
var ShowAddButton = require("./ShowAddButton");
var FeedForm = require("./FeedForm");
var FeedList = require("./FeedList");

var Feed = React.createClass({

  getInitialState: function() {
    var FEED_ITEMS = [
      { key: "1", title: "Real Time data", description: "Firebase is cool", voteCount: 89},
      { key: "1", title: "Time data", description: "Life is cool", voteCount: 29},
      { key: "1", title: "Host Time data", description: "mochta is cool", voteCount: 9}
    ];
    return {
      items: FEED_ITEMS
    };
  },

  render: function() {
    return (
      <div>
        <div className="container">
          <ShowAddButton />
        </div>

        <FeedForm />

        <br />
        <br />

        <FeedList items={this.state.items} />
      </div>
    );
  }

});

module.exports = Feed

这是我的Feed.js文件，出现错误，我已经尝试了所有可能的方法来解决此问题，但目前没有任何解决方案，谢谢您的帮助。

我的Package.json文件是

  "devDependencies": {
    "react": "^0.11.1",
    "gulp-react": "^1.0.1",
    "gulp": "^3.8.8",
    "gulp-connect": "^2.0.6",
    "gulp-concat": "^2.4.0",
    "gulp-open": "^0.2.8",
    "gulp-browserify": "^0.5.0",
    "reactify": "^0.14.0"
  }

Answer 1

首先我应该说，我不知道用gulphfile来构建任何东西。但是我使用webpack构建了大多数reactjs项目。因此我也遇到了带有意外令牌的解析错误。因此，我建议您，如果使用CSS或JS加载器之类的任何加载器，则必须检查这些加载器的相关规则。因为大多数解析错误都是由webpack中的这些加载程序引起的。我希望这对您的问题有所帮助！

ParseError：带有Gulpfile reactjs的意外令牌

1 个答案: