前提・実現したいこと
現在新規プロジェクトに向けてwebpackでReact導入してGulpで動かそうと試していますが、
下記のようなエラーが出力されてしまいます。
こちら、エラー出さずにうまく出力されてほしいのが願望です。
発生している問題・エラーメッセージ
ERROR in ./src/js/page/index.js Module parse failed: Unexpected token (78:6) You may need an appropriate loader to handle this file type. | render: function () { | return ( | <div> | Hello React!! | </div>
該当のソースコード
■gulpfile.js
/* ---------------------------------------------------------------------------------- node_modulesに格納されている各プラグインを読み込む ---------------------------------------------------------------------------------- */ var gulp = require('../../node_modules/gulp'); var browserSync = require('../../node_modules/browser-sync'); var watch = require('../../node_modules/gulp-watch'); var sass = require('../../node_modules/gulp-sass'); var runSequence = require('../../node_modules/run-sequence'); var plumber = require('../../node_modules/gulp-plumber'); var notify = require('../../node_modules/gulp-notify'); var cache = require('../../node_modules/gulp-cached'); var sourcemaps = require('../../node_modules/gulp-sourcemaps'); var csso = require('../../node_modules/gulp-csso'); var postcss = require('../../node_modules/gulp-postcss'); var cssnext = require('../../node_modules/postcss-cssnext'); var mqpacker = require('../../node_modules/css-mqpacker'); //webpack設定 var webpack = require('../../node_modules/webpack'); var webpackStream = require('../../node_modules/webpack-stream'); // webpack.config.jsの設定を読み込む var webpackConfig = require('./webpack.config.js'); /* ---------------------------------------------------------------------------------- ファイルの変更を監視して、変更を即座にブラウザ反映 ---------------------------------------------------------------------------------- */ gulp.task('browser-sync', function() { browserSync.init({ // Webアプリケーションが動作しているアドレス(例ではIPアドレス) proxy: 'templates/' // プロキシを設定 }); }); gulp.task('bs-reload', function() { browserSync.reload(); }); /* ---------------------------------------------------------------------------------- SASSをcssにコンパイル ---------------------------------------------------------------------------------- */ var AUTOPREFIXER_BROWSERS = [ 'last 2 version', 'ie >= 10', 'iOS >= 7', 'Android >= 4.4' ]; gulp.task('sass', function() { var processors = [ cssnext({ browsers: AUTOPREFIXER_BROWSERS }) ]; return gulp.src(['src/sass/**/*.scss']).pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) .pipe(sourcemaps.init()) .pipe(sass()) .pipe(csso())//min化 .pipe(postcss(processors))//postcss化 .pipe(postcss([mqpacker()]))//メディアクエリ一括化 .pipe(sourcemaps.init({loadMaps: true})) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('../public/css/')); }); /* ---------------------------------------------------------------------------------- jsファイルの更新 ---------------------------------------------------------------------------------- */ gulp.task('js',function() { return gulp.src('../public/js/**/*.js') .pipe(plumber()) .pipe(cache('js-cache')) .pipe(gulp.dest( '../public/js/')) .pipe(browserSync.stream()); }); gulp.task('webpack', function() { return gulp.src('src/js/**/*.js').pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) .pipe(webpackStream(webpackConfig, webpack)) .pipe(gulp.dest('../public/js/')); }); /* ---------------------------------------------------------------------------------- ファイルを並列・直列化 ---------------------------------------------------------------------------------- */ gulp.task('build_scss', function(done) { runSequence('sass','bs-reload', done); }); gulp.task('build_js', function (done) { runSequence('webpack','js','bs-reload', done); }); /* ---------------------------------------------------------------------------------- ファイルの監視 ---------------------------------------------------------------------------------- */ gulp.task('default',['browser-sync'],function() { watch(['src/sass/**/*.scss'], function(e) { gulp.start(['build_scss']); }); watch(['src/html/**/*'], function(e) { gulp.start(['build_html'],'bs-reload'); }); watch(['src/js/**/*.js'], function(e) { gulp.start(['build_js','bs-reload']); }); watch(['../public/images/**/*.+(jpg|gif|png|ico|svg)'], function(e) { gulp.start(['bs-reload']); }); gulp.watch('../public/**/*.+(html|php)', ['bs-reload']); });
■webpack.config.js
const path = require('path'); const UglifyJsPlugin = require('../../node_modules/uglifyjs-webpack-plugin'); var jsRootDir = './src/js/'; var webpack = require('../../node_modules/webpack'); var webpackConfig = { // インポートファイル(ここに新規ファイルを追加していく) entry: { main: jsRootDir + 'main.js', // 共通 index: jsRootDir + 'page/index.js' // トップページ }, // ビルド実行して実際に出力されるファイル output: { path: path.join(__dirname, 'dist'), publicPath: './public/js/', filename: "[name].js" }, module: { loaders: [ { test: /.(js|jsx)$/, // jsxも対象にする loader: 'babel-loader', // 使用するloader exclude: /node_modules/, include: [ path.resolve(__dirname, 'dist'), ], // babelと一緒に使うES2015とReactの指定 query: { presets: ["es2015", "react"], } } ] }, externals: { jQuery: 'jQuery' }, node: { setImmediate: false }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), new webpack.optimize.UglifyJsPlugin({ compress: { dead_code: true, warnings: false }, comments: false, mangle: false, sourceMap: true }), new webpack.HotModuleReplacementPlugin() ], devtool: 'source-map' } module.exports = webpackConfig;
■package.json
{ "name": "template", "version": "0.0.0", "description": "template", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-loader": "^8.0.4", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "browser-sync": "^2.18.2", "css-loader": "^1.0.0", "css-mqpacker": "^6.0.2", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-cached": "^1.1.1", "gulp-changed": "^1.3.2", "gulp-clean-css": "^3.7.0", "gulp-combine-media-queries": "^0.2.0", "gulp-compass": "^2.1.0", "gulp-concat": "^2.6.1", "gulp-connect-php": "0.0.8", "gulp-csscomb": "^3.0.8", "gulp-cssmin": "^0.1.7", "gulp-csso": "^3.0.1", "gulp-ejs": "^3.1.1", "gulp-gzip": "^1.4.1", "gulp-htmlhint": "^0.3.1", "gulp-imagemin": "^3.1.1", "gulp-notify": "^2.2.0", "gulp-plumber": "^1.1.0", "gulp-postcss": "^7.0.1", "gulp-rename": "^1.2.2", "gulp-sass": "^3.0.0", "gulp-sftp": "^0.1.5", "gulp-uglify": "^2.0.0", "gulp-util": "^3.0.8", "gulp-watch": "^4.3.11", "imagemin-pngquant": "^5.0.0", "jquery": "^3.3.1", "postcss-cssnext": "^3.1.0", "react": "^16.5.2", "react-dom": "^16.5.2", "rimraf": "^2.6.1", "run-sequence": "^1.2.2", "style-loader": "^0.23.0", "vinyl-ftp": "^0.5.0", "webpack": "^3.10.0", "webpack-stream": "^4.0.0" }, "dependencies": { "animejs": "^2.2.0", "del": "^2.2.2", "imagemin-pngquant": "^5.0.0" } }
■index.js
import React from 'react'; import ReactDOM from 'react-dom'; var HelloReact = React.createClass({ render: function () { return ( <div> Hello React!! </div> ); } }); ReactDOM.render( <HelloReact />, document.querySelector(".testtest") );
補足情報
.testtestというクラス名はindex.htmlに書いています。
以上、よろしくお願いします。
あなたの回答
tips
プレビュー