TL;DR: Why am I getting the error with my code? Previous question is different (online vs desktop) and it's answers don't work for me.
Complete code here
Based on code more or less originating here (I'm not quite to the end of the "lesson"
Question: Following this "intro to ReactJS". The walkthrough has Webpack/Babel setup. It runs with plain JS, but when I switch to JSX it chokes. This is similar to this question, but none of those answers seem to work. Main difference: Web Playground vs locally on my box?
The end of the video I'm working on leads to this code - although, I'm only 3/4 of the way through so parts aren't included yet. So, I've dialed it back into this fork with my edits (Sorry if I've butchered forking and pushing my changes...)
Notes: The BEFORE and AFTER is the only things I've changed. It works with javascript/jquery - but not with JSX. I found a couple typos, case errors (thisItem vs thisitem) and some items that shouldn't have been there (brackets removed).
I've changed "my" typed out version to more closely match "their" version (Hello instead of HelloWorld) and made other minor changes... same error.
The biggest remaining changes I see other than some spacing issues is versions - minor version bumps from the recorded class.
My Code:
.babelrc
{ "presets": [ "react" ] }
package.json
{
"name": "github-battle",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"production": "webpack -p"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
},
"devDependencies": {
"babel-core": "^6.6.0",
"babel-loader": "^6.2.4",
"babel-preset-react": "^6.5.0",
"html-webpack-plugin": "^2.9.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders:[
{ test: /\.js$/,include: __dirname + '/app',loader: "babel-loader" }
]
},
plugins: [HtmlWebpackPluginConfig]
}
app\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Github Battle</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>
<body>
<div id="app"></div>
</body>
</html>
app\index.js BEFORE
var app = document.getElementbyid('app')
app.innerHTML = 'Hello
app\index.js AFTER
var React = require('react');
var ReactDOM = require('react-dom');
var HelloWorld = React.createClass({
render: function () {
return <div> Hello World </div>
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById('app')
);
Result:
> B:\Users\Chris\react-js\React-Fundamentals>npm run production
> gh-battle@1.0.0 production B:\Users\Chris\react-js\React-Fundamentals
> webpack -p
Hash: 21e367e251c35209471c
Version: webpack 1.12.14
Time: 375ms
Asset Size Chunks Chunk Names
index_bundle.js 289 bytes 0 [emitted] main
index.html 305 bytes [emitted]
[0] multi main 28 bytes {0} [built] [1 error]
[1] ./app/index.js 0 bytes [built] [failed]
ERROR in ./app/index.js
Module parse failed: B:\Users\Chris\react-js\React-Fundamentals\app\index.js Line 6: Unexpected token <
You may need an appropriate loader to handle this file type.
| var Hello = React.createClass({
| render: function () {
| return <div> Hello ReactJS World! </div>
| }
| });
@ multi main
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
B:\Users\Chris\react-js\React-Fundamentals>
webpack.config.js #2: Same rror
var HtmlWebpackPlugin = require('html-webpack-plugin');
...
module.exports = {
...
module: {
loaders: [
{test: /\.js$/, include: __dirname + '/app', loader: "babel-loader"}
],
query: {
presets: ['react']
}
},
plugins: [HTMLWebpackPluginConfig]
};
