Blank Django ReactJS Webpage With No Errors

Question

I have followed a lot of examples about how to setup Django and ReactJS for Django to serve up static files using the Django Web server.

I believe I have a good working version but for some reason, I get a blank page but with no errors.

I am new to ReactJS but I believe this is an issue around compatibility with Babel. There seems to be new Babel code and the tutorials I have been reading are dated. One thing to note. When I run this code, which I copied from the article Create basic login forms using create react app module in reactjs, it works fine using the NPM start...server. However, Django is not processing it but does load it.

Any help would be really appreciated because I am out of ideas.

Here is my code:

SETTINGS.PY

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'webpack_loader',
'arlo_project'
]

STATIC_URL = '../../build/'

STATICFILES_DIRS = (
os.path.join(BASE_DIR, '/build/static'),
# We do this so that django's collectstatic copies or our bundles to the STATIC_ROOT or syncs them to whatever storage we use.
)

WEBPACK_LOADER = {
'DEFAULT': {
    'BUNDLE_DIR_NAME': 'bundles/',
    'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}

WEBPACK.CONFIG.JS

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
context: __dirname,

entry: {
     main:'./src/index',
     vendors: ['react'],
},
// entry point of our app.
// src/index.js should require other js modules and dependencies it needs

output: {
    //Where you put the compiled bundle to be stored
    path: path.resolve('./build/bundles/'),
    filename: "[name]-[hash].js",
},

plugins: [
    //tells webpack where to store data about your bundles.
    new BundleTracker({path: ".", filename: '/webpack-stats.json'}),
],

module: {
    rules: [
        {
            //a regexp that tells webpack use the following loaders on all
            //.js and .jsx files
            test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader',
            query: {
                //presets: ['@babel/preset-env', '@babel/preset-react']
                 presets: ['@babel/env', '@babel/react'],
                 plugins: ["transform-class-properties"]
            }
        },
        //loader for font files (used by fontawesome, etc)
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
        },

        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.js?$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              query: {
                presets: ['@babel/env', '@babel/react'],
                plugins: ["transform-class-properties"]
                //presets: ['@babel/preset-env', '@babel/preset-react']
            }
        }
    ],
},

resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx']
},
mode: 'development',

}

package.json

{
 "name": "arlo_project",
 "version": "0.1.0",
 "private": true,
 "dependencies": {
 "@babel/preset-react": "^7.0.0-beta.44",
 "axios": "^0.18.0",
 "babel-cli": "^6.26.0",
"material-ui": "^0.20.0",
"npm": "^5.8.0",
"react-dom": "^16.3.1",
"react-dropzone": "^4.2.9",
"react-scripts": "^1.1.4",
"react-tap-event-plugin": "^3.0.2",
"superagent": "^3.8.2"
},
"scripts": {
"start": "/usr/local/bin/react-scripts start",
"start:dev": "webpack-dev-server",
"build": "/usr/local/bin/react-scripts build",
"test": "/usr/local/bin/react-scripts test --env=jsdom",
"eject": "/usr/local/bin/react-scripts eject"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.44",
"@babel/preset-env": "^7.0.0-beta.44",
"babel-core": "^6.26.0",
"babel-loader": "^8.0.0-beta.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"create-react-app": "^1.5.2",
"css-loader": "^0.28.11",
"react": "^16.3.1",
"webpack": "^4.5.0",
"webpack-bundle-tracker": "^0.3.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3"
}
}

index.html

{% extends 'Base.html' %}
{% load staticfiles %}
{% load render_bundle from webpack_loader %}

{% block main %}
  <div id="root"></div>
     {% render_bundle 'vendors' %}
     {% render_bundle 'main' %}
{% endblock %}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();