使用browserify-rails、react-rails和material-ui时出现Browserify错误

我来一步步帮你排查解决这个常见的配置冲突问题：

1. 替换rails-assets源为npm依赖（更可靠） #

rails-assets这个源已经停止维护很久了，用它引入material-ui很容易出现依赖处理问题，建议直接切换到npm管理前端依赖：

• 先把Gemfile里这段代码删掉：

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

然后运行 bundle install 更新Gemfile依赖。

• 安装必要的npm依赖：

npm install --save react react-dom @material-ui/core @babel/core @babel/preset-env @babel/preset-react babelify browserify

（如果用的是旧版material-ui，把@material-ui/core换成material-ui即可）

2. 配置browserify-rails的Babel转换 #

material-ui和React组件需要Babel转译JSX和ES6+语法，给browserify-rails添加转换配置：
在config/application.rb里加入以下内容：

module YourAppName
  class Application < Rails::Application
    # ...其他已有配置

    # 让browserify使用babelify处理JSX和ES6语法
    config.browserify_rails.commandline_options = "-t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ]"
    
    # 可选：指定只处理React相关文件，避免和sprockets的默认编译冲突
    config.browserify_rails.force = ->(file) { 
      file.extname == '.jsx' || (file.extname == '.js' && file.path.include?('app/assets/javascripts/react')) 
    }
  end
end

3. 让react-rails配合browserify工作 #

默认react-rails用sprockets处理JSX，我们需要调整它改用browserify编译：
新建或修改config/initializers/react.rb，加入：

ReactRailsUjs.use_browserify = true

4. 清理缓存并重启服务 #

运行以下命令清理旧的编译缓存，避免干扰：

rails tmp:clear

然后重启你的Rails服务器。

5. 正确引入material-ui组件 #

现在你可以在React组件里正常使用require或import了，比如：

// app/assets/javascripts/react/components/MyButton.jsx
const React = require('react');
const Button = require('@material-ui/core/Button');

class MyButton extends React.Component {
  render() {
    return (
      <Button variant="contained" color="primary">
        点击测试
      </Button>
    );
  }
}

export default MyButton;

额外排查点 #

如果还是报错，仔细看完整的BrowserifyError日志，通常能找到具体原因：

• 是否漏装了某个npm依赖？比如react-dom很容易被忽略
• browserify版本和browserify-rails是否兼容？可以查看browserify-rails的官方文档确认适配版本
• 组件里有没有语法错误？比如JSX标签未闭合、ES6语法未被正确转译

内容的提问来源于stack exchange，提问作者VPaul