# 插件模态组件导入错误 - 遵循官方文档但仍出现错误

**URL:** <https://meta.discourse.org/t/plugin-modal-component-import-error-followed-official-docs-but-still-getting-errors/380016>\
**Category:** Development\
**Created:** [2025年八月23日 13:20 UTC](https://meta.discourse.org/t/plugin-modal-component-import-error-followed-official-docs-but-still-getting-errors/380016 "2025-08-23T13:20:16Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![joo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joo/32/334852_2.png) [@joo](https://meta.discourse.org/u/joo)\
**Post date:** [2025年八月23日 13:20 UTC](https://meta.discourse.org/t/plugin-modal-component-import-error-followed-official-docs-but-still-getting-errors/380016/1 "2025-08-23T13:20:16Z")

</div>

## 问题摘要

我正在开发一个 Discourse 插件，该插件会在编辑器中添加一个工具栏按钮，用于打开一个模态框表单。我已按照官方 DModal API 迁移文档一步一步操作，但仍然收到模块导入错误和“modal needs updating”的警告。我需要一些指导，告诉我缺少了什么。

**快速说明：** 我不懂编程，这个插件完全是 AI 帮助生成的。

## 当前错误

**错误 1 - 模块导入：**

```plaintext
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 - 旧版模态框警告：**

```plaintext
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.

```

**错误 3 - 弃用通知：**

```plaintext
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]

```

## 我已遵循的官方文档

我已仔细研究并根据以下官方资源进行实施：

1. **将模态框从旧版控制器转换为新的 DModal 组件 API**

2. **使用 DModal API 渲染模态框窗口**

3. **Discourse 核心插件 API**

4. **Discourse 开发者文档 - 转换模态框**

## 我想做什么

- 在编辑器中添加一个工具栏按钮
- 点击按钮打开一个模态框表单
- 用户填写表单并点击提交
- 模态框关闭并将内容插入编辑器

## 我已尝试过的方法

**方法 1：动态导入 + 模态框服务（当前）**

- 出现模块导入错误

**方法 2：showModal() 与控制器**

- 出现关于旧版控制器的弃用警告

**方法 3：静态导入**

- 也尝试过静态导入，但遇到相同的模块解析问题

**文件结构：**

```plaintext
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
    ├── initializers/
    │ └── lottery-toolbar.js
    └── components/modal/
        ├── lottery-form-modal.js
        └── lottery-form-modal.hbs

```

**工具栏按钮代码：**

```javascript
// 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");

            // This line causes the import error:
            import("discourse/components/modal/lottery-form-modal").then((module) => {
              const LotteryFormModal = module.default;
              modal.show(LotteryFormModal, { model: {} });
            });
          }
        });
      });
    });
  }
};

```

**模态框组件：**

```javascript
// 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() {
    // Handle form submission
    this.args.closeModal();
  }
}

```

**模态框模板：**

```handlebars
{{! 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>

```

## 问题

根据以上提供的所有代码、错误和背景信息，我应该如何修改我的代码以正确实现我的功能？

非常感谢任何关于正确实现方法的指导。

---

_[View the full topic](https://meta.discourse.org/t/plugin-modal-component-import-error-followed-official-docs-but-still-getting-errors/380016)._