安装Bootstrap后出现ActionController::UnknownFormat错误求助

看起来你遇到的问题核心是Rails 6中同时通过yarn和gem安装jQuery导致的依赖冲突，进而让Rails的UJS（Unobtrusive JavaScript）无法正常工作，最终引发了ActionController::UnknownFormat错误。

从控制台日志能看到关键线索：Processing by CommentsController#create as HTML——你的form_with明明设置了local: false（应该发送AJAX的JS请求），但实际发送的是HTML请求，而你的控制器只声明了respond_to :js，所以框架返回406 Not Acceptable错误。

下面是一步步的修复方案：

1. 移除gem版本的jQuery，统一用Webpacker管理 #

Rails 6默认用Webpacker处理前端依赖，同时用gem和yarn装jQuery会导致加载顺序冲突，让UJS找不到正确的jQuery实例。

• 打开Gemfile，删除gem 'jquery-rails'这一行
• 运行终端命令：bundle install

2. 配置Webpacker让jQuery全局可用 #

确保Webpacker能正确提供jQuery给Rails UJS使用：

• 编辑config/webpack/environment.js，添加以下配置：

  const { environment } = require('@rails/webpacker')
  const webpack = require('webpack')
  
  // 全局提供jQuery
  environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery',
      jquery: 'jquery/src/jquery'
    })
  )
  
  module.exports = environment
  

3. 正确引入Bootstrap 5（注意：Bootstrap 5已不再依赖jQuery） #

Bootstrap 5 alpha版本已经移除了jQuery依赖，所以不用再担心两者的兼容问题，直接通过yarn安装并导入：

• 运行终端命令：yarn add bootstrap@5.0.0-alpha1
• 编辑app/javascript/packs/application.js，添加Bootstrap的导入：

  // 导入Bootstrap JS和CSS
  import 'bootstrap'
  import 'bootstrap/dist/css/bootstrap.min.css'
  

4. 优化控制器的响应逻辑（可选但更健壮） #

把单一的respond_to :js改成更灵活的响应块，作为AJAX失败时的降级方案：

def create
  @book = Book.find(params[:book_id])
  @comment = @book.comments.create(comment_params)
  
  respond_to do |format|
    format.js # 处理AJAX请求
    format.html { redirect_to @book, notice: 'Comment was successfully created.' } # 降级到HTML跳转
  end
end

为什么会出现这个错误？ #

当你同时安装了gem和yarn版本的jQuery后，前端加载时会出现多个jQuery实例，导致Rails UJS（负责让form_with发送AJAX请求的核心脚本）无法正确绑定到表单上。原本应该发送Accept: text/javascript请求头的AJAX表单，最终发送了普通的HTML请求，而你的控制器只处理JS格式，因此抛出了UnknownFormat错误。

修复完以上步骤后，重启Rails服务器和webpack-dev-server，再测试评论创建功能应该就能正常工作了。

内容的提问来源于stack exchange，提问作者Ulaş Kılıçaslan