CODEWITHSUNDEEP
reactjsisomorphic-javascriptmaterial-uireact-starter-kit
bjfletcher
bjfletcher

Reputation: 11518

React Starter Kit and Material UI: userAgent should be supplied in the muiTheme context for server-side rendering

With the React Starter Kit, I add Material UI as follows:

npm install material-ui --save

and the following import to a component:

import RaisedButton from 'material-ui/lib/raised-button';

and:

<RaisedButton label="Default" />

I get the following error:

Warning: Material-UI: userAgent should be supplied in the muiTheme context for server-side rendering.

According to Material UI's documentation, it says I'd need to address three things:

  1. autoprefixer and the user agent
  2. process.env.NODE_ENV

What code should I put in and where exactly, specifically with the React Starter Kit?

P.S. this solution does not work for me :-/

Upvotes: 7

Views: 7684

Answers (6)

Tomasz Szuba
Tomasz Szuba

Reputation: 439

The working (and the cleanest) solution for me is short and simple:

getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })

Example (from my test app):

<MuiThemeProvider muiTheme={getMuiTheme({userAgent: (typeof navigator !== 'undefined' && navigator.userAgent) || 'all' })}>
    <Provider store={store}>
        <MyApplication/>
    </Provider>
</MuiThemeProvider>

Upvotes: 3

bjfletcher
bjfletcher

Reputation: 11518

This works for me. Add this to server.js:

global.navigator = { userAgent: 'all' };

Then verify that you see multiple vendor prefixes used like in this screengrab showing -webkit and -ms both being used:

enter image description here

Upvotes: 4

David Nore&#241;a
David Nore&#241;a

Reputation: 4230

If you are using KoaJS server you should install koa-useragent and then use this before server side rendering:

  global.navigator = global.navigator || {};
  global.navigator.userAgent = this.state.userAgent.source || 'all';

It worked for me !

Upvotes: 0

Antoine
Antoine

Reputation: 413

When using Material-UI with server rendering, we must use the same environment for the server and the client. This has two technical implications.

as you seen on MaterialUI documentation page

You need to provide the same user-agent for both server and browser contexts as you seen it in documentation, but, I strongly discourage you to provide a "all" user-agent, since you will serve a lot of unnecessary code to your end-user.

Instead you can easily follow MaterialUI doc and pass user-agent value contained in http request headers.

With an express or koa server

global.navigator = global.navigator || {};
global.navigator.userAgent = req.headers['user-agent'] || 'all';

I just checked it has been added to the ReactStarterKit (not tested myself) in src/server.js

global.navigator = global.navigator || {};
global.navigator.userAgent = global.navigator.userAgent || 'all';

Upvotes: 6

Konstantin Tarkus
Konstantin Tarkus

Reputation: 38428

Try adding global.navigator = { userAgent: 'all' }; at the top of your server.js file (Node.js entry point).

Upvotes: 3

everconfusedGuy
everconfusedGuy

Reputation: 2797

This should fix it 

import themeDecorator from 'material-ui/lib/styles/theme-decorator';
import RaisedButton from 'material-ui/lib/raised-button';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';

class MyComponent extends Component {
 render() {
   return (<RaisedButton label="Default" />);
  }
}

export default themeDecorator(getMuiTheme(null, { userAgent: 'all' }))(MyComponent);

Upvotes: 4

Related Questions