使用browserify-rails,react-rails和material-ui给出browserify错误

时间:2018-03-18 07:15:38

标签: ruby-on-rails reactjs material-ui

我在gemfile中有以下代码(仅相关)

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

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

好吧,我所要做的就是将react-rails和browserify-rails一起使用。我还包括材料-ui用于反应,但是一旦我在代码中的任何地方使用require,我就会遇到这个错误。

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)

尝试运行tmp:clear,asset:clean等,但没有成功。

我想做的就是使用material-ui并在我的rails应用程序中做出反应。我没有任何这样的要求使用browserify-rail但是如果我想使用material-ui,我必须在某处阅读。

任何建议都将受到赞赏。

1 个答案:

答案 0 :(得分:0)

由于某些原因,我无法使用browserify。如[{3}}中的react-rails文档中所述,必须使用 webpacker 。我正在做的另一个错误是没有将material-ui组件包装在 MuiThemeProvider 标签中。工作代码如下:

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