title: I'm getting Uncaught SyntaxError: Unexpected token < in my bundle.js
body: <p>I am trying to set up a boilerplate for react web apps. </p>
  
  <p>However,  every time I navigate to <a href="http://localhost:8080/" rel="nofollow noreferrer">http://localhost:8080/</a>, I get an error saying: Uncaught SyntaxError: <code>Unexpected token &lt;</code> . In my bundle.js. </p>
  
  <p>I have no idea what to do! Thanks for any help. </p>
  
  <p>Here are some of my files:</p>
  
  <p><strong>/public/index.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
     &lt;meta charset="UTF-8"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
     &lt;title&gt;New app&lt;/title&gt;
     &lt;link rel="stylesheet" href="/style.css" /&gt;
     &lt;script src="./bundle.js" defer&gt; .&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;div id="app"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>/client/app.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  ReactDOM.render(
    &lt;div&gt;Hello, world!&lt;/div&gt;,
    document.getElementById('app') 
  );
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    entry: [
  '@babel/polyfill', // enables async-await
  './client/app.js',
    ],
    mode: 'development',
    output: {
      path: __dirname,
      filename: `./public/bundle.js`,
    },
    devtool: 'source-maps',
    module: {
       rules: [
        {
          test: /\.js$/,
           exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
      ],
    },
  };
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre class="lang-json prettyprint-override"><code>{
    "name": "boilerplatelivmarx",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "start": "node server",
      "start-dev": "webpack -w &amp; nodemon server.js"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "babel-preset-env": "^1.7.0",
      "babel-preset-stage-2": "^6.24.1",
      "express": "^4.16.4",
      "path": "^0.12.7",
      "react": "^16.6.0",
      "react-dom": "^16.6.0",
      "react-router-dom": "^4.3.1"
    },
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-preset-react": "^6.24.1",
      "webpack": "^4.23.1",
      "webpack-cli": "^3.1.2"
    }
  }
  </code></pre>
  
  <p>Thanks!</p>