SyntaxError inside index.js


#1


I followed the guide on how to set-up react on your computer, but when i run "npm run build" it gives me a Syntax Error.


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: __dirname + '/app/index.js',
	module: {
		loaders: [
		{
			test: /\.js$/,
			exclude: /node_modules/,
			loader: 'babel-loader'
		}
		]
	},
	output: {
		filename: 'transformed.js',
		path: __dirname + '/build'
	},
	plugins: [HTMLWebpackPluginConfig]
};

Package.json:

{
"name": "reactjsvaja001",
"version": "0.0.1",
"description": "Ucenje reactjs",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "skipyC",
"license": "ISC",
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0"
},
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-react": "^6.16.0",
"html-webpack-plugin": "^2.24.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}

Index.js:

var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App.js');

ReactDOM.render(, document.getElementById('app'));

App.js:

var React = require('react');

var App = React.createClass({

render: function()
{
	return(<h1>Hello World!</h1>);
}

});

module.exports = App;

I tried anything I could think of, but still can't solve the problem.


#2

The was .babelrc. I'm on windows and that file wasn't noticed by nodejs. Solution: inside of package.json add

"babel": {
	"presets": [
		"react"
	]
  }

#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.