Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Solving an Error in ReactJS/Material-UI

DZone's Guide to

Solving an Error in ReactJS/Material-UI

This is an important error to look out for. Luckily, it's pretty easy to resolve — it stems from an easily made mistake.

· Performance Zone
Free Resource

Discover 50 of the latest mobile performance statistics with the Ultimate Guide to Digital Experience Monitoring, brought to you in partnership with Catchpoint.

I’ve been playing around with ReactJS and the Material-UI library and I recently ran into this error while trying to follow one of the examples from the demo application:

ERROR in ./src/app/modules/Foo.js
Module not found: Error: Cannot resolve module 'material-ui/lib/Subheader' in /Users/markneedham/neo/reactjs-test/src/app/modules
 @ ./src/app/modules/Foo.js 13:17-53
webpack: Failed to compile.

This was the component code:

import React from 'react'
import Subheader from 'material-ui/lib/Subheader'
 
export default React.createClass({
  render() {
    return <div>
    <Subheader>Some Text</Subheader>
    </div>
  }
})

That code is then rendered like this:

import Foo from './modules/Foo' render(Foo, document.getElementById("app"))

I came across this post on Stack Overflow that seemed to describe a similar issue. It led me to realize that I was actually on the wrong version of the documentation. I’m using version 0.16.7 but the demo I copied from is for version 0.15.0-alpha.1!

This is the component code that we actually want:

import React from 'react'
import Subheader from 'material-ui/Subheader'
 
export default React.createClass({
  render() {
    return <div>
    <Subheader>Some Text</Subheader>
    </div>
  }
})

And that’s all I had to change. There are several other components that you’ll see the same error for. It looks like the change was made between the 0.14.x and 0.15.x series of the library.

Is your APM strategy broken? This ebook explores the latest in Gartner research to help you learn how to close the end-user experience gap in APM, brought to you in partnership with Catchpoint.

Topics:
reactjs ,material ui ,performance ,error handling

Published at DZone with permission of Mark Needham, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}