组件中的 ReactJS 意外标记答案

【问题标题】：ReactJS Unexpected Token in Component组件中的 ReactJS 意外标记
【发布时间】：2016-08-28 08:38:52
【问题描述】：

我有一个组件：

import React from 'react';

export default class LeftNavigation extends React.Component {

    static contextTypes = {
        getStore: React.PropTypes.func.isRequired
    };

    render() {
        return (
            <div>
                Left
            </div>
        )
    }
}

但是当我尝试捆绑（使用 JSPM）时，我得到：

SyntaxError: file:///C:/wamp/www/rentapp/public/src/components/add-property/LeftNavigation.js: Unexpected token (5:24)
     export default class LeftNavigation extends React.Component {

         static contextTypes = {
        getStore: React.PropTypes.func.isRequired
        }
    };

我该如何解决这个问题？

这是我的package.json 文件：

 {
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.0.0",
    "gulp": "^3.9.1",
    "jspm": "^0.16.34",
    "laravel-elixir": "^5.0.0"
  },
  "jspm": {
    "directories": {
      "baseURL": "public"
    },
    "dependencies": {
      "body-parser": "npm:body-parser@^1.15.0",
      "express": "npm:express@^4.13.4",
      "fluxible": "npm:fluxible@^1.1.0",
      "fluxible-addons-react": "npm:fluxible-addons-react@^0.2.8",
      "jsx": "github:floatdrop/plugin-jsx@^1.2.1",
      "react": "npm:react@^15.0.2",
      "react-dom": "npm:react-dom@^15.0.2",
      "react-router": "npm:react-router@^2.4.0"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^6.8.0",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  },
  "dependencies": {
    "babel": "^6.5.2",
    "body-parser": "^1.15.0",
    "express": "^4.13.4",
    "fluxible": "^1.1.0",
    "react": "^15.0.2"
  },
  "name": "rentapp",
  "description": "[![Build Status](https://travis-ci.org/laravel/framework.svg)](https://travis-ci.org/laravel/framework) [![Total Downloads](https://poser.pugx.org/laravel/framework/d/total.svg)](https://packagist.org/packages/laravel/framework) [![Latest Stable Version](https://poser.pugx.org/laravel/framework/v/stable.svg)](https://packagist.org/packages/laravel/framework) [![Latest Unstable Version](https://poser.pugx.org/laravel/framework/v/unstable.svg)](https://packagist.org/packages/laravel/framework) [![License](https://poser.pugx.org/laravel/framework/license.svg)](https://packagist.org/packages/laravel/framework)",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "directories": {
    "test": "tests"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

【问题讨论】：

你在用 babel 转译吗？看起来你可能只需要使用var contextTypes = { ...
您粘贴的代码丢失了};
是的，但是自从我开始尝试创建一个需要 babel 的节点服务器（我现在已经放弃了）我开始得到这个错误。

标签： javascript reactjs ecmascript-6 jspm

【解决方案1】：

将我的 config.js 的第一位更改为以下解决了该问题，不知道为什么：

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ],
    "blacklist": [],
    "stage": 0
  },
...

【讨论】：

【解决方案2】：

你使用的是 6.3.17 以上的 babel 版本吗？
您是否将 transform-class-properties 作为 babel-plugin 包含在内？
最后但同样重要的是，尝试在 babel 配置中至少使用 stage-1。

【讨论】：