title: Error: 'Uncaught SyntaxError: Unexpected token <' (Django + React + Webpack)
body: <p>I was following <a href="https://medium.com/uva-mobile-devhub/set-up-react-in-your-django-project-with-webpack-4fe1f8455396" rel="nofollow noreferrer">this tutorial</a> to set up Django to serve templates with webpack-generated bundles. I have set it up just like in the tutorial. However the problem is when i go to <code>localhost:8000</code> I get  <code>Uncaught SyntaxError: Unexpected token &lt;</code> exception when I open the console in chrome devtools. Other html I put in the template file gets rendered except the reactjs bundle. My folder structure is as follows:</p>
  
  <pre><code>.
  ├── djangoapp
  │   ├── db.sqlite3
  │   ├── djangoapp
  │   │   ├── __init__.py
  │   │   ├── settings.py
  │   │   ├── urls.py
  │   │   └── wsgi.py
  │   ├── manage.py
  │   ├── reactapp
  │   │   └── static
  │   │       ├── bundles
  │   │       │   └── main-fdf4c969af981093661f.js
  │   │       └── js
  │   │           └── index.jsx
  │   ├── requirements.txt
  │   ├── templates
  │   │   └── index.html
  │   └── webpack-stats.json
  ├── package.json
  ├── package-lock.json
  └── webpack.config.js
  </code></pre>
  
  <p>settings.py</p>
  
  <pre><code>INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'webpack_loader'
  ]
  
  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [os.path.join(BASE_DIR, "templates"), ],
          'APP_DIRS': True,
          'OPTIONS': {
              'context_processors': [
                  'django.template.context_processors.debug',
                  'django.template.context_processors.request',
                  'django.contrib.auth.context_processors.auth',
                  'django.contrib.messages.context_processors.messages',
              ],
          },
      },
  ]
  
  WEBPACK_LOADER = {
      'DEFAULT': {
          'BUNDLE_DIR_NAME': 'bundles/',
          'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
      }
  }
  
  STATIC_URL = 'static/'
  </code></pre>
  
  <p>webpack.config.js</p>
  
  <pre><code>var path = require("path");
  var webpack = require('webpack');
  var BundleTracker = require('webpack-bundle-tracker');
  
  module.exports = {
    context: __dirname,
  
    entry: './djangoapp/reactapp/static/js/index.jsx', 
  
    output: {
        path: path.resolve('./djangoapp/reactapp/static/bundles/'),
        filename: "[name]-[hash].js",
    },
  
    plugins: [
      new BundleTracker({filename: './djangoapp/webpack-stats.json'}),
    ],
  
    module: {
      rules: [
        { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/},
        { test: /\.jsx$/, use: ['babel-loader'], exclude: /node_modules/}
      ]
    },
  
    resolve: {
      modules: ['node_modules', 'bower_components'],
      extensions: ['.js', '.jsx']
    },
  
  
  };
  </code></pre>
  
  <p>templates/index.html</p>
  
  <pre><code>{% load render_bundle from webpack_loader %}
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Example&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
   &lt;div id="react"&gt;&lt;/div&gt;
   {% render_bundle 'main' %}
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>{
    "presets": ["babel-preset-env", "react"]
  }
  </code></pre>
  
  <p>The exception is thrown at the start of line 1 of the <code>main-fdf4c969af981093661f.js</code> file, on the opening tag of  <code>&lt;!DOCTYPE html&gt;</code> element. My guess is that the browser expects javascript code, but instead it is given html. Also, I don't understand how does Django know where to look for the bundles since I didn't specify the root (the <code>reactapp</code> directory) of the <code>static/bundles</code> anywhere.</p>