title: bundle.js file contains only html when inspected despite local copy showing otherwise
body: <p><strong>UPDATE:</strong>
  I tried adding a publicPath option to my <code>webpack.config.js</code> under <code>output</code>, the value being <code>/static/</code>. I also changed my script tag from <code>&lt;script src="/bundle.js"&gt;&lt;/script&gt;</code> to <code>&lt;script src="/static/bundle.js"&gt;&lt;/script&gt;</code>. No luck, which is strange because when I take a look at <a href="https://github.com/reactjs/redux/tree/master/examples/universal" rel="nofollow noreferrer">this example redux app</a>, I can reproduce the error I'm getting by deleting their <code>publicPath</code> option from the <code>webpack.config.js</code>.</p>
  
  <p><br></p>
  
  <p>I'm in the process of trying to render some html server-side with node/express. The app uses react and redux. I ran 'npm run dev' to start the local server, but upon navigating to it in chrome I found this error in the console:</p>
  
  <p>bundle.js:2 Uncaught SyntaxError: Unexpected token &lt;</p>
  
  <p>Upon further inspection it seems that my bundle.js contains nothing but the compiled html from the server. I'm still trying to wrap my head around server side rendering with node, redux, and most of all webpack, so I'm having difficulty seeing how this could be the case. I'm looking at my IDE and it tells me bundle.js contains tons of compiled js.</p>
  
  <p><a href="https://i.stack.imgur.com/WDffo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WDffo.png" alt="My file structure"></a></p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "serif.nu",
    "version": "1.0.0",
    "description": "Simple. Fast. Visual. Course Planning for Northwestern University.",
    "main": "index.jsx",
    "scripts": {
      "webpack-watch": "webpack -w",
      "express-server": "node ./server/index.js",
      "dev": "concurrently --kill-others \"npm run webpack-watch\" \"npm run express-server\"",
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "repository": {
      "type": "git",
      "url": "git+https://github.com/Joonpark13/serif.nu.git"
    },
    "author": "Joon Park",
    "license": "ISC",
    "bugs": {
      "url": "https://github.com/Joonpark13/serif.nu/issues"
    },
    "homepage": "https://github.com/Joonpark13/serif.nu#readme",
    "devDependencies": {
      "babel-watch": "^2.0.3",
      "concurrently": "^3.1.0",
      "webpack": "^1.13.3"
    },
    "dependencies": {
      "babel-core": "^6.18.2",
      "babel-loader": "^6.2.7",
      "babel-plugin-transform-object-rest-spread": "^6.16.0",
      "babel-polyfill": "^6.16.0",
      "babel-preset-es2015": "^6.18.0",
      "babel-preset-react": "^6.16.0",
      "babel-register": "^6.18.0",
      "es6-promise": "^4.0.5",
      "express": "^4.14.0",
      "isomorphic-fetch": "^2.2.1",
      "material-ui": "^0.16.1",
      "react": "^15.3.2",
      "react-bootstrap": "^0.30.6",
      "react-dom": "^15.3.2",
      "react-redux": "^4.4.6",
      "react-tap-event-plugin": "^1.0.0",
      "redux": "^3.6.0",
      "redux-thunk": "^2.1.0",
      "request": "^2.79.0",
      "request-json": "^0.6.1"
    },
    "babel": {
      "presets": [
        "es2015",
        "react"
      ],
      "plugins": [
        "transform-object-rest-spread"
      ]
    }
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
      entry: path.join(__dirname, 'app/index.jsx'),
      output: {
          filename: 'bundle.js',
          path: path.join(__dirname, 'dist')
      },
      module: {
          loaders: [
              {
                  test: /\.jsx$/,
                  exclude: /node_modules/,
                  loader: 'babel-loader'
              },
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  loader: 'babel-loader'
              }
          ]
      }
  };
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>require('babel-register');
  require('./server');
  </code></pre>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>import express from 'express';
  import React from 'react';
  import { createStore } from 'redux';
  import { Provider } from 'react-redux';
  import { renderToString } from 'react-dom/server';
  import reducer from '../app/reducers';
  import App from '../app/components/App';
  
  const app = express();
  
  function renderFullPage(html, preloadedState) {
    return `
      &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
          &lt;head&gt;
              &lt;meta charset="UTF-8"&gt;
              &lt;title&gt;Serif&lt;/title&gt;
  
              &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"&gt;
              &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
              &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"&gt;
              &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css"&gt;
              &lt;link rel="stylesheet" href="materialFullCalendar.css"&gt;
  
              &lt;link rel="apple-touch-icon" sizes="57x57" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-57x57.png"&gt;
              &lt;link rel="apple-touch-icon" sizes="60x60" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-60x60.png"&gt;
              &lt;link rel="apple-touch-icon" sizes="72x72" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-72x72.png"&gt;
              &lt;link rel="apple-touch-icon" sizes="76x76" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-76x76.png"&gt;
              &lt;link rel="apple-touch-icon" sizes="114x114" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-114x114.png"&gt;
              &lt;link rel="apple-touch-icon" sizes="120x120" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-120x120.png"&gt;
              &lt;link rel="apple-touch-icon" sizes="144x144" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-144x144.png"&gt;
              &lt;link rel="apple-touch-icon" sizes="152x152" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-152x152.png"&gt;
              &lt;link rel="apple-touch-icon" sizes="180x180" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-180x180.png"&gt;
              &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/favicon-32x32.png" sizes="32x32"&gt;
              &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/favicon-194x194.png" sizes="194x194"&gt;
              &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/favicon-96x96.png" sizes="96x96"&gt;
              &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/android-chrome-192x192.png" sizes="192x192"&gt;
              &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/favicon-16x16.png" sizes="16x16"&gt;
              &lt;link rel="manifest" href="https://s3.amazonaws.com/serif-assets/manifest.json"&gt;
              &lt;link rel="mask-icon" href="https://s3.amazonaws.com/serif-assets/safari-pinned-tab.svg" color="#520063"&gt;
              &lt;link rel="shortcut icon" href="https://s3.amazonaws.com/serif-assets/favicon.ico"&gt;
              &lt;meta name="msapplication-TileColor" content="#da532c"&gt;
              &lt;meta name="msapplication-TileImage" content="https://s3.amazonaws.com/serif-assets/mstile-144x144.png"&gt;
              &lt;meta name="msapplication-config" content="https://s3.amazonaws.com/serif-assets/browserconfig.xml"&gt;
              &lt;meta name="theme-color" content="#520063"&gt;
          &lt;/head&gt;
  
          &lt;body&gt;
              &lt;div id="app"&gt;${html}&lt;/div&gt;
  
              &lt;script
                  src="https://code.jquery.com/jquery-3.1.1.min.js"
                  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
                  crossorigin="anonymous"&gt;
              &lt;/script&gt;
              &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"&gt;&lt;/script&gt;
              &lt;script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"&gt;&lt;/script&gt;
              &lt;script&gt;
                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)};
              &lt;/script&gt;
              &lt;script src="/bundle.js"&gt;&lt;/script&gt;
          &lt;/body&gt;
      &lt;/html&gt;
    `;
  }
  
  function handleRender(req, res) {
    const store = createStore(reducer);
  
    const html = renderToString(
      &lt;Provider store={store}&gt;
        &lt;App /&gt;
      &lt;/Provider&gt;
    );
  
    const preloadedState = store.getState();
  
    res.send(renderFullPage(html, preloadedState));
  }
  
  app.use(handleRender);
  
  const port = process.env.PORT || 3000;
  app.listen(port, () =&gt; {
      console.log(`Running on port ${port}`);
  });
  </code></pre>
  
  <p><strong>index.jsx</strong></p>
  
  <pre><code>import 'babel-polyfill'; // http://redux.js.org/docs/advanced/AsyncActions.html#note-on-fetch
  
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import store from './store';
  
  import App from './components/App.jsx';
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;,
    document.getElementById('app')
  );
  </code></pre>
  
  <p><strong>store.js</strong></p>
  
  <pre><code>import { createStore, compose, applyMiddleware } from 'redux';
  import thunkMiddleware from 'redux-thunk';
  import reducer from './reducers';
  
  const preloadedState = window.__PRELOADED_STATE__;
  
  const store = createStore(
      reducer,
      preloadedState,
      compose(
          applyMiddleware(thunkMiddleware),
          window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__()
      )
  );
  
  export default store;
  </code></pre>
  
  <p><strong>App.jsx</strong></p>
  
  <pre><code>import injectTapEventPlugin from 'react-tap-event-plugin'; // Needed for onTouchTap
  
  import React from 'react';
  import getMuiTheme from 'material-ui/styles/getMuiTheme';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import { grey500, white, fullBlack } from 'material-ui/styles/colors';
  import { fade } from 'material-ui/utils/colorManipulator';
  import colors from '../colors';
  import NavBar from './NavBar.jsx';
  import Serif from './Serif.jsx';
  
  // http://stackoverflow.com/a/34015469/988941
  injectTapEventPlugin();
  
  const muiTheme = getMuiTheme({
    palette: {
      primary1Color: colors.northwesternPurple,
      primary2Color: colors.northwesternPurple120,
      primary3Color: grey500,
      accent1Color: colors.northwesternPurple30,
      accent2Color: colors.richBlack10,
      accent3Color: colors.richBlack50,
      textColor: colors.richBlack80,
      alternateTextColor: white,
      canvasColor: white,
      borderColor: colors.richBlack20,
      disabledColor: fade(colors.richBlack80, 0.3),
      pickerHeaderColor: colors.northwesternPurple,
      clockCircleColor: fade(colors.richBlack80, 0.07),
      shadowColor: fullBlack
    }
  });
  
  export default class App extends React.Component {
    render() {
      return (
        &lt;MuiThemeProvider muiTheme={muiTheme}&gt;
          &lt;div&gt; {/* MuiThemeProvider requires stricly one child element */}
            &lt;NavBar /&gt;
            &lt;Serif /&gt;
          &lt;/div&gt;
        &lt;/MuiThemeProvider&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Serif&lt;/title&gt;
  
          &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"&gt;
          &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css"&gt;
          &lt;link rel="stylesheet" href="materialFullCalendar.css"&gt;
  
          &lt;link rel="apple-touch-icon" sizes="57x57" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-57x57.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="60x60" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-60x60.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="72x72" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-72x72.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="76x76" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-76x76.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="114x114" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-114x114.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="120x120" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-120x120.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="144x144" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-144x144.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="152x152" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-152x152.png"&gt;
          &lt;link rel="apple-touch-icon" sizes="180x180" href="https://s3.amazonaws.com/serif-assets/apple-touch-icon-180x180.png"&gt;
          &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/favicon-32x32.png" sizes="32x32"&gt;
          &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/favicon-194x194.png" sizes="194x194"&gt;
          &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/favicon-96x96.png" sizes="96x96"&gt;
          &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/android-chrome-192x192.png" sizes="192x192"&gt;
          &lt;link rel="icon" type="image/png" href="https://s3.amazonaws.com/serif-assets/favicon-16x16.png" sizes="16x16"&gt;
          &lt;link rel="manifest" href="https://s3.amazonaws.com/serif-assets/manifest.json"&gt;
          &lt;link rel="mask-icon" href="https://s3.amazonaws.com/serif-assets/safari-pinned-tab.svg" color="#520063"&gt;
          &lt;link rel="shortcut icon" href="https://s3.amazonaws.com/serif-assets/favicon.ico"&gt;
          &lt;meta name="msapplication-TileColor" content="#da532c"&gt;
          &lt;meta name="msapplication-TileImage" content="https://s3.amazonaws.com/serif-assets/mstile-144x144.png"&gt;
          &lt;meta name="msapplication-config" content="https://s3.amazonaws.com/serif-assets/browserconfig.xml"&gt;
          &lt;meta name="theme-color" content="#520063"&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="app"&gt;&lt;/div&gt;
  
          &lt;script
              src="https://code.jquery.com/jquery-3.1.1.min.js"
              integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
              crossorigin="anonymous"&gt;
          &lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"&gt;&lt;/script&gt;
          &lt;script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"&gt;&lt;/script&gt;
          &lt;script src="/bundle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>bundle.js</strong>
  <a href="https://gist.github.com/Joonpark13/2b9c3bb7b8e07e8ee898650c7eeb1b88" rel="nofollow noreferrer">https://gist.github.com/Joonpark13/2b9c3bb7b8e07e8ee898650c7eeb1b88</a></p>
  
  <p>Any help would be much appreciated. Thank you!</p>