質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    20928questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    1144questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • gulp

    339questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • webpack

    334questions

  • Babel

    75questions

    Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

webpackでReactが動かない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 316

komiglas

score 9

 前提・実現したいこと

現在新規プロジェクトに向けて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に書いています。

以上、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    20928questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • React.js

    1144questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • gulp

    339questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • webpack

    334questions

  • Babel

    75questions

    Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。