context issues when rendering on server after upgrading to 0.13

[balanceiskey]

Hi there,

I'm getting the following error when attempting to render on the server:

Warning: Failed Context Types: Required context routerwas not specified inMobileApp.

As far as I can tell there's nothing terribly special about my rendering approach and the render works just fine on the client-side. Here's what the server-side code looks like:

 Router.run(mobileRoutes, request.url.path, function (Handler) {
    const html = React.renderToString(<Handler initialStories={initialStories} />);

    //... we never make it down here it seems
});

Note, the server-side file is transpiled with Babel, hence the ability to use JSX like this, but am I missing something else? MobileApp in this case does also have contextTypes defined.

The eventual error that's thrown is this which I imagine is related to the router context stuff:
[TypeError: Cannot read property 'getRouteAtDepth' of undefined]

[balanceiskey]

One more clue that may be relevant, I'm also seeing a parent/owner warning:

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

[jmdobry]

Seeing the same error with 0.13.3, after structuring my app exactly like the react-router-mega-demo:

Warning: Failed Context Types: Required context `routeDepth` was not specified in `RouteHandler`.
Warning: Failed Context Types: Required context `router` was not specified in `RouteHandler`.
Warning: owner-based and parent-based contexts differ (values: `undefined` vs `1`) for key (routeDepth) while mounting RouteHandler (see: http://fb.me/react-context-by-parent)
Warning: owner-based and parent-based contexts differ (values: `undefined` vs `function (props, conte...

[jmdobry]

I discovered the problem. I'm using webpack + babel, and somehow my app was ending up with multiple copies of React/React-router. I explicitly made it so my app.js uses the same reference to React that my routes file uses. Now it works.

[matthewoden]

Just wanted to chime in here with my solution to the above problem: I set react and react router to be externals in my webpack config, but only for my server prerender config. Worked like a charm.

[jmdobry]

@matthewoden Could you share your prerender config? I'm assuming you've got some Nginx/Apache config that detects a bot, and redirects to an express server with the server-side react. Something like that?

[matthewoden]

@jmdobry Ah. Yeah, it's an iso project. So, server rendering is all express.

{
  entry: {
    app: [ './app/Routes.js'],
  },
  target: 'node',
  module: {
    loaders:[
    { test: /\.jsx?$/,
      exclude: /node_modules/,
      loaders: ['babel']
    },
    {
      test:  /\.json$/,
      loader:'json-loader'
    },
    { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/,
      loader: 'file-loader?name=[path][name].[ext]',
    },
    {
      test: /\.scss$/,
      loader: 'null-loader'
    }
    ]
  },
  moduleDirectories: ['node_modules'],
  externals: [/^[a-z\/-0-9]$/],
  output: {
    path: './assets/prerender/',
    filename: '[name].js',
    libraryTarget: 'commonjs2'
   },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    //Uglify
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false  }
    }),
    new webpack.optimize.DedupePlugin(),
    //use smaller react library.
    new webpack.DefinePlugin(
      { 'process.env': { 'NODE_ENV': JSON.stringify('production') }
      }),
  ],
};

[jmdobry]

Thanks! I've got it working now :)

[jimzhan]

@jmdobry tried your approach by explicitly referencing the same React, same result. Could you share the workable settings?

[jackcallister]

@jimzhan Any luck on this?

[ryanflorence]

I just messed around with this and can't reproduce, I imagine its a build issue. If you identify something wrong with the router, let us know and we'll reopen.

[jackcallister]

@ryanflorence I can confirm it's a build issue. The regex for webpack externals (provided in their docs) doesn't match react/addons (or anything with a slash such as alt/container) - it becomes bundled and one then has two versions of react which causes this error. I fixed my webpack config here.

[balanceiskey]

In case anyone's still having trouble with this I can confirm @jarsbe nailed it. My solution was the same but slightly different, I added the following to my webpack config:

// `externals` built with a bunch of other stuff up here

externals['react/addons'] = 'commonjs react/addons';

// and later passed into the webpack config

And apologies for the extremely late follow-up on this :)