Using browserify-rails, react-rails and material-ui giving browserify error

Question

I have the following code (only relevant) in gemfile

gem 'react-rails'
gem "browserify-rails"

source 'https://rails-assets.org' do
  gem 'rails-assets-material-ui'
end

Well, all I'm trying to do is to use react-rails and browserify-rails together. I'm also including material-ui to be used with react but as soon as I use require anywhere in my code, I run into this error.

rails aborted!
BrowserifyRails::BrowserifyError: Error while running `/home/vinni/projects/doonites/node_modules/.bin/browserifyinc --list --cachefile=/home/vinni/projects/doonites/tmp/cache/browserify-rails/browserifyinc-cache.json -o "/home/vinni/projects/doonites/tmp/cache/browserify-rails/output20180318-7434-3itjqt" -`:

module.js:328
    throw err;
    ^

Error: Cannot find module '../'
    at Function.Module._resolveFilename (module.js:326:15)
    at Function.Module._load (module.js:277:25)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/home/vinni/projects/doonites/node_modules/.bin/browserifyinc:3:29)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Function.Module.runMain (module.js:442:10)

Tried running tmp:clear, asset:clean, etc but no success.

All I want to do is to use material-ui and react in my rails app. I don't have any such requirement to use browserify-rail but I read somewhere I have to use it if I want to use material-ui.

Any suggestion will be appreciated.

take a look at https://stackoverflow.com/questions/33446248/using-material-ui-with-react-rails-gem and obviously run `npm install` in root of your project. Also see gotchas here https://github.com/browserify-rails/browserify-rails#gotchas-with-require-and-moduleexports — lacostenycoder, Mar 18 '18 at 10:51
Well, there was not need to downvote the question. I did refer to the sources mentioned by you but couldn't find the solution. That's why I posted a new question on the forum. It wasn't a rocket science to find these sources. — VPaul, Mar 20 '18 at 06:43

score 0 · Accepted Answer · answered Mar 20 '18 at 06:30

For some reasons, I could not make it work with browserify. Had to go with webpacker as mentioned in react-rails docs in github. Another mistake, I was doing was not wrapping the material-ui component in MuiThemeProvider tag. The working code is as under:

import React from "react";
import PropTypes from "prop-types";
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import RaisedButton from 'material-ui/RaisedButton';
import DatePicker from 'material-ui/DatePicker';

class Post extends React.Component {
  render () {
    return (
        <MuiThemeProvider muiTheme={getMuiTheme()}>
            <DatePicker hintText="Portrait Dialog" />
            <RaisedButton label="Click Me" primary={true} />
        </MuiThemeProvider>
    );
  }
}

Post.propTypes = {
  title: PropTypes.string
};
export default Post

Using browserify-rails, react-rails and material-ui giving browserify error

1 Answers1