Not work with material-ui library

[cuongcua90]

It works great but when I install material-ui and require it. I got this errors:

ERROR in ./~/material-ui/src/js/toolbar-group.jsx Module parse failed: /Users/cuongcua/Learn/Reactjs/react-hot-boilerplate/node_modules/material-ui/src/js/toolbar-group.jsx Line 22: Unexpected token < You may need an appropriate loader to handle this file type.

Can you tell me the solution?

[gaearon]

It seems that material-ui exports jsx files and expects consumers to transform them:

https://github.com/callemall/material-ui/issues/301 https://github.com/callemall/material-ui/issues/289 https://github.com/callemall/material-ui/issues/179

Personally I don't think it's the right way, but no use complaining. :-)

Change loader configuration in webpack.config.js to include jsx loader separately for material-ui:

      { test: /\.js$/, loaders: ['react-hot', 'jsx?harmony'], exclude: /node_modules/ },
      { test: /\.jsx?$/, loader: 'jsx?harmony', include: /material-ui/ },

I think this should work.

[cuongcua90]

Thanks @gaearon. It works now.

[vasanthk]

@gaearon I ran into the same issue while trying to publish a module. What is a good practice when trying to publish react modules to npm. Bundle it with react and other dependencies and point package.json main to the bundled file? Any pointers on this would be helpful.

[gaearon]

@vasanthk This is better asked on StackOverflow than here. Use Babel to compile your component to plain JS, and point main in package.json to the compiled version. Don't “bundle” it with React—keep it a peerDependency and expect user to provide it. In the source, import it as if it was there.

[vasanthk]

Thanks Dan, that definitely helps. I'll post it in stackoverflow as well.