无法在 Rails 7 中使用 importmaps 导入自定义 JavaScript 文件

Question

我正在尝试了解 Rails 7 并导入地图，并且正在关注 DHH 的本教程： https://www.youtube.com/watch?v =PtxZvFnL2i0

该视频已有大约一年的历史，基于 Rails 7 的 alpha 版本，但它在一定程度上是有效的。现在我正在努力弄清楚什么改变了或者什么需要改变。

我一直跟踪到 17:18，他将 Vue.js 添加到演示中。这是他第一次向应用程序添加自定义的 JS 文件，而不是导入库。在本教程中，他将以下行添加到 application.js 中：

import "comps/vue_components"

该行在我的实现中失败，并出现以下 JS 错误：

未捕获的类型错误：无法解析模块说明符“comps/vue_components”。相对引用必须以“/”、“./”或“../”开头。

我尝试将该行更新为以下内容来解决该错误：

import "./comps/vue_components"

但这只是默默地失败了。看起来它完全杀死了 javascript 的执行 - 如果我将 console.log 语句放入 application.js 中，只有当我省略或注释掉导入 vue 组件的行时，它才会在控制台中显示。

这是我的 config/importmap.rb 文件：

# Pin npm packages by running ./bin/importmap

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

pin "trix"
pin "@rails/actiontext", to: "actiontext.js"

pin "md5", to: "https://cdn.skypack.dev/md5"

pin "vue", to: "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js"

pin_all_from "app/javascript/components", under: "comps"

这是我的 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 "trix"
import "@rails/actiontext"
import "./comps/vue_components"
console.log('hello')

git 项目位于此处： https: //github.com/fredwillmore/showntell

Answer 1

该视频不是教程，“alpha 预览”就是标题中所说的内容。你应该找到一些最新的东西，从那时起发生了很多变化。但要解决您的问题，请执行以下操作：

pin_all_from "app/javascript/components", under: "comps", to: "components"

不要使用相对导入。不要预编译。我对此有更详细的回答：

/sf/answers/5099899381/

您应该将 ruby​​ 升级到最新版本。不要用 开始任何新的事情2.7.2。