問題の概要
Discourse プラグインを開発しており、モーダルフォームを開くためのツールバーボタンを追加しようとしています。公式の DModal API Migration ガイドをステップバイステップで実行しましたが、モジュールのインポートエラーと「modal needs updating」という警告が引き続き表示されます。何が不足しているのか、ガイダンスが必要です。
簡単な注意: プログラミングの方法がわかりません。このプラグインは完全に AI の助けを借りて作成されました。
現在のエラー
エラー 1 - モジュールのインポート:
Uncaught (in promise) Error: Could not find module `discourse/components/modal/lottery-form-modal` imported from `discourse/plugins/discourse-lottery-v3/discourse/initializers/lottery-toolbar`
エラー 2 - レガシーモーダル警告:
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.
エラー 3 - 非推奨通知:
Deprecation notice: Defining modals using a controller is no longer supported. Use the component-based API instead. (modal: lottery-form) [deprecated since Discourse 3.1] [removal in Discourse 3.2]
参照した公式ドキュメント
以下の公式リソースを注意深く調査し、実装しました。
-
Converting modals from legacy controllers to new DModal component API
- URL:
https://meta.discourse.org/t/268057 - 4 つのステップすべてを実行しました: ファイルを
/components/modal/に移動、JS を Component を拡張するように更新、テンプレートを\u003cDModal\u003eを使用するように更新、show 呼び出しをmodal.show()を使用するように更新しました。
- URL:
-
Using the DModal API to render Modal windows
- URL:
https://meta.discourse.org/t/268304 @closeModal、@title、および名前付きブロックを適切に使用して DModal を実装しました。
- URL:
-
Discourse Core Plugin API
- ソース:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs api.onToolbarCreate()とモーダルサービスインジェクションを使用しました。
- ソース:
-
Discourse Developer Docs - Converting Modals
- URL:
https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md - 移行手順を相互参照しました。
- URL:
実現したいこと
- コンポーザーにツールバーボタンを追加する
- ボタンをクリックするとモーダルフォームが開く
- ユーザーがフォームに入力して送信をクリックする
- モーダルが閉じ、コンポーザーにコンテンツが挿入される
試したこと
アプローチ 1: 動的インポート + モーダルサービス (現在)
- モジュールのインポートエラーが発生しています。
アプローチ 2: showModal() とコントローラーを使用
- レガシーコントローラーに関する非推奨警告が表示されます。
アプローチ 3: 静的インポート
- 静的インポートも試しましたが、同様のモジュール解決の問題が発生しました。
ファイル構造:
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
├── initializers/
│ └── lottery-toolbar.js
└── components/modal/
├── lottery-form-modal.js
└── lottery-form-modal.hbs
ツールバーボタンのコード:
// assets/javascripts/discourse/initializers/lottery-toolbar.js
import { withPluginApi } from "discourse/lib/plugin-api";
export default {
name: "lottery-toolbar",
initialize() {
withPluginApi("1.0.0", (api) => {
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
id: "lottery-insert",
group: "extras",
icon: "dice",
title: "Insert Lottery",
perform: () => {
const modal = api.container.lookup("service:modal");
// この行がインポートエラーを引き起こしています:
import("discourse/components/modal/lottery-form-modal").then((module) => {
const LotteryFormModal = module.default;
modal.show(LotteryFormModal, { model: {} });
});
},
});
});
});
},
};
モーダルコンポーネント:
// assets/javascripts/discourse/components/modal/lottery-form-modal.js
import Component from "@ember/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
export default class LotteryFormModal extends Component {
@tracked inputValue = "";
@action
submit() {
// フォーム送信を処理
this.args.closeModal();
}
}
モーダルテンプレート:
{{! assets/javascripts/discourse/components/modal/lottery-form-modal.hbs }}
<DModal @title="My Modal" @closeModal={{this.args.closeModal}} class="my-modal">
<:body>
<input value={{this.inputValue}} />
</:body>
<:footer>
<button {{on "click" this.submit}}>Submit</button>
</:footer>
</DModal>
質問
上記のすべてのコード、エラー、および背景情報に基づいて、機能を正しく実装するためにコードをどのように変更すべきですか？
正しい実装アプローチに関するガイダンスをいただけると幸いです。
問題の概要
Discourse プラグインを開発しており、モーダルフォームを開くためのツールバーボタンを追加しようとしています。公式の DModal API Migration ガイドをステップバイステップで実行しましたが、モジュールのインポートエラーと「modal needs updating」という警告が引き続き表示されます。何が不足しているのか、ガイダンスが必要です。
簡単な注意: プログラミングの方法がわかりません。このプラグインは完全に AI の助けを借りて作成されました。
現在のエラー
エラー 1 - モジュールのインポート:
Uncaught (in promise) Error: Could not find module `discourse/components/modal/lottery-form-modal` imported from `discourse/plugins/discourse-lottery-v3/discourse/initializers/lottery-toolbar`
エラー 2 - レガシーモーダル警告:
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.
エラー 3 - 非推奨通知:
Deprecation notice: Defining modals using a controller is no longer supported. Use the component-based API instead. (modal: lottery-form) [deprecated since Discourse 3.1] [removal in Discourse 3.2]
参照した公式ドキュメント
以下の公式リソースを注意深く調査し、実装しました。
-
Converting modals from legacy controllers to new DModal component API
- URL:
https://meta.discourse.org/t/268057 - 4 つのステップすべてを実行しました: ファイルを
/components/modal/に移動、JS を Component を拡張するように更新、テンプレートを\u003cDModal\u003eを使用するように更新、show 呼び出しをmodal.show()を使用するように更新しました。
- URL:
-
Using the DModal API to render Modal windows
- URL:
https://meta.discourse.org/t/268304 @closeModal、@title、および名前付きブロックを適切に使用して DModal を実装しました。
- URL:
-
Discourse Core Plugin API
- ソース:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs api.onToolbarCreate()とモーダルサービスインジェクションを使用しました。
- ソース:
-
Discourse Developer Docs - Converting Modals
- URL:
https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md - 移行手順を相互参照しました。
- URL:
実現したいこと
- コンポーザーにツールバーボタンを追加する
- ボタンをクリックするとモーダルフォームが開く
- ユーザーがフォームに入力して送信をクリックする
- モーダルが閉じ、コンポーザーにコンテンツが挿入される
試したこと
アプローチ 1: 動的インポート + モーダルサービス (現在)
- モジュールのインポートエラーが発生しています。
アプローチ 2: showModal() とコントローラーを使用
- レガシーコントローラーに関する非推奨警告が表示されます。
アプローチ 3: 静的インポート
- 静的インポートも試しましたが、同様のモジュール解決の問題が発生しました。
ファイル構造:
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
├── initializers/
│ └── lottery-toolbar.js
└── components/modal/
├── lottery-form-modal.js
└── lottery-form-modal.hbs
ツールバーボタンのコード:
// assets/javascripts/discourse/initializers/lottery-toolbar.js
import { withPluginApi } from "discourse/lib/plugin-api";
export default {
name: "lottery-toolbar",
initialize() {
withPluginApi("1.0.0", (api) => {
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
id: "lottery-insert",
group: "extras",
icon: "dice",
title: "Insert Lottery",
perform: () => {
const modal = api.container.lookup("service:modal");
// この行がインポートエラーを引き起こしています:
import("discourse/components/modal/lottery-form-modal").then((module) => {
const LotteryFormModal = module.default;
modal.show(LotteryFormModal, { model: {} });
});
},
});
});
});
},
};
モーダルコンポーネント:
// assets/javascripts/discourse/components/modal/lottery-form-modal.js
import Component from "@ember/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
export default class LotteryFormModal extends Component {
@tracked inputValue = "";
@action
submit() {
// フォーム送信を処理
this.args.closeModal();
}
}
モーダルテンプレート:
{{! assets/javascripts/discourse/components/modal/lottery-form-modal.hbs }}
<DModal @title="My Modal" @closeModal={{this.args.closeModal}} class="my-modal">
<:body>
<input value={{this.inputValue}} />
</:body>
<:footer>
<button {{on "click" this.submit}}>Submit</button>
</:footer>
</DModal>
質問
上記のすべてのコード、エラー、および背景情報に基づいて、機能を正しく実装するためにコードをどのように変更すべきですか？
正しい実装アプローチに関するガイダンスをいただけると幸いです。