webpack React Module parse failed with ReactDOM.render

Question

Following the surviveJS ebook I am trying to setup a webpack configuration for my ReactJS projects.

Upon running my start script I get the following error:

ERROR in ./app/index.js Module parse failed: /Users/shooshte/PersonalProjects/surviveJS/node_modules/eslint-loader/index.js!/Users/shooshte/PersonalProjects/surviveJS/app/index.js Unexpected token (5:0) You may need an appropriate loader to handle this file type. | | ReactDOM.render( | Hello world, |
document.getElementById('app') | ); @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server babel-polyfill ./app

This is my index.js:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<div>Hello world</div>,
  document.getElementById('app')
);

My webpack config:

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const merge = require('webpack-merge');

const parts = require('./webpack.parts');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

const common = merge(
  {
    entry: {
      app: ['babel-polyfill', PATHS.app]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    output: {
      path: PATHS.build,
      filename: '[name].js'
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: HtmlWebpackTemplate,
        title: 'ReactJS Boilerplate',
        appMountID: 'app',
        mobile: true,
        inject: false
      })
    ]
  },
  parts.loadFonts(PATHS.app),
  parts.loadImages(PATHS.app),
  parts.lintCSS(PATHS.app),
  parts.lintJavaScript(PATHS.app)
);

module.exports = function(env) {
  if(env === 'production') {
    return merge(
      common,
      {
        output: {
          chunkFilename: 'scripts/[chunkhash].js',
          filename: '[name].[chunkhash].js',
          // Tweak this to match your GitHub project name
          publicPath: '/surviveJS/'
        },
        plugins: [
          new webpack.HashedModuleIdsPlugin()
        ]
      },
      parts.setFreeVariable(
        'process.env.NODE_ENV',
        'production'
      ),
      parts.loadJavaScript(PATHS.app),
      parts.minifyJavaScript(PATHS.app),
      parts.extractBundles([
        {
          name: 'vendor',
          entries: ['react']
        },
        {
          name: 'manifest'
        }
      ]),
      parts.clean(PATHS.build),
      parts.generateSourcemaps('source-map'),
      parts.extractSASS(),
      parts.purifyCSS(PATHS.app)
    );
  }
  return merge(
    common,
    {
      performance: {
        hints: false
      },
      plugins: [
        new webpack.NamedModulesPlugin()
      ]
    },
    parts.generateSourcemaps('eval-source-map'),
    parts.loadSASS(),
    parts.devServer({
      host: process.env.HOST,
      port: process.env.PORT
    })
  );
};

The relevants parts of the parts module:

exports.devServer = function(options) {
  return {
    devServer: {
      historyApiFallback: true,
      hot: true,
      hotOnly: true,
      stats: 'errors-only',
      host: options.host, // Defaults to `localhost`
      port: options.port // Defaults to 8080
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin({
      })
    ]
  };
};

exports.lintJavaScript = function(paths) {
  return {
    module: {
      rules: [
        {
          test: /\.js$/,
          include: paths,
          use: 'eslint-loader',
          enforce: 'pre'
        }
      ]
    }
  };
};

exports.loadJavaScript = function(paths) {
  return {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          include: paths,

          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }
      ]
    }
  };
};

This is already too big, but I do not know which part of my webpack config is failing. If you need more info about the boilerplate please check the gitHub repo.

Try excluding node_modules inside your loadJavaScript rules. exclude: /node_modules/ — Hardik Modha
Can you try excluding node_modules inside your exports.lintJavaScript rules? — Hardik Modha
same result as before. I think this is a problem with the loader configuration but can't figure out what is it. I tried using babel instead, with the same results. — Miha Šušteršič
May be you can try validating your webpack configurations using webpack-validator. — Hardik Modha

Miha Šušteršič Miha Šušteršič · Accepted Answer · 2017-01-18T11:51:29

Found the issue,

I was only loading javascript in the production environment instead of everywhere. Moving loadJavascript to common fixed my problems:

const path = require('path');

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const merge = require('webpack-merge');

const parts = require('./webpack.parts');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

const common = merge(
  {
    entry: {
      app: ['babel-polyfill', PATHS.app]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
    output: {
      path: PATHS.build,
      filename: '[name].js'
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: HtmlWebpackTemplate,
        title: 'ReactJS Boilerplate',
        appMountID: 'app',
        mobile: true,
        inject: false
      })
    ]
  },
  parts.loadJavaScript(PATHS.app),
  parts.loadFonts(PATHS.app),
  parts.loadImages(PATHS.app),
  parts.lintCSS(PATHS.app),
  parts.lintJavaScript(PATHS.app)
);

module.exports = function(env) {
  if(env === 'production') {
    return merge(
      common,
      {
        output: {
          chunkFilename: 'scripts/[chunkhash].js',
          filename: '[name].[chunkhash].js',
          // Tweak this to match your GitHub project name
          publicPath: '/surviveJS/'
        },
        plugins: [
          new webpack.HashedModuleIdsPlugin()
        ]
      },
      parts.setFreeVariable(
        'process.env.NODE_ENV',
        'production'
      ),
      parts.minifyJavaScript(PATHS.app),
      parts.extractBundles([
        {
          name: 'vendor',
          entries: ['react']
        },
        {
          name: 'manifest'
        }
      ]),
      parts.clean(PATHS.build),
      parts.generateSourcemaps('source-map'),
      parts.extractSASS(),
      parts.purifyCSS(PATHS.app)
    );
  }
  return merge(
    common,
    {
      performance: {
        hints: false
      },
      plugins: [
        new webpack.NamedModulesPlugin()
      ]
    },
    parts.generateSourcemaps('eval-source-map'),
    parts.loadSASS(),
    parts.devServer({
      host: process.env.HOST,
      port: process.env.PORT
    })
  );
};

webpack React Module parse failed with ReactDOM.render

1 Answers