解析 JSX 文件时出现意外的令牌错误答案

【问题标题】：Unexpected token error when parsing JSX file解析 JSX 文件时出现意外的令牌错误
【发布时间】：2017-01-24 20:35:03
【问题描述】：

使用 ESLint 和 babel 时，我的 main.js 文件中出现以下错误

main.js

const mountNode = document.getElementById('app');
function HelloMessage(props) {
  return <div>Hello {props.name}</div>;
}
render(<HelloMessage name="test" />, mountNode);

错误是

Unexpected token (12:10) while parsing file: c:\Dev\...\src\main.js

指向线

return <div>Hello {props.name}</div>;

我在 ESLint 配置中启用了 ES6 和 JSX

"parser": "babel-eslint",
"parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },

另外，.babelrc 定义了预设

{
  "presets": ["es2015"]
}

我在这里错过了什么？

谢谢

【问题讨论】：

标签： reactjs jsx babeljs eslint

【解决方案1】：

通过将以下内容添加到我的.babelrc，错误终于消失了

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    }
  },
  "plugins": [
    "transform-export-extensions"
  ]
}

当然这需要安装以下 npm 包

npm i --save-dev babel-preset-react babel-plugin-transform-export-extensions

谢谢

【讨论】：