无法在 Rails 7 中使用导入映射导入自定义 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错误:

Uncaught TypeError: Failed to resolve module specifier " coms/vue_components"相对引用必须以"/"、"/"或"…/"开头。

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

import "./comps/vue_components"

但是它只是无声地失败了。它看起来就像完全扼杀了javascript的执行——如果我在application.js中放入一个console.log语句，只有当我省略或注释掉导入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"

使用相对导入。预编译。我有一个更详细的答案:

https://stackoverflow.com/a/72855705/207090

---

你应该把你的ruby升级到最新版本。不要从2.7.2开始任何新的东西。