Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Building Applications with React and Redux Getting Started with Redux Redux Initial Setup - index.js

Gergely Szabo
Gergely Szabo
6,082 Points

Webpack doesn't output bundle.js

I started the webpack along with the video with: npm install command, But there is no bundle.js file in the directory.

The webpack.config.js file is:

module.exports = { devtool: 'inline-sourcemap', entry: './index.js', output: { filename: 'bundle.js' }, module: { loaders: [ { test: /.js$/, exclude: /node_modules/, loaders: [ 'react-hot', 'babel' ] } ] } };

And the terminal returns with this message: webpack: Compiled successfully.

Do you have any idea?

Thanks Gary

5 Answers

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.

Gergely Szabo
Gergely Szabo
6,082 Points

Thanks! It was my fault. I am not so familiar with Webpack yet, and I thong during the "npm start" It will generate bundle.js file. The build command solved my problem.

Thanks again

Tim Fau
Tim Fau
17,716 Points

Two years later, but... thank you so much! They really should update this.

You might have missed where he issued the command:

$ npm start

which runs the start script defined in this section of package.json

  "scripts": {
    "prestart": "npm run lint",
    "start": "webpack-dev-server --progress --inline --hot",
    "lint": "eslint ./src/**/*.{js, jsx} --fix",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

NOTE: you can format your treehouse posts using markdown to make it more readable

The "Markdown Cheatsheet" link below the "Add Comment" form seems broken, but here are some links that describe formatting comments on treehouse and a general Markdown Cheatsheet.

https://teamtreehouse.com/community/howto-guide-markdown-within-posts

https://teamtreehouse.com/community/posting-code-to-the-forum

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

Also, there is a little preview button that looks like an eye inside the bottom right of the "Add Comment" form that has a "Preview" popup that appears when you hover over it. It is very faint in FIrefox so I didn't know it was there at first.

This lets you check whether you're happy with the comment formatting before you post it.

Gergely Szabo
Gergely Szabo
6,082 Points

Thanks for the answer, but It is there :(

{ "name": "react-redux-course", "version": "1.0.0", "description": "React-Redux course for Treehouse", "main": "src/index.js", "scripts": { "prestart": "npm run lint", "start": "webpack-dev-server --progress --inline --hot", "lint": "eslint ./src/**/*.{js, jsx} --fix", "test": "echo \"Error: no test specified\" && exit 1" }, and the terminal came back with this, so It should be there:

Asset Size Chunks Chunk Names bundle.js 2.69 MB 0 [emitted] main 0.e2bec77ab7dd9378a103.hot-update.js 2.01 MB 0 [emitted] main e2bec77ab7dd9378a103.hot-update.json 36 bytes [emitted] chunk {0} bundle.js, 0.e2bec77ab7dd9378a103.hot-update.js (main) 971 kB [rendered]

Tom Geraghty
Tom Geraghty
24,162 Points

Did bundle.js get generated and placed into a subdirectory (maybe public/ or build/)? If it says it created the file but you aren't seeing it, maybe it placed it in another folder in your project directory somewhere. Just a guess...

Saqib Ishfaq
Saqib Ishfaq
13,912 Points

i am getting this error>>>>

Saqibs-MacBook-Pro:react-redux-course saqibishfaq$ npm start

> react-redux-course@1.0.0 prestart /Users/saqibishfaq/react-redux-course
> npm run lint


> react-redux-course@1.0.0 lint /Users/saqibishfaq/react-redux-course
> eslint ./src/**/*.{js, jsx} --fix


> react-redux-course@1.0.0 start /Users/saqibishfaq/react-redux-course
> webpack-dev-server --progress --inline --hot

/Users/saqibishfaq/react-redux-course/node_modules/webpack-cli/bin/convert-argv.js:156
                const webpackConfigurationValidationErrors = validateSchema(
                                                             ^

TypeError: validateSchema is not a function
    at processConfiguredOptions (/Users/saqibishfaq/react-redux-course/node_modules/webpack-cli/bin/convert-argv.js:156:48)
    at module.exports (/Users/saqibishfaq/react-redux-course/node_modules/webpack-cli/bin/convert-argv.js:150:10)
    at Object.<anonymous> (/Users/saqibishfaq/react-redux-course/node_modules/webpack-dev-server/bin/webpack-dev-server.js:92:55)
    at Module._compile (internal/modules/cjs/loader.js:722:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:775:12)
    at startup (internal/bootstrap/node.js:300:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-redux-course@1.0.0 start: `webpack-dev-server --progress --inline --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-redux-course@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/saqibishfaq/.npm/_logs/2018-12-17T03_10_58_746Z-debug.log
Saqibs-MacBook-Pro:react-redux-course saqibishfaq$
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

Jere Green i followed your instructions!! still getting these above logs in terminal