React and Webpack Module parse failed: /testimonials.js Unexpected token (6:4)

Question

Can someone please help me troubleshoot this error I keep getting when I try to run React through webpack? Below is the error I get.

Console error:

ERROR in ./testimonials.js
Module parse fai,led: src/js/testimonials.js Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
| const HelloWorld = () => {
    |   return (
        |     <div className='hello-world'>
        |       <h1>Hello World</h1>
        |       <p>Welcome to my world</p>

Here is the webpack.config.js file

'use strict'

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: __dirname + "/src/js",
  devtool: 'source-map',
  entry: {
    'global': './global/app.js',
    'legal': './legal.js',
    'blogagg': './blog-agg.js',
    'newsagg': './news-agg.js',
    'events' : './events.js',
    'updates': './product-updates.js',
    'signup': './signup.js',
    'contact': './contact.js',
    'testimonialsjs': './testimonials.js'
  },
  output: {
    path: __dirname + "/_site/js",
    filename: "[name].min.js"
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ],
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.optimize.UglifyJsPlugin({
      parallel: true
    })
  ]
}

Here is the testimonials.js file

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

const HelloWorld = () => {
  return (
    <div className='hello-world'>
      <h1>Hello World</h1>
      <p>Welcome to my world</p>
    </div>
  )
}

ReactDOM.render(<HelloWorld />, document.getElementById('app'))

Here is the testimonials.html file. Note: I am using Jekyll for this site along with Liquid templates : This page reads the js file through the asset_namespace. My react id="app" div component is in this file.

---
layout: base-layout
title: Testimonials
has_js_app: true
asset_namespace: testimonialsjs
has_breadcrumbs: false
title: Testimonials
---

<main class="testimonials">
  <div class="blog section">
    <div class="grid-container">
      <div id='app'></div>
      <h2>5 Star Service and Support</h2>
      <div class="grid-x grid-margin-y align-center card-grid">
        {% for testimonials in page.testimonials %}
        <div class="cell testimonial-card" data-number="{{forloop.index}}">
          <p>{{testimonials.testimonial_text}}</p>
          <p class="author-name">{{testimonials.author_name}}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</main>

Here are my dependencies in my package.json file

"devDependencies": {
    "a11y": "^0.5.0",
    "autoprefixer": "^6.7.7",
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "browser-sync": "^2.18.13",
    "css-loader": "^0.28.7",
    "html-loader": "^0.5.1",
    "json-loader": "^0.5.4",
    "node-sass": "^4.6.1",
    "parallelshell": "^3.0.1",
    "path": "^0.12.7",
    "postcss": "^6.0.2",
    "postcss-cli": "^4.1.0",
    "postcss-flexbugs-fixes": "^3.0.0",
    "psi": "^3.0.0",
    "style-loader": "^0.19.0",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^2.9.4",
    "webpack-stream": "^3.2.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.23.0",
    "babel-preset-stage-3": "^6.24.1",
    "foundation-sites": "6.4.3",
    "jquery": "3.1.1",
    "marketo-rest-api": "^0.2.0",
    "motion-ui": "^1.2.3",
    "node": "^9.2.0",
    "pug": "^2.0.0-rc.3",
    "pug-cli": "^1.0.0-alpha6",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "script-loader": "^0.7.0"
  }

Have a look here: https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b — Tyler Rafferty, Nov 20 '17 at 23:06
Maluen's answer below worked perfectly. My webpack config file wasn't setup correctly for webpack 2. Thanks for your help, Tyler! — spz1, Nov 21 '17 at 15:23

score 1 · Accepted Answer · answered Nov 20 '17 at 23:12

Update your webpack.config.js as per webpack v2. See Migrating Versions for more info.

module.loaders is now module.rules
It is not possible anymore to omit the -loader extension when referencing loaders
Loader configuration is through options

The updated webpack.config.js is as follows:

'use strict'

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: __dirname + "/src/js",
  devtool: 'source-map',
  entry: {
    'global': './global/app.js',
    'legal': './legal.js',
    'blogagg': './blog-agg.js',
    'newsagg': './news-agg.js',
    'events' : './events.js',
    'updates': './product-updates.js',
    'signup': './signup.js',
    'contact': './contact.js',
    'testimonialsjs': './testimonials.js'
  },
  output: {
    path: __dirname + "/_site/js",
    filename: "[name].min.js"
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.json$/,
        use: 'json-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'es2015']
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new webpack.optimize.UglifyJsPlugin({
      parallel: true
    })
  ]
}

React and Webpack Module parse failed: /testimonials.js Unexpected token (6:4)

1 Answers1