我在 Heroku 服务器日志中收到的错误是这样的:
ActionController::RoutingError (No route matches [GET] "/assets/modules/seat_builder.js")
我导入到
seating_controller.js
的每个模块都会弹出此错误。
模块名称
我正在使用 Rails 7 和 StimulusJS。我有一个
seating_controller.js
正在从 app/javascript/modules
目录(该目录是我创建的)中的模块目录导入模块。您可以在下面找到与我的问题相关的代码片段:
我相信这就是我的问题,这就是我的
manifest.js
文件现在的样子,但我也尝试在此处导入模块,但这没有任何帮助...
// app/assets/config/manifest.js
//= link_tree ../images
//= link_tree ../../javascript .js
//= link_directory ../stylesheets .css
//= link_tree ../../../vendor/javascript .js
这就是我的
application.js
文件的样子:
// app/javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import "@rails/actioncable"
这就是我的
importmap.rb
文件的样子。我正在从模块目录导入模块。仔细检查路径,它们应该是正确的......
# config/importmap.rb
# frozen_string_literal: true
# Pin npm packages by running ./bin/importmap
pin 'application'
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js'
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
pin_all_from 'app/javascript/controllers', under: 'controllers'
pin_all_from 'app/javascript/modules', under: 'modules'
pin_all_from 'app/javascript/modules/theaters', under: 'modules/theaters'
pin '@rails/actioncable', to: '@rails--actioncable.js' # @7.1.3
pin '@rails/actioncable', to: 'actioncable.esm.js'
pin_all_from 'app/javascript/channels', under: 'channels'
最后这是我的
seating_controller.js
。为了简单起见,我仅显示导入路径,因为实际代码似乎没有任何问题......
// app/javascript/controllers/seating_controller.js
import { Controller } from "@hotwired/stimulus";
import SeatBuilder from "../modules/seat_builder.js";
import SeatEditor from "../modules/seat_editor.js";
import SeatReservation from "../modules/reservation.js";
import Contingent from "../modules/contingent.js";
import DiscountInputBuilder from "../modules/discount_input_builder.js";
// Connects to data-controller="seating"
export default class extends Controller {
// Rest of the code here
}
我还将其他剧院模块导入到
seat_builder.js
模块中:
// app/javascript/modules/seat_builder.js
import DivadloBroadway from "./theaters/divadlo_broadway.js";
import ObecniDum from "./theaters/obecni_dum.js";
import KostelSvatehoMartinaVeZdi from "./theaters/kostel_svateho_martina_ve_zdi.js";
export default class SeatBuilder {
// Rest of the code here
}
这个想法是通过使用一个控制器来处理与座位相关的所有事情,但以模块的形式添加混合,从而将问题分开。这似乎证明自己在开发中很有用,但生产却并不愉快……我一直因为这个错误而用头撞墙。对我来说,资产的路径似乎总是相对于
manifest.js
文件。因为我在控制器中使用的 ../modules/file_name.js
路径,如果在清单文件中使用,将导致 assets/modules/file_name.js
但我不确定从这里开始......还值得注意的是,一切都在开发中.
我希望这是有道理的,提前感谢您的时间和耐心!
所以问题出在
importmap.rb
以及我导入文件的方式。
这是更正后的代码
# importmap.rb
# frozen_string_literal: true
# Pin npm packages by running ./bin/importmap
pin 'application'
pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
pin '@hotwired/stimulus', to: 'stimulus.min.js'
pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
pin_all_from 'app/javascript/controllers', under: 'controllers'
pin_all_from 'app/javascript/modules', under: 'modules', to: 'modules'
pin_all_from 'app/javascript/modules/theater', under: 'modules/theater', to: 'modules/theater'
pin '@rails/actioncable', to: '@rails--actioncable.js' # @7.1.3
pin '@rails/actioncable', to: 'actioncable.esm.js'
pin_all_from 'app/javascript/channels', under: 'channels', to: 'channels'
// seating_controller.js
import { Controller } from "@hotwired/stimulus";
import SeatBuilder from "modules/seat_builder";
import SeatEditor from "modules/seat_editor";
import SeatReservation from "modules/reservation";
import Contingent from "modules/contingent";
import DiscountInputBuilder from "modules/discount_input_builder";
感谢所有花时间发表评论的人!