title: Module parse failed: unexpected token you may need an appropriate loader to handle this file type
body: <p>I keep getting this error and I'm not sure why.  Here's my error:</p>
  
  <p>ERROR:
      ERROR in ./components/TaglocationList 6:4
      Module parse failed: Unexpected token (6:4)
      You may need an appropriate loader to handle this file type.
      |
      | const TaglocationList = (props) => (</p>
  
  <blockquote>
  <pre><code>&lt;div&gt;
  |         Taglocation List:
  |         &lt;ul&gt;
   @ ./components/DashBoard.js 11:23-51
   @ ./routers/AppRouter.js
   @ ./App/index.js
    @ ./index.js @ multi ../node_modules/webpack-dev-server/client? 
  </code></pre>
    
    <p><a href="http://0.0.0.0:3000" rel="nofollow noreferrer">http://0.0.0.0:3000</a> webpack/h
        ot/dev-server react-hot-loader/patch webpack-dev-server/client? 
       <a href="http://localhost" rel="nofollow noreferrer">http://localhost</a>:
        3000 ./index.js
        i ?wdm?: Failed to compile.</p>
  </blockquote>
  
  <p>webpack.config</p>
  
  <pre><code>const { resolve } = require('path')
  const webpack = require('webpack')
  
  
  module.exports = {
    context: resolve(__dirname, 'src'),
    entry: [
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://localhost:3000',
       './index.js',
      'webpack/hot/only-dev-server',
    ],
    output: {
      filename: 'bundle.js',
      path: resolve(__dirname, 'dist')
    },
    devServer: {
      contentBase: resolve(__dirname, 'dist'),
      host: '0.0.0.0',
      hot: true,
      port: 3000,
      publicPath: '/'
    },
    module: {
      rules: [
          {
          test: /\.jsx?$/,
          use: ['babel-loader'],
          exclude: /node_modules/
        },
        {
          test: /\.s?css$/,
          use: [
              'style-loader', 
              'css-loader', 
              'sass-loader'
              ]
        }
      ]
    },
    plugins: [
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin()
    ]
  }
  
  package.json
  
  {
    "name": "client",
    "version": "0.1.0",
    "private": true,
    "main": "src/index.js",
    "dependencies": {
      "axios": "0.18.0",
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-plugin-transform-object-rest-spread": "^6.26.0",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "css-loader": "^0.28.7",
      "enzyme": "^2.9.1",
      "eslint": "^4.7.2",
      "eslint-config-standard": "^10.2.1",
      "eslint-config-standard-jsx": "^4.0.2",
      "eslint-plugin-import": "^2.7.0",
      "eslint-plugin-node": "^5.1.1",
      "eslint-plugin-promise": "^3.5.0",
      "eslint-plugin-react": "^7.3.0",
      "eslint-plugin-standard": "^3.0.1",
      "react": "^16.4.1",
      "react-dom": "^16.4.1",
      "react-hot-loader": "^3.0.0-beta.7",
      "react-redux": "^5.0.7",
      "react-router-dom": "^4.3.1",
      "react-scripts": "1.1.4",
      "redux": "^4.0.0",
      "redux-thunk": "^2.3.0",
      "style-loader": "^0.18.2",
      "stylelint": "^8.1.1",
      "stylelint-config-standard": "^17.0.0",
      "webpack-cli": "^3.0.8",
      "webpack-dev-server": "^3.1.4",
      "babel-cli": "6.24.1",
      "babel-preset-env": "1.6.1",
      "node-sass": "4.8.3",
      "sass-loader": "6.0.7"
    },
    "scripts": {
      "start": "webpack-dev-server --config ./webpack.config.js --mode development",
      "build": "webpack --mode production",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    },
    "devDependencies": {
      "webpack": "^4.14.0"
    }
  }
  </code></pre>
  
  <p>TaglocationList.js</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import Taglocation from './Taglocation';
  
  const TaglocationList = (props) =&gt; (
      &lt;div&gt;
          Taglocation List:
          &lt;ul&gt;
              {props.taglocations.map(taglocation =&gt; {
                  return (
                      &lt;li key={taglocation.id}&gt;
                          &lt;Taglocation {...taglocation} /&gt;
                      &lt;/li&gt;
                  );
              })}
          &lt;/ul&gt;
  
      &lt;/div&gt;
  );
  
  const mapStateToProps = (state) =&gt; {
      return {
          taglocations: state
      };
  }
  
  export default connect(mapStateToProps)(TaglocationList);
  </code></pre>
  
  <p>./App/index.js</p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom';
  import AppRouter from '../routers/AppRouter';
  import getAppStore from '../store/store';
  import { getTaglocations } from '../actions/taglocations';
  
  import { Provider } from 'react-redux';
  
  const store = getAppStore();
  
  const template = (
          &lt;Provider store={store}&gt;
              &lt;AppRouter /&gt;
          &lt;/Provider&gt;
      );
  
  store.dispatch(getTaglocations()).then(() =&gt; {
      ReactDOM.render(template, document.getElementById('app'));
  });
  
  export default App
  </code></pre>