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

【问题标题】：404 errors on javascript when using importmaps in Rails 7 in production在生产环境中使用 Rails 7 中的 importmaps 时出现 404 错误
【发布时间】：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 安装。

标签： ruby-on-rails import-maps ruby-on-rails-7

【解决方案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

【讨论】：