JSX 标签的语法错误答案

【问题标题】：Syntax error at JSX tagJSX 标签的语法错误
【发布时间】：2018-08-12 20:39:04
【问题描述】：

我在运行“npm run build-dev”时收到语法错误，这会触发“browserify”。这应该在我的 JSX 文档（如下）中转换我的 JSX 标记，但它只是在开始标记处引发语法错误。我真的很难看出这里出了什么问题，我找不到这个和我最近做的另一个项目之间的任何区别。

尝试的 Node.js 版本：v9.7.1、v8.9.4 尝试的 npm 版本：v5.7.1、v5.6.0

我的 HTML 文档：

<html>
    <head>
        <meta charset="utf-8" />
        <style>
            @keyframes example {
                from { background-color: red; }
                to { background-color: yellow; }
            }
            div.main {
                width: 100px;
                height: 100px;
                background-color: red;
                animation-name: example;
                animation-duration: 4s;
            }
        </style>
    </head>
    <body>
        <div id="doc"/>
        <script src="page.js"></script>
    </body>
</html>

我的 package.json：

{
  "name": "AnimationTest",
  "version": "0.0.1",
  "description": "Learning how to use CSS animations with JS/react triggers.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-js": "browserify index.js -t babelify -o page.js",
    "build-js-dev": "browserify index.js -d -t babelify -o page.js",
    "build-dev": "npm run build-js-dev",
    "build": "npm run build-js"
  },
  "repository": {
    "type": "git",
    "url": "."
  },
  "author": "D. Scott Boggs",
  "license": "AGPL-3.0",
  "dependencies": {
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "babel-core": "^6.26.0"
  },
  "devDependencies": {
    "browserify": "^15.2.0",
    "babelify": "^8.0.0"
  }
}

我的 index.jsx：

import React from 'react';
import ReactDOM from 'react-dom';

class AnimationTest extends React.Component {
  constructor(props) {
    console.log("AnimationTest constructor reached.");
    super(props);
  }
  render() {
    console.log("AnimationTest.render: Beginning rendering of document root");
    return (
      <div id='main'/>
    );
  }
}
ReactDOM.render(
  <AnimationTest />,
  document.getElementById('doc')
);

【问题讨论】：

请提供完整的错误回溯
另外，请提供您的 .babelrc 文件的内容 - 您已经为 Babel 安装了 React 预设，但它似乎没有被使用。
我认为你必须使用<div id="main"></div> 而不是<div id="main" />

标签： node.js reactjs babeljs jsx package.json

【解决方案1】：

所以事实证明我缺少 .babelrc。我加了

{
  "presets": ["env", "react"]
}

到 my-project-folder/.babelrc 现在它编译没有错误。谢谢。

【讨论】：