koishijs / koishi

Cross-platform chatbot framework made with love
https://koishi.chat
MIT License
4.53k stars 246 forks source link

Bug: 类型错误导致无法编译插件 #1345

Closed TTsdzb closed 10 months ago

TTsdzb commented 10 months ago

Describe the bug

我的插件中使用了 TSX 写法,通过 html 元素调用 Puppeteer 渲染网页。其中包含了 img 用于在网页中插入图片,但该 img 疑似被识别为消息元素导致插件无法编译。

从最新的插件模板中更新了 tsconfig.json 后,问题不变。

代码:

function generate(imageUrl: string) {
  return (
    <html>
      <div
        style={{
          width: "1170px",
          height: "1162px",
        }}
      >
        <img
          style={{
            position: "absolute",
            left: "158px",
            top: "190px",
            width: "854px",
            height: "854px",
            "object-fit": "cover",
          }}
          src={imageUrl}
        />
        <img
          style={{
            position: "absolute",
            left: 0,
            top: 0,
          }}
          src={imagePath}
        />
      </div>
    </html>
  );
}

编译输出:

$ npm run build maifriend-image

> koishi@0.0.0 build
> yakumo build maifriend-image

external/maifriend-image/src/index.tsx:25:13 - error TS2322: Type '{ style: { position: string; left: string; top: string; width: string; height: string; "object-fit": string; }; src: string; }' is not assignable to type 'ResourceElement'.
  Property 'style' does not exist on type 'ResourceElement'.

25             style={{
               ~~~~~

external/maifriend-image/src/index.tsx:36:13 - error TS2322: Type '{ style: { position: string; left: number; top: number; }; src: string; }' is not assignable to type 'ResourceElement'.
  Property 'style' does not exist on type 'ResourceElement'.

36             style={{
               ~~~~~

Found 2 errors.

Steps to reproduce

  1. 新建插件,在 TSX 中使用 html 渲染一个包含 img 的网页
  2. img 添加一些消息元素没有的属性,例如 style
  3. 编译插件

Expected behavior

插件能够正常编译并输出编译成果。

Screenshots

编辑器报错:

图片

Versions

Additional context

有问题的插件仓库:https://github.com/TTsdzb/koishi-plugin-maifriend-image

插件在 npm run dev 调试时完全可以正常运行,只是不能编译。

我所使用的 koishi 模板项目也是刚创建的。package.json

{
  "name": "koishi",
  "version": "0.0.0",
  "packageManager": "yarn@4.0.1",
  "private": true,
  "files": [
    ".env",
    "koishi.yml"
  ],
  "license": "AGPL-3.0",
  "workspaces": [
    "external/*",
    "external/*/external/*",
    "external/*/external/*/packages/*",
    "external/*/external/*/plugins/*",
    "external/*/packages/*",
    "external/*/plugins/*",
    "external/satori/adapters/*",
    "external/koishi/plugins/*",
    "external/koishi/plugins/database/*",
    "packages/*",
    "packages/@*/*",
    "plugins/*",
    "plugins/@*/*"
  ],
  "scripts": {
    "new": "koishi-scripts new",
    "setup": "koishi-scripts setup",
    "clone": "koishi-scripts clone",
    "build": "yakumo build",
    "bump": "yakumo version",
    "dep": "yakumo upgrade",
    "pub": "yakumo publish",
    "dev": "cross-env NODE_ENV=development koishi start -r esbuild-register -r yml-register",
    "start": "koishi start"
  },
  "devDependencies": {
    "@koishijs/client": "^5.25.7",
    "@koishijs/plugin-hmr": "^1.2.8",
    "@koishijs/scripts": "^4.5.0",
    "@types/node": "^20.10.2",
    "@types/react": "^18.2.48",
    "cross-env": "^7.0.3",
    "esbuild": "^0.18.20",
    "esbuild-register": "npm:@shigma/esbuild-register@^1.1.1",
    "typescript": "^5.3.2",
    "yakumo": "^1.0.0-beta.2",
    "yakumo-esbuild": "^1.0.0-beta.1",
    "yakumo-tsc": "^1.0.0-beta.0",
    "yml-register": "^1.1.0"
  },
  "dependencies": {
    "@koishijs/plugin-actions": "^0.0.2",
    "@koishijs/plugin-analytics": "^2.0.6",
    "@koishijs/plugin-auth": "^4.1.6",
    "@koishijs/plugin-commands": "^3.5.0",
    "@koishijs/plugin-config": "^2.8.2",
    "@koishijs/plugin-console": "^5.25.7",
    "@koishijs/plugin-database-sqlite": "^3.8.4",
    "@koishijs/plugin-explorer": "^1.5.0",
    "@koishijs/plugin-help": "^2.4.3",
    "@koishijs/plugin-insight": "^3.5.1",
    "@koishijs/plugin-locales": "^2.5.3",
    "@koishijs/plugin-logger": "^2.6.7",
    "@koishijs/plugin-notifier": "^1.1.2",
    "@koishijs/plugin-oobe": "^0.0.2",
    "@koishijs/plugin-sandbox": "^3.2.4",
    "@koishijs/plugin-server": "^3.1.3",
    "@koishijs/plugin-status": "^7.4.8",
    "koishi": "^4.16.6",
    "koishi-plugin-adapter-onebot": "^6.4.0",
    "koishi-plugin-assets-local": "^3.2.1",
    "koishi-plugin-cron": "^3.1.0",
    "koishi-plugin-dataview": "^2.6.1",
    "koishi-plugin-puppeteer": "^3.7.3",
    "koishi-plugin-rate-limit": "^2.0.1",
    "koishi-plugin-telemetry": "^0.0.2",
    "koishi-plugin-theme-vanilla": "^1.0.6"
  }
}