React Starter Kit and Material UI: userAgent must be provided in the muiTheme context for server rendering

Question

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

npm install material-ui --save 

and the following import for the component:

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

and

 <RaisedButton label="Default" /> 

I get the following error:

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

According to the Material UI documentation , it says that I will need to solve three things:

• autoprefixer and user agent
• process.env.NODE_ENV

What code should be entered and where exactly, in particular, using a set of reagents for beginners?

PS this solution does not work for me: - /

Answer 1

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

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

Then, make sure you see a few vendor prefixes used as in this screengrab showing -webkit and -ms both:

Answer 2

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

as you saw on the MaterialUI Documentation page

You need to provide the same user agent for both the server context and the browser, as you saw in the documentation, but I highly recommend that you provide the “all” user agent as you will be serving a lot of unnecessary code to the end user.

Instead, you can easily follow the MaterialUI document and pass the user agent value contained in the http headers.

With express or koa server

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

I just checked it was added in ReactStarterKit (did not check itself) in src/server.js

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

Answer 3

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

Answer 4

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

Answer 5

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

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

Example (from my test application):

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

Answer 6

If you are using a KoaJS server, you must install koa-useragent and then use it before rendering on the server side:

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

It worked for me!