迁移到 monorepo 结构后 Styled-jsx 打字稿错误 “DetailedHTMLProps”类型上不存在属性“jsx”

编程问答 2022-05-27

问题描述

我在我的项目中使用了 styled-jsx，我只是将它迁移到 monorepo 结构，从那时起我一直遇到以下问题：

   Type '{ children: string; jsx: true; }' is not assignable to type 
   'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>,HTMLStyleElement>'.
   Property 'jsx' does not exist on type 
   'DetailedHTMLProps<StyleHTMLAttributes<HTMLStyleElement>,HTMLStyleElement>'.ts(2322)

每次我使用 style-jsx 的默认标签时，都会出现在 jsx 属性下：

    <style jsx>
        {`...`}
    </style>

我发现了一个关于这个主题的closed issue，根据这个link，如果我手动将以下两行添加到interface HTMLAttributes中的react/index.d.ts，可以解决这个问题:

    jsx?: boolean;
    global?: boolean;

这实际上解决了问题，但我不想手动修改来自 node_modules 的文件。

根据 vercel 中的这个 closed issue，我应该可以通过简单地运行 yarn add -D @types/styled-jsx 来解决这个问题，但这不起作用。

使用 npm 而不是 yarn 安装包也解决了这个问题，但我不想更改我正在使用的包管理器。此外，使用 npm 安装这个包而使用 yarn 安装其他包会导致应用程序崩溃。

我认为这可能是与 styled-jsx 和 yarn 工作区相关的提升问题，但添加

    "private": true,"nohoist":["**/styled-jsx","**/styled-jsx/**"]

到我的根 package.json 和使用 styled-jsx 的项目的 package.json 也没有解决问题。

有没有人有解决这个问题的方法，不涉及手动修改react/index.d.ts、改变我的包管理器或放弃 monorepo 结构？

使用 package.json 的项目的 styled-jsx：

    {
    "name": "with-typescript","version": "1.0.0","scripts": {
    "dev": "next","build": "next build","start": "next start","type-check": "tsc","lint": "eslint **/**","lint:fix": "eslint **/** --fix","test": "NODE_ENV=test jest --passWithNoTests --watch","test:ci": "NODE_ENV=test jest --passWithNoTests"
    },"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.34","@fortawesome/free-solid-svg-icons": "^5.15.2","@fortawesome/react-fontawesome": "^0.1.14","@types/styled-jsx": "^2.2.8","axios": "^0.21.1","dotenv": "^8.2.0","firebase": "^8.2.4","firebase-admin": "^9.4.2","formidable": "^1.2.2","global": "^4.4.0","isomorphic-unfetch": "3.0.0","jest": "^25.2.1","js-cookie": "^2.2.1","next": "^10.0.5","path": "^0.12.7","react": "^16.12.0","react-dom": "^16.12.0","react-router-dom": "^5.2.0","styled-components": "^5.2.1","styled-jsx": "^3.4.1"
    },"devDependencies": {
    "@types/formidable": "^1.0.32","@types/js-cookie": "^2.2.6","@types/node": "^12.12.21","@types/react": "^16.9.16","@types/react-dom": "^16.9.4","@types/react-router-dom": "^5.1.7","@types/styled-components": "^5.1.7","@typescript-eslint/eslint-plugin": "^4.14.0","@typescript-eslint/parser": "^4.14.0","eslint": "^7.18.0","eslint-config-airbnb": "^18.2.1","eslint-import-resolver-typescript": "^2.3.0","eslint-plugin-import": "^2.22.1","eslint-plugin-jsx-a11y": "^6.4.1","eslint-plugin-react": "^7.22.0","eslint-plugin-react-hooks": "^4.2.0","prettier": "^1.18.2","typescript": "3.7.3"
    },"license": "ISC"
    }

我的根文件夹的 package.json：

    {
    "name": "next_shsc","main": "index.js","private":true,"repository": "https://github.com/agaragon/next_shsc.git","author": "aragon <andregaragon@gmail.com>","license": "MIT","workspaces":{
    "packages": [
      "packages/*"
    ]
    }
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

monoreporeactjsreactjsreactjsreactjsstyled-jsxtypescript-typings