当我try 在rails 7.1.3中配置action Text编辑器来处理嵌入的YouTube视频时,我遇到了一个问题.

目前运行的是rails 7.1.3、ruby 3.2.0,并使用了导入映射.

)遵循克里斯·奥利弗的优秀榜样https://www.youtube.com/watch?v=2iGBuLQ3S0c 这里有一份书面指南-https://dev.to/superails/ruby-on-rails-embed-youtube-videos-with-actiontext-tldr-3m35)

我收到这个错误-unauCaptSynaxError:请求的模块‘trix’没有提供名为‘Default’的导出(在youtube.js:1:8) 这个错误是可以理解的,但我不知道如何修复它.

在我的youtube.js文件中,我像这样导入Trix.

import Trix from "trix"
import Rails from "@rails/ujs" 

let lang = Trix.config.lang;
Trix.config.toolbar = {
  getDefaultHTML: function() {
    return `
    <div class="trix-button-row">
.....

我试着把它改成

import * as Trix from "trix"

当我查看trix.js时,我确实看到了一个导出:

export{Wn as default};

我的portmap.rb如下所示:

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 "@rails/actiontext", to: "actiontext.esm.js"
pin "@rails/ujs", to: "@rails--ujs.js" # @7.1.3
pin "trix" # @2.0.10

以前有没有人遇到过这个问题?或许找到了解决方案?

推荐答案

pin "trix"链接到一个没有任何导出的UMD版本,它只公开Trix globally.这意味着你只需要import "trix"号就可以了.此版本也适用于普通链轮:

100

On the other hand, ESM build has a default export:
https://cdn.jsdelivr.net/npm/trix@2.0.10/dist/trix.esm.js


>> Rails.application.assets.find_asset("trix").filename
=> "/home/alex/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/actiontext-7.1.3/app/assets/javascripts/trix.js"

如果您已将trix单独固定到您的供应商目录(将是ESM版本),则不会有任何变化,因为供应商一直位于assets资源 路径的末尾:

>> Rails.application.assets.paths
=> 
["/home/alex/code/stackoverflow/app/assets/builds",
 "/home/alex/code/stackoverflow/app/assets/config",
...
 "/home/alex/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/actiontext-7.1.3/app/assets/javascripts",
...
 "/home/alex/code/stackoverflow/vendor/javascript"]  # <= gets searched last

这是我能想到的最好的解决顺序的办法:

# config/initializers/assets.rb

Rails.application.config.after_initialize do |app|
  # https://github.com/rails/sprockets/blob/v4.2.1/lib/sprockets/paths.rb#L37
  app.assets.prepend_path Rails.root.join("vendor/javascript")
end
>> Rails.application.assets.find_asset("trix").filename
=> "/home/alex/code/stackoverflow/vendor/javascript/trix.js"

将pin更改为jspm url也可以解决这个问题,但是url pin在importmap-rails v2中不再是默认的,所以这是一个手动复制粘贴操作:

# config/importmap.rb

pin "trix", to: "https://ga.jspm.io/npm:trix@2.0.10/dist/trix.esm.min.js"

Ruby-on-rails相关问答推荐

错误正在被ViewComponent、Ruby on Rails中吞噬

在has_many关系中由两个条件 Select

插件和 Ruby gem 之间的区别?

Rails 3 的data-method='delete'如何优雅地降级?

未初始化的常量 ActionDispatch::Session::EncryptedCookieStore (NameError)

rails 3 - link_to 销毁不工作

使用回形针进行简单裁剪

用 url_for 查询参数?

没有图像时如何在回形针中显示隐藏图像

如何在 routes.rb 中使用 301 或 302 进行重定向

是否有与 PHP 的 isset() 等效的 Rails?

Rails 文章助手 - a 或 an

如何获取包含表的列名的数组

Rails:从视图内渲染视图(不是部分视图)

Rails:将所有未知路由重定向到 root_url

我收到在扫描下一个令牌时发现无法启动任何令牌的字符

Rails:进行不可逆转的迁移是不是很糟糕?

Heroku - 在浏览器中显示当前提交的哈希

如何在rails中正确使用单选按钮?

从 Rails 控制器获取主机名