webpack-dev-server not serving bundle from config location with react-router param route

Question

Using react-router my routes match and my app bundle SearchUXBundle.js correctly loads from first level routes - but second level routes /tracker/:id incorrectly are trying to load my app bundle from localhost/tracker/dist/SearchUXBundle.js instead of localhost/dist/SearchUXBundle.js. im assuming this is some kind of config wrinkle in webpack 'output' relating to relative paths that im missing...

webpack.config,js

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

module.exports = {
  devtool: 'source-map',
  devServer: {
        inline:false,
        port: 8001,
        historyApiFallback: true 
  },
  entry: {
    app: ['./src/root.js']
  },

  output: {
          path: "/dist",
          publicPath: '/',
          filename: '/dist/SearchUXBundle.js'
    },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          retainLines: true,
          cacheDirectory: true
        }
      },
      {
        test: /.css$/,
        loaders: ['style', 'css']     
      },
      { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' },
    ]
  },
  resolve: {
      alias: {
          __CONFIG__: path.join(__dirname, 'config', process.env.REACT_ENV)
      }
  }
};

app.js

...
const store = createStore(rootReducer, enhancer);
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: createSelectLocationState()
});

render(
  <Provider store={store} >
     <Router history={history}> 
        <Route path="/" component={SearchUXContainer} />
        <Route path="tracker/:id" component={EmailTrackerContainer}/>
        <Route path="thisWorks" component={SearchUXContainer}/>
     </Router>
  </Provider>,
  document.getElementById('app')
);

Can you include your index.html. My first guess would be that the SearchUXBundle.js in your index.html is relative when it should be absolute. — Paul S
bingo! so i had improperly linked "dist/SearchBundle.js" - the other problem i found was that i had improperly nested my routes under <Route path="/"...>. If you would like to roll this into an answer i will accept it — steveinatorx

Paul S Paul S · Accepted Answer · 2017-01-04T20:27:05

You need to make sure that the linked bundle in your index.html file is absolute. If it is relative, then the location will vary based on the URL and any nested routes will point to a non-existent location.

<!-- bad -->
<script src="dist/SearchUXBundle.js"></script>

<!-- good -->
<script src="/dist/SearchUXBundle.js"></script>

webpack-dev-server not serving bundle from config location with react-router param route

1 Answers