时间戳

首页 > 解决方案 > Heroku Rails JS管道问题

javascript - Heroku Rails JS管道问题

问题描述

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

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

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

Uncaught ReferenceError: Popper is not defined at application-21bd05413e87683d1fbc6420906ba3317d416c1d0b78d17c25e793b78e405352.js:5 (index):85 Uncaught TypeError: $(...).datetimepicker is not a function at HTMLDocument。((index):85) at l (application-21bd05413e87683d1fbc6420906ba3317d416c1d0b78d17c25e793b78e405352.js:2) at Object.fireWith [as resolveWith] (application-21bd05413e87683d1fbc6420906ba3317d416c1d0b78d17c25e793b78e405352.js:2) at Function.ready (application-21bd05413e87683d1fbc6420906ba3317d416c1d0b78d17c25e793b78e405352.js:2) at HTMLDocument .a（应用程序-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

应用程序.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 中移动的组合，但没有任何成功。

我不确定还能尝试什么。

标签： javascriptjqueryruby-on-railstwitter-bootstrapheroku

解决方案

我会从 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 文件应该位于的位置。

推荐阅读