Heroku Rails JS管道问题

Posted 2023-05-08

【中文标题】Heroku Rails JS管道问题

【英文标题】：Heroku Rails JS pipeline issue

【发布时间】：2018-10-07 16:17:52

【问题描述】：

我已经解决这个问题一段时间了，我被卡住了。

我有一个使用 Bootstrap 4 的 rails 4.1.0 应用程序。一切都在本地运行，但是当我推送到我的生产 heroku 服务器时，js 已编译，但页面上的所有 js 都已损坏。

服务器日志中没有错误，但是控制台中有错误：

Uncaught ReferenceError: Popper 未定义 在应用程序-21bd05413e87683d1fbc6420906ba3317d416c1d0b78d17c25e793b78e405352.js:5 (index):85 Uncaught TypeError: $(...).datetimepicker is not a function 在 html 文档。 （（指数）：85） 在 l (application-21bd05413e87683d1fbc6420906ba3317d416c1d0b78d17c25e793b78e405352.js:2) 在 Object.fireWith [as resolveWith] (application-21bd05413e87683d1fbc6420906ba3317d416c1d0b78d17c25e793b78e405352.js:2) 在 Function.ready (application-21bd05413e87683d1fbc6420906ba3317d416c1d0b78d17c25e793b78e405352.js:2) 在 HTMLDocument.a (application-21bd05413e87683d1fbc6420906ba3317d416c1d0b78d17c25e793b78e405352.js:1)

已安装的宝石：

gem 'rails', '4.2.6'
gem 'sqlite3', group: :development
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'puma'
gem 'devise'
gem 'omniauth'
gem 'omniauth-facebook', '~> 4.0.0'
gem 'pg', '~> 0.18.4'
gem 'bootstrap', '~> 4.1.0'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'bootstrap-glyphicons'
gem 'bootstrap-select-rails'
gem 'momentjs-rails', '>= 2.9.0' 
gem 'bootstrap4-datetime-picker-rails'
gem 'client_side_validations'
gem 'validates_timeliness', '~> 4.0' 
source 'https://rails-assets.org' do

  gem 'rails-assets-tether', '>= 1.3.3'

end
group :development, :test do

  gem 'byebug'

end
group :development do

  gem 'web-console', '~> 2.0'
  gem 'spring'
end

application.js：

//=require tether
//=require popper
//=require turbolinks
//=require jquery3
//=require jquery_ujs
//=require bootstrap-sprockets
//=require_tree
//=require moment
//=require tempusdominus-bootstrap-4.js
//=require bootstrap-select
//=require rails.validations
//=require bootstrap/alert
//=require bootstrap/dropdown

大多数有类似问题的人都可以通过更改 application.js 文件中库的顺序来解决它们，但我几乎尝试了所有在 jquery、bootstrap、popper 中移动的组合，但没有任何成功。

我不确定还可以尝试什么。

【问题讨论】：

尝试将require_tree 移动到底部。您想在库加载之后加载您的自定义 JS。

将 require_tree 移到底部没有效果。

你确定吗？我认为这至少可以消除 Uncaught ReferenceError: Popper is not defined 错误，让我们少解决一个问题。

是的，我只是仔细检查了提交并重新部署。仍然得到相同的 2 个控制台错误 :(

【参考方案1】：

我会从 heroku 查看您的部署日志，并确保您的资产正在预编译。此外，您应该使用像 s3 这样的 CDN 来提供这些资产，而不是直接从 Heroku 提供。 例如，我上次部署的示例： Preparing app for Rails asset pipeline Running: rake assets:precompile yarn install v1.6.0 [1/5] Validating package.json... [2/5] Resolving packages... [3/5] Fetching packages... info fsevents@1.1.3: The platform "linux" is incompatible with this module. info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation. [4/5] Linking dependencies... warning "@rails/webpacker > postcss-cssnext@3.1.0" has unmet peer dependency "caniuse-lite@^1.0.30000697". [5/5] Building fresh packages... Done in 19.81s. Webpacker is installed ? ? Using /tmp/build_c920754b3e4f6f8ef59d547c2751d714/config/webpacker.yml file for setting up webpack paths Compiling… Compiled all packs in /tmp/build_c920754b3e4f6f8ef59d547c2751d714/public/packs Asset precompilation completed (27.00s) Cleaning assets Running: rake assets:clean

您还应该能够使用 Web 浏览器检查器来查看它认为 JS 文件应该位于的位置。