React Router

[jackcallister]

Not project specific but I wasn't sure where to ping you - Have you managed to get a webpack bundled node app working with React Router? The context seems to get lost causing issues like this remix-run/react-router#1093

My issue owner-based and parent-based contexts differ (values:undefinedvsfunction (props, context)`

I'm basically following along with your tutorial with my own config but no luck getting it working. Wasn't sure who else to ask! (The project is here btw https://github.com/jarsbe/book-shelf/tree/isomorphic)

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

var node_modules = fs.readdirSync('node_modules').filter(function(x) { return x !== '.bin' });

module.exports = {
  entry: './server/app.js',

  target: 'node',

  resolve: {
    extensions: ['', '.js', '.jsx', '.css', '.local']
  },

  output: {
    path: './dist/scripts',
    filename: 'server.js',
    libraryTarget: 'commonjs2'
  },

  node: {
    __filename: true,
    __dirname: true,
    console: true
  },

  externals: node_modules,

  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=1&optional=runtime' },
      { test: /\.local$/, loader: 'css-loader/locals?module!less-loader' },
      { test: /\.css$/, loader: 'null-loader' }
    ]
  }
}

[jackcallister]

FWIW I know that you are wanting to bundle the full node application with webpack (from reading your articles) but after a bit of hunting around and asking questions I've found an approach that works for what I need.

I want my React/Flux application to have webpack configuration for server side rendering (e.g css-loader should use css-loader/local which returns an object of classnames). First approach attempted to use webpack to bundle the whole node app. This proved problematic, as above (and as I'm sure you've discovered!).

Instead I can bundle the React/Flux application from the entry point which the node app uses (routes.jsx) thus using webpack loaders with server side config!

[jackcallister]

Sorry for the spam but one more thing for anyone who finds this. It turns out it's not bundling node which is the issue. It's a problem with requiring node modules, specifically react/addons via react-router causes all sorts of context headaches. I fixed it with config like so:

module.exports = {
  entry: './src/app/ui/routes.jsx',

  target: 'node',

  externals: [
    // Need to manual set these to not be bundled
    {
      'alt/container': true,
      'react/addons': true
    },
    // Don't bundle modules
    /^[a-z\-0-9]+$/
  ],

  resolve: {
    extensions: ['', '.js', '.jsx', '.css', '.less', '.local']
  },

  output: {
    path: './build',
    filename: 'server.js',
    libraryTarget: 'commonjs2'
  },

  module: {
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'jsx-loader' },
      { test: /\.local$/, exclude: /node_modules/, loader: 'css-loader/locals?module!less-loader' },
      { test: /\.less$/, exclude: /node_modules/, loader: 'null-loader' },
      { test: /\.css$/, exclude: /node_modules/, loader: 'null-loader' }
    ]
  }
};

[brandondurham]

@jarsbe — I've got to thank you for coming back and posting this fix. I've been pulling my hair out for two days on this.

THANK YOU.