I'm receiving a syntax error when I run "npm run build-dev", which triggers "browserify". That should convert my JSX tags in my JSX document (below), but it's just throwing a syntax error at the opening tag. 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
My HTML document:
<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:
{
"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:
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')
);
So it turns out I was missing .babelrc. I added
{
"presets": ["env", "react"]
}
to my-project-folder/.babelrc and now it compiles without error. Thanks.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.