Ruby on Rails 错误：TypeError: $(...).tooltip is not a function

当你的 Rails 6 应用程序运行时，你可能会遇到这样的 JavaScript 错误消息：TypeError: $(...).tooltip is not a function。这通常是由于 jQuery 中的 .tooltip() 方法未被正确加载所导致的。这篇文章将介绍如何解决这个问题。

错误原因

在 Rails 6 中，jQuery 和 Popper.js 不再作为默认依赖项包括在 application.js 文件中。这是在改善 Webpack 包管理器功能的同时进行的决策。这意味着在使用 jQuery 插件之前，你需要明确引入这些库，否则会出现 TypeError: $(...).tooltip is not a function 的报错。

解决方案

在你的应用程序中安装 jQuery 和 Popper.js，并引入 bootstrap 包。一种简单的方法是使用 yarn add 安装这些依赖项。在你的终端中执行以下命令：

yarn add jquery popper.js bootstrap

现在，编辑 app/javascript/packs/application.js 文件，并添加以下内容：

import 'bootstrap';
import './stylesheets/application.scss';

这将使用 Webpack 打包 bootstrap 和你的 SASS 样式，然后通过 Webpack 包管理器对它们进行优化。但是，你仍然需要在你的 HTML 模板（如 app/views/layouts/application.html.erb）中添加 Bootstrap 依赖项。这可以通过添加以下内容来完成：

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

这将引入 JavaScript 包 application.js，其中包含你的 bootstrap 依赖项。data-turbolinks-track 属性可确保 Turbolinks 库正确处理页面加载。

测试解决方案

现在，重新启动你的 Rails 6 应用程序，并刷新你的浏览器。现在，你的 $(...).tooltip() 方法应该可以在没有错误消息的情况下正常工作了。

结论

当你的 Rails 6 应用程序在运行时遇到 JavaScript 错误 TypeError: $(...).tooltip is not a function 时，这通常是因为缺少 jQuery 和/或 Popper.js 以及 bootstrap 依赖项的引入所导致的。通过安装这些依赖项，并使用 Webpack 对它们进行打包优化，你可以消除这个问题并恢复你的浏览器中的应用程序的正常功能。