localhost node server can't load bundle.js from webpack

Question

I'm learning react following Isomorphic App tutorial.

Since i'm really new to react, I strictly followed the tutorial, writing every single script as described. When I launch the server with npm start, the browser on localhost:3000 doesn't render the page as expected, showing only the title without the input field and the button for adding a new todo. Opening the Dev Console, comes out that bundle.js can't get loaded and i really can't understand why.

If I point the browser to localhost:3000/home, on the other hand, it renders the input field and the button, but again bundle.js is not loaded, and the "app" doesn't work (i.e. doesn't add a new todo).

i'm new to react, webpack and node, i googled a lot but i really can't get it through, i don't know what's happening. package.json and webpack.config too have been created following the tutorial indications.

I'm banging my head against the wall since a few days, please ease my pain, i beg you :D

here's my config:

package.json:

{
  "name": "isomorphic-redux",
  "version": "1.0.0",
  "repository": "https://github.com/bananaoomarang/isomorphic-redux",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "NODE_PATH=$NODE_PATH:./shared node --harmony .",
    "dev": "npm run start & webpack-dev-server --progress --color",
    "build": "NODE_ENV=production webpack --progress --color -p --config webpack.prod.config.js"
  },
  "author": "Milo Mordaunt <milomord@gmail.com>",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.7.0",
    "express": "^4.13.3",
    "history": "^1.9.1",
    "immutable": "^3.7.5",
    "object-assign": "^4.0.1",
    "react": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-redux": "^4.0.0",
    "react-router": "1.0.0-rc3",
    "redux": "^3.0.0",
    "webpack": "^1.13.2"
  },
  "devDependencies": {
    "babel": "latest",
    "babel-eslint": "^4.1.2",
    "babel-loader": "^5.3.2",
    "eslint": "^1.4.3",
    "eslint-plugin-react": "^3.3.2",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.1",
    "webpack-dev-server": "^1.11.0"
  }
}

webpack.config

var path    = require('path');
var webpack = require('webpack');

module.exports = {
  entry:  [
    'webpack-dev-server/client?http://127.0.0.1:8080/',
    'webpack/hot/only-dev-server',
    './client'
  ],
  output: {
    path:     path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'shared'],
    extensions:         ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test:    /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel']
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    proxy: {
      '*': 'http://127.0.0.1:' + (process.env.PORT || 3000)
    },
    host: '127.0.0.1'
  }
};

the project structure is the following:

client/
---index.jsx
shared/
---actions/
---components/
------...
------Home.jsx
------index.jsx
---reducers/
---routes.jsx

index.js
server.jsx
package.json
webpack.config
.babelrc

Answer 1

According to your package.json you are using the new babel 6 release. However you don't have all the required dependencies for this new release. According to babel-loader you need to install babel-preset-es2015 too:

npm install babel-loader babel-core babel-preset-es2015 --save-dev

As you are also using React, you need the react preset to be installed too. So install both:

npm install --save-dev babel-preset-es2015 babel-preset-react

Create a file in your package folder called .babelrc to keep the babel configuration and enable both presets:

.babelrc
{
  "presets": ["es2015", "react"]
}

And then run the server again:

npm run dev

Then http://localhost:8090/assets/bundle.js should show the bundled module.

My diagnosis:

You cannot get the the bundle.js because your npm run dev throws some errors trying to apply the babel loader because it is not properly configured. Then, when you try to request the bundle.js file you get a 404 error because it has not been generated.

From -> https://stackoverflow.com/questions/33502987/webpack-bundle-js-not-found

Answer 2

You are running two somehow different setups that don't know of each other immediately. When you do npm start you fire up the node process with your index.js file that in the end serves some html referencing a non-existing bundle.js file.

On the other hand, when you run the webpack-dev-server, all bundled content will reside only in-memory and will never be written to your disk. so the file will not be available to the server started with npm start.

But as you can see in the webpack config, it contains a section where a proxy is configured to route all unknown paths to a backend on port 3000. This is where the two setups are connected. You need to run the webpack-dev-server using npm run dev and then open localhost:8080 in your browser. This task automatically runs npm start as first command (which runs your node app) and afterwards starts the webpack-dev-server. So if you want to access your application, you must not use port 3000 but either go to 8080 which is the port of the webpack-dev-server.

The error you get is also documented in the blog post at this position: https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#4c7c

If you see a errors in the console about bundle.js not being found, Don’t Panic. This is because the client is trying to load bundle.js, but we haven’t configured Webpack’s entry point yet, so we get nothing.

And the solution can be found some lines later (https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#0eed):

Now we can start our app with npm run dev (instead of npm start) and Webpack will serve our client a bundle.js, so it can do it’s own routing from here-on-out. It still won’t look very interesting, but visiting http://localhost:8080/ should work without errors.