如何解决迁移到 monorepo 结构后 Styled-jsx 打字稿错误 “DetailedHTMLProps”类型上不存在属性“jsx”
我在我的项目中使用了 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 举报,一经查实,本站将立刻删除。