Styled-jsx typescript error after migrating to monorepo structure. Property 'jsx' does not exist on type 'DetailedHTMLProps'

user_15048254 0
Viewed 3371

I am using styled-jsx in my project and I just migrated it to a monorepo structure, and since then I have been having the following problem:

   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)

This appears under the jsx attribute every time I use the default tag for style-jsx:

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

I found a closed issue about this subject, and according to this link, this issue can be solved if I manually add the following two lines to interface HTMLAttributes in react/index.d.ts:

    jsx?: boolean;
    global?: boolean;

This actually solved the problem, but I don't want to manually modify a file from node_modules.

According to this closed issue in vercel, I should be able to fix this by simply running yarn add -D @types/styled-jsx, but this didn't work.

Installing the packages using using npm instead of yarn fixed the problem too, but I don't want to change the package manager I am using. Furthermore, installing this one package with npm and the others with yarn crashed the application.

I thought this could be a hoisting problem related to styled-jsx and yarn workspaces, but adding

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

to my root package.json and to the package.json of the project that uses styled-jsx didn't fix the problem either.

Does any one have a solution to this problem that does not involve manually modifying react/index.d.ts, changing my package manager or abandoning the monorepo structure?

The package.json of the project that uses 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",
    "@types/styled-jsx": "^2.2.8",
    "@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"
    }

The package.json of my root folder:

    {
    "name": "next_shsc",
    "version": "1.0.0",
    "main": "index.js",
    "private":true,
    "repository": "https://github.com/agaragon/next_shsc.git",
    "author": "aragon <andregaragon@gmail.com>",
    "license": "MIT",
    "workspaces":{
    "packages": [
      "packages/*"
    ]
    }
    }
styled-jsx monorepo typescript-typings reactjs
4 Answers

This solution fixed the issue for me (after @smeijer at GitHub):

Create a TypeScript Declaration File, named e.g. custom.d.ts:

import 'react';

declare module 'react' {
  interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
    jsx?: boolean;
    global?: boolean;
  }
}

Place it somewhere in the project, for example in the /src/typings folder. It should be picked up by the compiler automatically, but it may possibly depend on the config (?).

If you get eslint error complaining about the import 'react' line, put the following comment above it:

// eslint-disable-next-line react/no-typos`
user_6245970

Installing the @types/styled-jsx package didn't work for me - it's a stub for the types, as styled-jsx includes their own now.

Reading the docs on the styled-jsx github, there's a specific solution for this: https://github.com/vercel/styled-jsx#typescript

Adding a file at the root of my next app named styled-jsx.d.ts and putting this in it worked for me:

/// <reference types="styled-jsx" />

user_1748220

I am using Next 12.1.6 and I had this problem until I installed @types/styled-jsx 3.4.4.

I think it is a better approach.

user_8095460

Using pnpm 7 in a monorepo and Next 12.2.0 I had to install styled-jsx in my app with pnpm add styled-jsx

user_17958210
Related