JSX标签处的语法错误

Question

I'm receiving a syntax error when I run "npm run build-dev", which triggers "browserify". 我在运行“ npm run build-dev”时收到语法错误，这会触发“ browserify”。 That should convert my JSX tags in my JSX document (below), but it's just throwing a syntax error at the opening tag. 那应该在我的JSX文档中转换我的JSX标签（如下），但这只是在开始标签处引发语法错误。 I'm really struggling to see what's wrong here, I can't find any differences between this and another project that I did recently. 我真的很想看看这里出了什么问题，我找不到这个和我最近做过的另一个项目之间的任何区别。

Node.js versions tried: v9.7.1, v8.9.4 npm versions tried: v5.7.1, v5.6.0 尝试的Node.js版本：v9.7.1，v8.9.4 npm尝试的版本：v5.7.1，v5.6.0

My HTML document: 我的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>

My package.json: 我的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"
  }
}

My index.jsx: 我的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')
);

Answer 1

So it turns out I was missing .babelrc. 因此，事实证明我缺少.babelrc。 I added 我加了

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

to my-project-folder/.babelrc and now it compiles without error. 到my-project-folder / .babelrc，现在可以正确编译。 Thanks. 谢谢。

JSX标签处的语法错误

问题描述

1 个解决方案

解决方案1
0 2018-03-05 18:10:24

JSX标签处的语法错误

问题描述

1 个解决方案

解决方案1 0 2018-03-05 18:10:24

解决方案1
0 2018-03-05 18:10:24