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

Question

在我的 main.js 文件中使用 ESLint 和 babel

时出现以下错误

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"]
}

我在这里错过了什么？

谢谢

Answer 1

通过将以下内容添加到我的 .babelrc

，错误终于消失了

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

当然这需要安装以下 npm 包

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

谢谢

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

Unexpected token error when parsing JSX file

jsx

reactjs

eslint

babeljs