Meteor-react-router-ssr and material-ui

tgoldenberg · October 17, 2016, 7:51pm

I really want to use the meteor-react-router-ssr package with webpack to speed up the development process but it breaks when I add in material-ui npm package and use it for a UI component. Has anyone gotten this to work? If so, how? Any resources / suggestions welcome

coniel · October 17, 2016, 9:14pm

In what way is it braking? I use the same setup without doing anything special and it works fine.

tgoldenberg · October 17, 2016, 9:18pm

I filed an issue here.

Basically, it is complaining about either multiple instances of React or of wrongly using refs. I am unable to determine exactly why, but adding any material-ui component breaks the app (it won’t route anymore).

Could you share some boilerplate to compare against? This has been bothering me all day today :/. Feel free to email me too at thomasagoldenberg at gmail.

coniel · October 18, 2016, 8:59am

I had the same issue with multiple copies of React. Make sure you don’t have any Meteor packages adding Meteor’s React package. Also try running npm list react to check if some NPM package is including another version of React.

As for the refs, string refs (e.g. <Button ref="my-button" />) are considered legacy, and will likely be deprecated at some point in the future. Although they shouldn’t be causing a problem yet.

tgoldenberg · October 18, 2016, 9:06pm

@coniel, so I made a sample repo with the minimal amount of changes to the original kickstarter repo. All I changed is the routes.jsx file and added material-ui with a RaisedButton component, calling browserHistory.push. Am really curious what the issue is.

github.com

tgoldenberg/meteor-ssr-example/blob/master/src/routes.jsx

import { Link, Route, browserHistory } from 'react-router';
import { MuiThemeProvider, getMuiTheme } from 'material-ui/styles';

import { RaisedButton } from 'material-ui';
import { ReactRouterSSR } from 'meteor/reactrouter:react-router-ssr';
import todoRoutes from 'TodoApp/client/routes';

const About = () => (
  <div>
    <h1>ABOUT</h1>
    <RaisedButton
      label='HOME'
      onTouchTap={() => browserHistory.push('/')}
    />
    <Link to='/privacy'>privacy</Link>
  </div>
);

const Privacy = () => (
  <div>

This file has been truncated. show original