CODEWITHSUNDEEP
reactjstypescript-typingsmonorepostyled-jsx
André Guimarães Aragon
André Guimarães Aragon

Reputation: 1331

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

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 <[email protected]>",
    "license": "MIT",
    "workspaces":{
    "packages": [
      "packages/*"
    ]
    }
    }

Upvotes: 13

Views: 7177

Answers (4)

Kristofor Carle
Kristofor Carle

Reputation: 1435

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

Upvotes: 0

Les
Les

Reputation: 1425

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" />

Upvotes: 9

Paulo Oliveira
Paulo Oliveira

Reputation: 121

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.

Upvotes: 1

ellockie
ellockie

Reputation: 4268

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`

Upvotes: 16

Related Questions