Необработанная синтаксическая ошибка: запрошенный модуль «trix» не предоставляет экспорт с именем «default» (в youtube.js:1:8) в рельсах 7.1 при попытке редактирования trix

В настоящее время я сталкиваюсь с проблемой, когда пытаюсь настроить редактор текста действий в рельсах 7.1.3 для обработки встроенных видео YouTube.

В настоящее время работают рельсы 7.1.3, Ruby 3.2.0 и используются карты импорта.

(По превосходному примеру Криса Оливера https://thewikihow.com/video_2iGBuLQ3S0c Письменное руководство есть здесь - https://dev.to/superails/ruby-on-rails-embed-youtube-videos-with-actiontext-tldr-3m35)

Я получаю эту ошибку: Uncaught SyntaxError: запрошенный модуль «trix» не обеспечивает экспорт с именем «default» (в youtube.js:1:8). Ошибка понятна, но как ее исправить я не знаю.

В моем файле youtube.js я импортирую трикс вот так.

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};

Мой файл importmap.rb выглядит так:

Закрепите пакеты npm, запустив ./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

Кто-нибудь сталкивался с этой проблемой раньше? А может быть, нашли решение?

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
143
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

pin "trix" ссылки на сборку UMD, которая не имеет экспорта, а только предоставляет Trix глобально. Это значит, что import "trix" — это все, что вам нужно. Эта сборка также предназначена для работы с простыми звездочками:

https://github.com/rails/rails/blob/main/actiontext/app/assets/javascripts/trix.js

С другой стороны, сборка ESM имеет экспорт по умолчанию:
https://cdn.jsdelivr.net/npm/[email protected]/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), это ничего не изменит, потому что поставщик находится в конце путей к ресурсам:

>> 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-кода на URL-адрес jspm также может исправить это, однако PIN-коды URL-адреса больше не используются по умолчанию в importmap-rails v2, поэтому это операция копирования и вставки вручную:

# config/importmap.rb

pin "trix", to: "https://ga.jspm.io/npm:[email protected]/dist/trix.esm.min.js"

Большое спасибо за ваш ответ! Кажется, я изо всех сил пытаюсь понять, как лучше всего расширить или отредактировать функциональность actiontext/trix? Я пытаюсь добавить возможность встраивания YouTube, но, думаю, мне нужно импортировать trix.js в файл javascript, а затем отредактировать или расширить его? Или я использую здесь неправильный подход?

Charli Bregnballe 24.02.2024 10:01

да, import "trix"; тогда у вас будет глобальный Trix, который вы сможете изменить. последний раз, когда я проверял, это был единственный подход.

Alex 24.02.2024 14:59

Спасибо! Я не уверен, как изменить его в файле js, если Trix недоступен. ``` import "trix" import Rails from "@rails/ujs" let lang = Trix.config.lang; Trix.config.toolbar = { getDefaultHTML: function() { return ` <div class = "trix-button-row"> <span class = "trix-button-group trix-button-group--text-tools" data- trix-button-group = "text-tools"> ..... ``` Панель инструментов Trix.config.toolbar недоступна, когда я просто импортирую "trix";

Charli Bregnballe 24.02.2024 15:21

вы имеете в виду, что ваш редактор говорит вам, что это недоступно? это глобальная константа, поэтому она доступна везде. У меня отлично работает со сборками umd или esm. вы также можете: pin "trix", to: "https://ga.jspm.io/npm:[email protected]/dist/trix.esm.min.js" использовать import Trix from "trix"

Alex 24.02.2024 15:40

Ах, теперь я понял. Спасибо! :) Это работает, когда я прикрепляю его к ga.jspm.io... Однако я получаю новую ошибку: Uncaught TypeError: невозможно назначить свойство «панель инструментов» только для чтения объекта «[object Object]»

Charli Bregnballe 24.02.2024 16:30

попробуй Trix.config.toolbar.getDefaultHTML = function () {

Alex 24.02.2024 17:24

Другие вопросы по теме