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

Question

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:

autoprefixer and the user agent
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 :-/

score 6 · Answer 1 · answered Jun 29 '16 at 13:10

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';

This will absolutely *not* work correctly server-side, as node can be servicing multiple requests concurrently (for different browsers), thereby overwriting the global value of `global.navigator` to be incorrect mid-cycle. — Matthemattics, Jul 25 '17 at 21:48

score 4 · Answer 2 · answered Feb 19 '16 at 07:54

4

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);

answered Feb 19 '16 at 07:54

everconfusedGuy

2,709
27
43

I'm told to use MuiThemeProvider instead because themeDecorator has been deprecated. – Roman Starkov Apr 19 '16 at 07:53
1

I agree that you should use `MuiThemeProvider` but `getMuiTheme(null, { userAgent: 'all' })` still works, an in my opinion it's way more elegant than declaring a global variable. – Gilad Artzi Jun 13 '16 at 06:59
Hi @RomanStarkov and GiladArtzi, I think you can do it [this way](http://stackoverflow.com/a/43958563/6226738). – Erik Engi May 15 '17 at 12:49

score 4 · Accepted Answer · edited Feb 01 '17 at 16:52

4

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:

edited Feb 01 '17 at 16:52

Green

28,742
61
158
247

answered Feb 20 '16 at 23:40

bjfletcher

11,168
4
52
67

1

This solution will lead for invalid checksum and `display:-webkit-box,-moz-box,-ms-flexbox...` please be careful, right now it will break your client behavior for support inline style prefixer which is trust the userAgent – Idan Gozlan Dec 17 '16 at 01:00
Yes @IdanGozlan, I think [this solution](http://stackoverflow.com/a/43958563/6226738) is better. – Erik Engi May 15 '17 at 12:48

Konstantin Tarkus · Answer 4 · 2016-02-22T02:19:22.487

3

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

edited Feb 22 '16 at 02:19

answered Feb 18 '16 at 12:47

Konstantin Tarkus

37,618
14
135
121

Thanks. I've tried adding that at the very top (1st line) of `server.js` and again after all the imports - still getting the same warning. – bjfletcher Feb 18 '16 at 14:56
I had a look in the code and noticed that we'd need `global.navigator.userAgent = 'all'` not `global.navigator = ''` or `global.navigator = 'all'`. Will mention this in the GitHub discussion. – bjfletcher Feb 20 '16 at 23:42

score 3 · Answer 5 · edited Mar 11 '17 at 16:11

3

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>

edited Mar 11 '17 at 16:11

Simon

5,158
8
43
65

answered Aug 23 '16 at 17:08

Tomasz Szuba

441
4
9

1

This solution is incomplete, throws ReferenceError: navigator is not defined – Thomas Modeneis Jan 29 '17 at 10:47
Wrong. `ReferenceError: navigator is not defined` – Green Feb 01 '17 at 16:49
Hi @ThomasModeneis and Green, I think this solution is correct and working too: http://stackoverflow.com/a/43958563/6226738 – Erik Engi May 15 '17 at 12:48
its supposed to be `global.navigator` instead. – Thomas Modeneis Mar 03 '18 at 13:09

score 0 · Answer 6 · answered Jul 17 '16 at 15:59

0

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 !

answered Jul 17 '16 at 15:59

David Noreña

3,951
1
28
43

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

6 Answers6

Linked