使用 browserify-rails、react-rails 和 material-ui 给出 browserify 错误答案

【问题标题】：Using browserify-rails, react-rails and material-ui giving browserify error使用 browserify-rails、react-rails 和 material-ui 给出 browserify 错误
【发布时间】：2018-08-26 23:26:39
【问题描述】：

我在 gemfile 中有以下代码（仅相关）

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

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

好吧，我要做的就是将 react-rails 和 browserify-rails 一起使用。我还包括要与 react 一起使用的 material-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，我必须使用它。

任何建议将不胜感激。

【问题讨论】：

看看stackoverflow.com/questions/33446248/…，显然在项目的根目录下运行npm install。另请参阅此处的陷阱github.com/browserify-rails/…
好吧，没有必要否决这个问题。我确实参考了您提到的来源，但找不到解决方案。这就是为什么我在论坛上发布了一个新问题。找到这些来源并不是一门火箭科学。
我从不投反对票

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

【解决方案1】：

由于某些原因，我无法使其与 browserify 一起使用。正如github 中的 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

【讨论】：