Webpack doesn't output bundle.js

Adding a build step to generate a bundle.js

In looking at the downloaded package.json files, they don't seem to have a build script defined.

You can add this to your package.json to under the "scripts" key to do a build:

    "build": "webpack",

Note that a build to create a bundle.js output is just running the webpack command at a shell:

$ webpack

With the build script added to package.json, you can run this at the shell:

npm run build

This can be better because npm scripts have a more controlled environment than the command line

• e.g. ensures that locally installed packages (like webpack) are used rather than one installed globally

Then you can run npm run build to actually create the bundle.js file in the filesystem:

npm run build
npm start

react-hot-loader doesn't need or generate bundle.js to the filesystem

react-hot-loader doesn't seem to require or actually create a bundle.js in the project directory.

For the current version of the hot loader that I'm running, "react-hot-loader": "^3.0.0-beta.7",, you don't actually have to manually build bundle.js first. It's probably the same with the older version that you're using, but I don't know that for sure. Also, the react-hot-loader refers to bundle.js, but doesn't seem to actually create it in the filesystem. It seems to have it's own separate technique for packaging up the code and getting it into the browser.

For reference, here is what my react-hot-loader output looks like:

### NOTE: no bundle.js is present
user@host ~/dev.trn/treehouse/build-apps-react-redux/working $ ls -a
.  ..  app.css  .babelrc  .eslintrc  index.html  index.js  node_modules  package.json  package-lock.json  src  webpack.config.js
user@host ~/dev.trn/treehouse/build-apps-react-redux/working $ npm start

> react-redux-course@1.0.0 prestart /home/user/dev.trn/treehouse/build-apps-react-redux/working
> npm run lint


> react-redux-course@1.0.0 lint /home/user/dev.trn/treehouse/build-apps-react-redux/working
> eslint ./src/**/*.{js, jsx} --fix


> react-redux-course@1.0.0 start /home/user/dev.trn/treehouse/build-apps-react-redux/working
> webpack-dev-server --progress --inline --hot

 10% building modules 1/1 modules 0 active                                         
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 6552ad86db8671482fe9                                                              
Version: webpack 3.4.1
Time: 22114ms
    Asset     Size  Chunks                    Chunk Names
bundle.js  3.84 MB       0  [emitted]  [big]  app
 [184] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server react-hot-loader/patch ./index.js 64 bytes {0} [built]
 [185] (webpack)-dev-server/client?http://localhost:8080 5.83 kB {0} [built]
 [186] ./node_modules/url/url.js 23.3 kB {0} [built]
 [192] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
 [194] ./node_modules/loglevel/lib/loglevel.js 6.74 kB {0} [built]
 [195] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
 [227] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
 [232] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
 [234] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
 [235] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
 [236] ./node_modules/react-hot-loader/patch.js 41 bytes {0} [built]
 [237] ./node_modules/react-hot-loader/lib/patch.js 209 bytes {0} [built]
 [358] ./index.js 1.19 kB {0} [built]
 [470] ./node_modules/react-hot-loader/index.js 41 bytes {0} [built]
 [490] ./src/reducers/player.js 1.85 kB {0} [built]
    + 476 hidden modules
webpack: Compiled successfully.
^Cuser@host ~/dev.trn/treehouse/build-apps-react-redux/working $ 

Notice that it refers to a bundle.js asset in the output, but it is probably just an in-memory construct that it shares with webpack-dev-server.

The ls command below was run in a separate shell AFTER the hot loader was running. Notice that there is no bundle.js.

user@host ~/dev.trn/treehouse/build-apps-react-redux/working $ ls -a
.  ..  app.css  .babelrc  .eslintrc  index.html  index.js  node_modules  package.json  package-lock.json  src  webpack.config.js

BTW, using the hot loader is extremely convenient because your changes are pushed out very quickly to the dev server and show up in the browser within a few seconds.

Running current versions of packages rather than what is hardcoded with the project

I haven't run the project as downloaded because I don't want to use Webpack 1 and versions of other packages that are 12-18 months old. I also don't want to use an 18-month old version of "babel-preset-stage-0": "^6.5.0"

BTW, it looks like at that time, they could've used babel-preset-stage-1 to get Class Fields, which are used extensively in the project code.

I'm using current versions of everything rather than the older versions configured in the downloaded projects package.json. To do this I deleted the package entries from package.json and then did the various npm install commands to get the current versions of everything. I had to research a little, like changes in webpack and react-hot-loader and then make corresponding changes.

I got everything working (including using class properties which for Babel is currently in babel-preset-stage-2, but I had to make around a dozen changes across many files.

Problems with the downloaded project code

It seems to me there are several problems with the downloaded code that require troubleshooting to resolve, which might make it difficult for a beginner.

It's hilarious to see the buggy code displayed in the training videos, interleaved with the instructor seemingly running the app without problems and without any discussion that there ARE bugs in the code

It can be an excellent learning exercise to deal with these kinds of bugs and problems, but it's probably difficult for some learners to overcome these barriers. Also, it can be frustrating when you just want to see things working instead of having to troubleshoot, sometimes for hours, trying to figure our what is wrong, doing research into related topics and trying various ideas to work around it.