在生产环境中使用 Rails 7 中的 importmaps 时出现 404 错误

Posted 2023-02-15

【中文标题】在生产环境中使用 Rails 7 中的 importmaps 时出现 404 错误

【英文标题】：404 errors on javascript when using importmaps in Rails 7 in production

【发布时间】：2021-12-13 21:11:32

【问题描述】：

我不确定这是 importmaps 问题还是其他问题，但在 Rails 7.0.0.alpha2 中，javascript 文件出现 404 错误。

想知道我是否缺少某种生产“编译”步骤，因为它在开发中运行良好。

# app/javascript/application.js
import "@hotwired/turbo-rails"
import "controllers"


# app/javascript/controllers/index.js
import  application  from "./application"

import VoteController from "./vote_controller.js"
application.register("vote", VoteController)


# app/javascript/controllers/vote_controller.js
import  Controller  from "@hotwired/stimulus"

// Connects to data-controller="vote"
export default class extends Controller 
  static targets = ["element"];

  toggle(event) 
    //event.preventDefault();
    event.target.classList.add("opacity-100");
    event.target.classList.remove("opacity-0");
  



# config/importmap.rb
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.js"
pin "@hotwired/stimulus", to: "stimulus.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"

然后在我的app/views/layouts/application.html.erb 文件中，我使用<%= javascript_importmap_tags %> 来包含所有内容。

如果我在production.rb 中设置config.assets.compile = true，错误就会消失……但我不确定为什么或者这是否解决了核心问题。

【问题讨论】：

除了生产环境中的 config.assets.compile = true 之外，您还能找到其他解决方案吗？我从 Rails 7.0.0.alpha2 应用程序中遇到了这个问题。我升级到 7.0.0.rc1，但在 Heroku 的 prod 中仍然存在问题。

@ianneub 不幸的是没有。 :(

同样的问题，同样的“解决方案”。全新的 Rails RC1 安装。

【参考方案1】：

如果您使用的是Rails 7.0.0+（稳定版），您不再需要运行rails stimulus:manifest:update（使用导入地图时) 也不需要单独导入每个控制器。

因此，将 app/javascript/controllers/index.js 中的所有内容替换为以下内容：

// Import and register all your controllers from the importmap under controllers/*

import  application  from "controllers/application"

// Eager load all controllers defined in the import map under controllers/**/*_controller
import  eagerLoadControllersFrom  from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
// import  lazyLoadControllersFrom  from "@hotwired/stimulus-loading"
// lazyLoadControllersFrom("controllers", application)

以上代码复制自https://github.com/hotwired/stimulus-rails/blob/main/lib/install/app/javascript/controllers/index_for_importmap.js。

【参考方案2】：

在 Rails 7.0.0 中，app/javascript/controllers/index.js 已被修改。我找到了几种不同的方法来解决这个问题。

首先尝试将您的import application 行更改为从controllers/application 导入，如下所示：

import  application  from "controllers/application"

然后将每个特定控制器导入的from 参数修改为："controllers/name_controller"。

---

可选：

删除每个控制器的单独导入并使用：

// Eager load all controllers defined in the import map under controllers/**/*_controller
import  eagerLoadControllersFrom  from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)

或者这个：

// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
import  lazyLoadControllersFrom  from "@hotwired/stimulus-loading"
lazyLoadControllersFrom("controllers", application)

---

这似乎已经为我解决了。奇怪的是，rails stimulus:manifest:update 命令会将其替换为不起作用的旧样式。

有关根本原因的更多信息和讨论： https://github.com/hotwired/stimulus-rails/issues/87