Reactをwebpackでコンパイルできません

こんにちは

ReactJSを使ってみたいのですが、どういうわけかUnexpected token <と出てきてしまい、React特有のタグを認識して読み込んでくれず、webpackのコンパイルがうまくいきません。仕組みとしては、まずコンパイルする対象を./public/srcしたのディレクトリに以下のように配置して

//以下は./public/srcの下に位置しています

/js
--- /mainForPC.js
/jsx
--- /hello.jsx

mainForPC.jsとhello.jsxに、以下のコードを記載しました。

//mainForPC.js
const HELLO = require('../jsx/hello.jsx');

//hello.jsx
const React = require('react');
const ReactDOM = require('react-dom');

const Hello = React.createClass({

	render(){
		return(
			<div>Hello {this.props.name}</div>
		);
	}
})

ReactDOM.render(
	<Hello name="react" />,
	document.getElementById('content')
)

そしてこのmainForPC.jsファイルをgulpを介してwebpackでコンパイルしています。

//gulpfile.babel.js

const gulp = require('gulp');
const requireDir = require('require-dir');
requireDir('./gulp/tasks', {recurse: true});
const config = require('./gulp/config.js');

gulp.task('watch', ()=>{
    //gulp.watch(path.join(config.sourcedir, '**/*.js'), ['conpile_js']);
    gulp.watch(`${config.js.srcDir}/**/*.js`, ['conpile_js']);

});

gulp.task('default', ['conpile_js','watch']);

//config.js
const originSourceDir = './public/src';
const originBuildDir = './public/build';

module.exports = {
    srcDir: originSourceDir,
    bldDir: originBuildDir,
    webpack: {
        entry: {
            mainForPC: `${originSourceDir}/js/mainForPC.js`
        },
        output: {
            path: __dirname,
            filename: "[name].js"
        }
    },
    resolve: {
        extensions: ['','.js']
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loaders: ['babel', 'eslint-loader'] },
            { test: /\.jsx$/, loaders: ['babel', 'eslint-loader'] }
        ]
    }
};

一応package.jsonとbabelrcも載せておきます。

//package.json
{
  "name": "ReactProject",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon --exec babel-node --use_strict ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "pug": "^0.1.0",
    "serve-favicon": "~2.3.0",
    "socket.io": "^1.4.6"
  },
  "devDependencies": {
    "babel-cli": "^6.9.0",
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "es6-promise": "^3.2.1",
    "eslint-loader": "^1.3.0",
    "gulp": "^3.9.1",
    "gulp-eslint": "^2.0.0",
    "gulp-if": "^2.0.1",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-uglify": "^1.5.3",
    "gulp-webpack": "^1.5.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "require-dir": "^0.3.0"
  }
}

//babelrc
{
"presets": ["es2015", "stage-0", "react"]
}

文章が長くて申し訳ないのですが、何か心当たりがある方、もしくはもっと簡単な方法がある方、是非とも教えてください。
よろしくお願いいたします。

以下追加

gulpタスクが記載してあるcompile_jsファイルの中身を追加しました。



const gulp = require('gulp');
const gulpif = require('gulp-if');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const uglify = require('gulp-uglify');
const webpack = require('gulp-webpack');

//階層はconfig.jsファイルの一階層下にあるので
const config = require('../config');

gulp.task('conpile_js', ()=>{
    gulp.src(config.srcDir + '/js')
        .pipe(plumber({
            errorHandler: notify.onError("Error: <%= error.message %>")
        }))
        .pipe(webpack(config.webpack))
        .pipe(gulpif(config.js.uglify, uglify()))
        .pipe(gulp.dest(config.bldDir + '/js'));
});

k.tada

2016/06/14 08:04

gulpの`conpile_js`のタスクの内容も貼ってもらえますか？どのようにコンパイルしてるかがわからないです。

dialbird

2016/06/14 10:43 編集

k.tadaさんご返答ありがとうございます失礼いたしました。`conpile_js`の中身を追加します！

行動規範の内容に同意します

回答1件

ベストアンサー

webpackの設定であるresolveとmoduleの位置がおかしいように見えます。以下のようにconfig.jsを修正してください。

javascript
1//config.js
2const originSourceDir = './public/src';
3const originBuildDir = './public/build';
4
5module.exports = {
6    srcDir: originSourceDir,
7    bldDir: originBuildDir,
8    webpack: {
9        entry: {
10            mainForPC: `${originSourceDir}/js/mainForPC.js`
11        },
12        output: {
13            path: __dirname,
14            filename: "[name].js"
15        },
16        resolve: {
17            extensions: ['','.js']
18        },
19        module: {
20            loaders: [
21                { test: /\.js$/, exclude: /node_modules/, loaders: ['babel', 'eslint-loader'] },
22                { test: /\.jsx$/, loaders: ['babel', 'eslint-loader'] }
23            ]
24        }
25    },
26};