Rails 7 インポート マップでパッケージが見つかりませんでした
概要
こんにちは、私はここで Rails の世界に来たのは初めてです。importmap で遊んでいて、この方法で Monako エディタをインストールしようとしています。
./bin/importmap pin monaco-editor
しかし、jspmの[“monaco-editor”]にパッケージが見つかりませんでした
この方法も試しましたが、やはりエラーが発生しました
./bin/importmap pin monaco-editor --from unpkg
私のプロジェクトに monaco-editor をインポートする方法について何かアイデアはありますか?
解決策
CLI を使用する代わりに、次の行を config/importmap.rb に手動で追加します。
pin 'monaco-editor', to: 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
スティミュラスを使用している場合は、次のように単純なモナコエディタを起動して実行できます。
import { Controller } from "@hotwired/stimulus"
import * as monaco from 'monaco-editor'
export default class extends Controller {
connect() {
monaco.editor.create(this.element)
}
}
importmaps は、ブラウザがバンドラーを必要とせずに直接解釈できる純粋な esm モジュールに依存しています。ただし、monaco-editor プロジェクトはインポート ‘./actionbar.css’ を使用しています。 ESM ディストリビューションの構文。これはまだ JavaScript 標準に含まれていないため、現在その構文をサポートしているブラウザはありません (少なくとも 2023 年には WICG の提案とウェブキットの更新情報を確認してください)。したがって、基礎となる API がこれらの行を読み取るときに JavaScript エラーを受け取るため、importmaps コマンドも失敗します。私は個人的に次のエラーを受け取りました。
{"error":"Error: \n \tfont-display: block;\n> \tsrc: url(./codicon.ttf) format(\"truetype\");\n ^\n }\n\nError parsing https://ga.jspm.io/npm:[email protected]/esm/vs/base/browser/ui/codicons/codicon/codicon.css:9:45"}
{"error":"Error: Module not found: https://cdn.jsdelivr.net/npm/[email protected]/esm/vs/basic-languages/monaco.contribution imported from https://cdn.jsdelivr.net/npm/[email protected]/esm/vs/editor/editor.main.js"}
ここでまだエラーがスローされるかどうかを自分で確認することもできます。おそらくいつか JavaScript 標準が拡張されるか、マイクロソフトが npm パッケージをそのままブラウザに準拠するように調整するでしょう。
@steventrouble は、動作する ESM モジュールを指す cdn URL を含む次のコード スニペットを投稿しました。
<script type="module">
import * as monaco from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
monaco.editor.create(document.querySelector('.monaco'));
</script>
<div class="monaco" style="min-height: 100px"></div>
悲しいことに、+esm cdn リンクは依然として Microsoft 独自のフォントをロードしようとする CSS を提供します。そのため、ブラウザコンソールに次のエラーが表示されます。
GET http://localhost:3000/codicon.ttf net::ERR_ABORTED 404 (Not Found)
そして、Railsコンソールにはこれが表示されます
ActionController::RoutingError (No route matches [GET] "/codicon.ttf"):
それはあまり良くありません。しかし、エディターは依然として正常に動作し、フォントも私には良いように見えます。しかしとにかく、私はその問題を取り除くための醜いハックを思いつきました。これは、config/routes.rb ファイルに次の行を追加することになります。
get 'codicon.ttf', to: redirect('https://cdn.jsdelivr.net/npm/[email protected]/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf')