Skip to content

Instantly share code, notes, and snippets.

@birkin

birkin/django_react_experimentation.md

Created March 26, 2020 12:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save birkin/4a30b7c806e4e75662a2260e061a2536 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save birkin/4a30b7c806e4e75662a2260e061a2536 to your computer and use it in GitHub Desktop.
Download ZIP
Notes from working through youtube tutorial. Tags: react django babel webpack.
Raw
django_react_experimentation.md

Django + Babel + Webpack + React Tutorial

Notes from working through Chris Hawkes':

go to desired static directory

(experimentation_04 created for the url http://127.0.0.1:8000/react_experimentation_04/)

timestamp: 15:00

birkin@bbox-2015$
birkin@bbox-2015$ cd /path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$
birkin@bbox-2015$ ls
total 0
drwxr-xr-x  2 birkin  staff    64B Mar 24 10:18 ./
drwxr-xr-x  8 birkin  staff   256B Mar 24 10:18 ../
birkin@bbox-2015$
birkin@bbox-2015$ cd ./experimentation_04/
birkin@bbox-2015$

run npm init

timestamp: 15:01

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (experimentation_04) experiment_04_project
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04/package.json:

{
  "name": "experiment_04_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)
birkin@bbox-2015$

I'm thinking I'll have to change the entry point value, which created "main": "index.js"

run npm install(s)

timestamp: 17:17

babel/core
birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$
birkin@bbox-2015$ npm install -D @babel/core
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ @babel/[email protected]
added 42 packages from 57 contributors and audited 329 packages in 4.908s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

birkin@bbox-2015$
babel/preset-env

provides ability to write in modern js & will complile to older, more broadly compatible js.

birkin@bbox-2015$
birkin@bbox-2015$ npm install -D @babel/preset-env
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ @babel/[email protected]
added 102 packages from 24 contributors and audited 1978 packages in 8.199s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

birkin@bbox-2015$
babel/preset-react
birkin@bbox-2015$
birkin@bbox-2015$ npm install -D @babel/preset-react
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ @babel/[email protected]
added 9 packages from 1 contributor and audited 2038 packages in 2.145s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

birkin@bbox-2015$
babel-loader
birkin@bbox-2015$
birkin@bbox-2015$ npm install -D babel-loader
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN [email protected] requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 19 packages from 14 contributors and audited 2067 packages in 2.226s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

birkin@bbox-2015$
css-loader
birkin@bbox-2015$
birkin@bbox-2015$ npm install -D css-loader
npm WARN [email protected] requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 16 packages from 49 contributors and audited 2189 packages in 1.967s

9 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

birkin@bbox-2015$
webpack

(skipping node-sass install)

birkin@bbox-2015$
birkin@bbox-2015$ npm install -D webpack

> [email protected] install /path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04/node_modules/fsevents
> node-gyp rebuild

ERROR:root:code for hash md5 was not found.
Traceback (most recent call last):
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 147, in <module>
    globals()[__func_name] = __get_hash(__func_name)
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 97, in __get_builtin_constructor
    raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type md5
ERROR:root:code for hash sha1 was not found.
Traceback (most recent call last):
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 147, in <module>
    globals()[__func_name] = __get_hash(__func_name)
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 97, in __get_builtin_constructor
    raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type sha1
ERROR:root:code for hash sha224 was not found.
Traceback (most recent call last):
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 147, in <module>
    globals()[__func_name] = __get_hash(__func_name)
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 97, in __get_builtin_constructor
    raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type sha224
ERROR:root:code for hash sha256 was not found.
Traceback (most recent call last):
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 147, in <module>
    globals()[__func_name] = __get_hash(__func_name)
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 97, in __get_builtin_constructor
    raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type sha256
ERROR:root:code for hash sha384 was not found.
Traceback (most recent call last):
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 147, in <module>
    globals()[__func_name] = __get_hash(__func_name)
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 97, in __get_builtin_constructor
    raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type sha384
ERROR:root:code for hash sha512 was not found.
Traceback (most recent call last):
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 147, in <module>
    globals()[__func_name] = __get_hash(__func_name)
  File "/usr/local/Cellar/python@2/2.7.14_3/Frameworks/Python.framework/Versions/2.7/lib/python2.7/hashlib.py", line 97, in __get_builtin_constructor
    raise ValueError('unsupported hash type ' + name)
ValueError: unsupported hash type sha512
  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 365 packages from 207 contributors and audited 6404 packages in 18.029s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

birkin@bbox-2015$

Update: these errors look scary but don't seem to cause any issues.

webpack-cli
birkin@bbox-2015$
birkin@bbox-2015$ npm install -D webpack-cli
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 59 packages from 33 contributors and audited 7465 packages in 6.652s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

birkin@bbox-2015$

(end of npm installs)

create webpack.config.js

timestamp: 17:47

NOTE- added:

node_modules
~
package-lock.json

...to the .gitignore file, until I can verify if any of that is ok to add. I suspect the package-lock.json would be ok, and that the other stuff should not be added, cuz it's npm-install specific to a given server.

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$
birkin@bbox-2015$ touch ./webpack.config.js
birkin@bbox-2015$
birkin@bbox-2015$ ls
total 424
drwxr-xr-x    7 birkin  staff   224B Mar 24 11:58 ./
drwxr-xr-x    8 birkin  staff   256B Mar 24 10:18 ../
drwxr-xr-x  369 birkin  staff    12K Mar 24 10:54 node_modules/
-rw-r--r--    1 birkin  staff   207K Mar 24 10:54 package-lock.json
-rw-r--r--    1 birkin  staff   459B Mar 24 11:58 package.json
-rw-r--r--    1 birkin  staff     0B Mar 25 10:09 webpack.config.js
drwx------    3 birkin  staff    96B Mar 24 10:31 ~/
birkin@bbox-2015$

(content added)

birkin@bbox-2015$
birkin@bbox-2015$ cat ./webpack.config.js
const path = require( 'path');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    watch: true,
    devtool: 'source-map',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_module/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: [ '.js' ]
    }

}
birkin@bbox-2015$

notes...

  • watch: true auto compiles any changes.
  • devtool: 'source-map' enables debugging.
  • filename: '[name].bundle.js' name will default to 'app'.
  • path: path.resolve(__dirname, 'dist') -- __dirname is short-hand for the root-directory.
  • module gives us the ability to use the babel loader. Whenever a rule is fired, implement the module.
  • resolve tells webpack to handle js files.
  • at this point, a 'src' directory and index.js file are referenced, but they haven't been created.
Update

The above is what was in the video, and it works pretty far into the video, but did not work, for me, on the final react step. Jump down to the update webpack.config.js section at the very bottom to see the updated use: ... line that works.

create dir & file

timestamp: 21:00

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ mkdir ./src
birkin@bbox-2015$
birkin@bbox-2015$ ls
total 432
drwxr-xr-x    8 birkin  staff   256B Mar 25 10:29 ./
drwxr-xr-x    8 birkin  staff   256B Mar 24 10:18 ../
drwxr-xr-x  369 birkin  staff    12K Mar 24 10:54 node_modules/
-rw-r--r--    1 birkin  staff   207K Mar 24 10:54 package-lock.json
-rw-r--r--    1 birkin  staff   459B Mar 24 11:58 package.json
drwxr-xr-x    2 birkin  staff    64B Mar 25 10:29 src/
-rw-r--r--    1 birkin  staff   489B Mar 25 10:26 webpack.config.js
drwx------    3 birkin  staff    96B Mar 24 10:31 ~/
birkin@bbox-2015$
birkin@bbox-2015$ touch ./src/index.js
birkin@bbox-2015$
birkin@bbox-2015$ ls ./src/
total 0
drwxr-xr-x  3 birkin  staff    96B Mar 25 10:29 ./
drwxr-xr-x  8 birkin  staff   256B Mar 25 10:29 ../
-rw-r--r--  1 birkin  staff     0B Mar 25 10:29 index.js
birkin@bbox-2015$

(content added to index.js file)

birkin@bbox-2015$
birkin@bbox-2015$ cat ./src/index.js
const x = "this is a test";

alert( x );
birkin@bbox-2015$

note: this ES6 js will be auto-compiled into syntax that a wider variety of browsers will be able to handle.

update template

timestamp: 21:39

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ ls ../../mp_vl_app_templates/
total 128
drwxr-xr-x  10 birkin  staff   320B Mar 24 11:58 ./
drwxr-xr-x  14 birkin  staff   448B Mar 24 11:58 ../
-rw-r--r--   1 birkin  staff    30K Nov 19 14:25 base.html
-rw-r--r--   1 birkin  staff   4.8K Dec 23 15:31 db_list.html
-rw-r--r--   1 birkin  staff   560B Dec 20 10:29 entry.html
-rw-r--r--   1 birkin  staff   1.3K Mar 24 11:58 exp_01.html
-rw-r--r--   1 birkin  staff   985B Mar 24 11:58 exp_02.html
-rw-r--r--   1 birkin  staff   1.4K Mar 24 11:58 exp_03.html
-rw-r--r--   1 birkin  staff   352B Mar 25 10:38 exp_04.html
-rw-r--r--   1 birkin  staff   789B Nov 17 14:08 home.html
birkin@bbox-2015$

(exp_04.html edited)

birkin@bbox-2015$
birkin@bbox-2015$ cat ../../mp_vl_app_templates/exp_04.html
<!-- based on:
     "Django + Babel + Webpack + React Tutorial"
     <https://www.youtube.com/watch?v=Mx3ChaYA0Gw>
     (May 5, 2019)
-->

{% load staticfiles %}


<html>

    <head>
        <title>Demo</title>
    </head>

    <body>
        <h1>Hello World!</h1>
        <script src="{% static 'experimentation_04/dist/app.bundle.js' %}"></script>
    </body>

</html>
birkin@bbox-2015$

(That loading of the bundle.js should alwasy be just before the end body-tag, so DOM is fully loaded.)

update package.json

timestamp: 22:24

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ cat ./package.json
{
  "name": "experiment_04_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }
}
birkin@bbox-2015$

(Added "webpack": "webpack" -- allows us the local webpack we have running; will cause it to look for a local webpack.config.js.)

execute webpack

timestamp 22:44

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ npm run webpack

> [email protected] webpack /path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
> webpack


webpack is watching the files…

Hash: 59ab9576577f6f51f9dd
Version: webpack 4.42.1
Time: 637ms
Built at: 03/25/2020 11:34:17 AM
            Asset       Size  Chunks                   Chunk Names
    app.bundle.js  992 bytes       0  [emitted]        app
app.bundle.js.map   4.62 KiB       0  [emitted] [dev]  app
Entrypoint app = app.bundle.js app.bundle.js.map
[0] ./src/index.js 37 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

(stays in watch mode)

(in a different terminal window...)

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ ls
total 432
drwxr-xr-x    9 birkin  staff   288B Mar 25 11:34 ./
drwxr-xr-x    8 birkin  staff   256B Mar 24 10:18 ../
drwxr-xr-x    4 birkin  staff   128B Mar 25 11:34 dist/
drwxr-xr-x  370 birkin  staff    12K Mar 25 11:34 node_modules/
-rw-r--r--    1 birkin  staff   207K Mar 24 10:54 package-lock.json
-rw-r--r--    1 birkin  staff   485B Mar 25 11:19 package.json
drwxr-xr-x    3 birkin  staff    96B Mar 25 10:29 src/
-rw-r--r--    1 birkin  staff   489B Mar 25 10:26 webpack.config.js
drwx------    3 birkin  staff    96B Mar 24 10:31 ~/
birkin@bbox-2015$
birkin@bbox-2015$ ls ./dist/
total 24
drwxr-xr-x  4 birkin  staff   128B Mar 25 11:34 ./
drwxr-xr-x  9 birkin  staff   288B Mar 25 11:34 ../
-rw-r--r--  1 birkin  staff   992B Mar 25 11:34 app.bundle.js
-rw-r--r--  1 birkin  staff   4.6K Mar 25 11:34 app.bundle.js.map
birkin@bbox-2015$

run django

timestamp 23:23

http://127.0.0.1:8000/react_experimentation_04/

...yields the this is a test alert()!

Ok, so what we've done is confirmed that the tool-chain is working. webpack is using babel to compile the ES6 js, and creating the proper output in the place where the django template is looking for it. No react here yet.

install react

timestamp: 24:31

Note, not using npm install -D (package) -- not using the 'D', because this is not a development tool, but something needed for the production code to run in real-time.

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ npm install react
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
updated 1 package and audited 7474 packages in 3.088s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

birkin@bbox-2015$

(I had already installed it.)

birkin@bbox-2015$
birkin@bbox-2015$ npm install react-dom
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 2 packages and audited 7487 packages in 4.446s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

birkin@bbox-2015$

This has updated package.json.

birkin@bbox-2015$
birkin@bbox-2015$ cat ./package.json
{
  "name": "experiment_04_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.4.2",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}
birkin@bbox-2015$

(Before, everything was in devDependencies.)

update index.json using React, and the template

timestamp, 25:32

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ cat ./src/index.js
// const x = "this is a test";

// alert( x );

/*
The above was the initial code to confirm the installed build tools were working correctly.
*/


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

ReactDOM.render(
    <div>
        <h1>This is from JSX!!</h1>
    </div>,
    document.getElementById("root")
)
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ cat ../../mp_vl_app_templates/exp_04.html
<!-- based on:
     "Django + Babel + Webpack + React Tutorial"
     <https://www.youtube.com/watch?v=Mx3ChaYA0Gw>
     (May 5, 2019)
-->

{% load staticfiles %}


<html>

    <head>
        <title>Demo</title>
    </head>

    <body>
        <!-- <h1>Hello World!</h1> -->
        <div id="root"></div>
        <script src="{% static 'experimentation_04/dist/app.bundle.js' %}"></script>
    </body>

</html>
birkin@bbox-2015$

rerun webpack

timestamp, 26:51

I thought the 'watcher' terminal window would have auto-compiled this, and that we wouldn't need to rerun this command.

I checked it, and saw, among lots of other output...

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04/src/index.js: Unexpected token (14:4)

  12 |
  13 | ReactDOM.render(
> 14 |     <div>
     |     ^
  15 |         <h1>This is JSX!!</h1>
  16 |     </div>,

...so my working theory is that this is because that npm run webpack environment didn't have access to react. We'll see...

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ npm run webpack

Hmm... no, same error output. Time to troubleshoot.

update webpack.config.js

Thanks to a comment by a "Train Chen" in the video, updated webpack.config.js.

(see module.exports -> module -> rules -> use)

birkin@bbox-2015$
birkin@bbox-2015$ pwd
/path/to/mp_vl_django_stuff/mp_vl_project/mp_vl_app/static/experimentation_04
birkin@bbox-2015$

birkin@bbox-2015$
birkin@bbox-2015$ cat ./webpack.config.js
const path = require( 'path');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    watch: true,
    devtool: 'source-map',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_module/,
                // use: ['babel-loader'],
                // below is a change from the video, to get the react compilation to work
                use: [
                    {
                      loader: 'babel-loader',
                      options: {
                        presets: ['@babel/react']
                      }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: [ '.js' ]
    }

}
birkin@bbox-2015$

...and now re-running the npm run webpack works!!

It properly compiles the JSX in index.js and properly creates the dist/app.bundle.js and dist/app.bundle.js.map files that the exp_04.html template references.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment