Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
TTsdzb opened this issue Jan 23, 2024 · 0 comments
Closed

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

TTsdzb opened this issue Jan 23, 2024 · 0 comments

Comments

@TTsdzb
Copy link

TTsdzb commented Jan 23, 2024

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

  • OS: Arch Linux
  • Node version: 21.6.0
  • Koishi version: 4.16.6
  • typescript: 5.3.3
  • @types/react: 18.2.48

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"
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants