TypeScript error on <style> with attributes global and jsx

[Jule-]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #137-Ubuntu SMP Wed Jun 15 13:33:07 UTC 2022
Binaries:
  Node: 16.14.2
  npm: 8.7.0
  Yarn: 1.22.5
  pnpm: N/A
Relevant packages:
  next: 12.2.1-canary.2
  eslint-config-next: N/A
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

In my project when I try to create a component with global style I get a TypeScript error:

// Test.tsx

export function Test() {
  return (
    <div>
      <style global jsx>{``}</style>
      {/*    ~~~~~~    */}
    </div>
  )
}

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

And what seems strange is that [email protected] seems to correctly define extension of react type with:

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

But for some reason, this seems not to be used by TypeScript.

Expected Behavior

No TS error.

Link to reproduction

https://codesandbox.io/s/musing-mcnulty-i2crqc?file=/components/Test.tsx

To Reproduce

Just hover the global attribute in order to see the TypeScript error.

[github-actions]

Please verify your issue reproduces with next@canary. The canary version of Next.js ships daily and includes all features and fixes that have not been released to the stable version yet. Think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces by running npm install next@canary. If the issue does not reproduce with the canary version, then it has already been fixed and this issue can be closed.

[Jule-]

Hi bot! Can't you read the I verified that the issue exists in the latest Next.js canary release checkbox? 😅 Or check on the repro link that is using next@canary? 😉

[Jule-]

Insight: it is working correctly on [email protected].

[wiesson]

It also doesn't work with next canary

@Jule- Have you been able to suppress the error until it gets fixed? It's quite annoying.

The docs mention that

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

might help, but for me it did not: Source https://github.com/vercel/styled-jsx#typescript

[Jule-]

@wiesson ho nice catch, this seems to work in the CodeSandbox! I need more time to check that in my project. Did you have restarted your TS server after adding the type file?

But even if it is working like that, this needs more documentation and it doesn't explain why this was working out of the box before.

[Jule-]

@wiesson I can confirm it works in my project. I put it in a project root folder named types, it's a habit, I am not sure if it is still relevant but I remember that sometimes (with some versions or with some tsconfig stuff) TS is looking in this folder.

[tangye1234]

file: ./node_modules/next/index.d.ts

If I changed the selected line into

/// <reference path="./dist/styled-jsx-types/global.d.ts" />

then all problems are addressed.

[SukkaW]

I was able to reproduce the issue in one of my projects: https://github.com/sukkaw/vercel-dns-console

I have fixed the issue by copy-pasting styled-jsx type definition directly into my project: https://github.com/SukkaW/vercel-dns-console/blob/master/styled-jsx.d.ts

[Jule-]

@balazsorban44 Can you confirm that change spot by @tangye1234 is a wanted change? Or does it should be reverted (or fixed, I didn't check the history)?
And then, that @wiesson comment about importing types on our own is the intended way to handle this? (even if it feels a bit strange to have to do this while it is not a direct dependency of our projects)

Thanks a lot!

[handycode]

file: ./node_modules/next/index.d.ts

If I changed the selected line into

/// <reference path="./dist/styled-jsx-types/global.d.ts" />

then all problems are addressed.

It works! thanks!

[Jule-]

I think this commit should fix this issue 62f3f87 in the way @tangye1234 exposed.

At least I don't have the issue on CodeSandbox with 12.2.3-canary.7. Closable with a new version release! 👍

[ijjk]

Closing per above, please update to the latest version of Next.js v12.2.3 and give it a try!

[anasik]

This still exists in v12.2.4

[ijjk]

@anasik could you open a fresh issue with a reproduction? Would be good to verify this is the case with v12.2.5

[Chamberlainfrancis]

This issue still exists with v12.2.5 although I am not using typescript, I still got this error during build Unknown property 'jsx' found on here <style jsx>{ }</style>

[mskarimi]

This issue still exists with v12.2.5 although I am not using typescript, I still got this error during build Unknown property 'jsx' found on here <style jsx>{ }</style>

me too

[seiyab]

I also encountered same error in my project with v12.2.5.
So I tried to write a reproduction.
However, it works fine when I setup next project from start 🤔
https://github.com/seiyab/repro/tree/main/next-styled-jsx
I'll continue to investigate it.

[seiyab]

I reproduced the problem.
npx next build and npx next lint complains when I install eslint.

./pages/index.tsx
4:16  Error: Unknown property 'jsx' found  react/no-unknown-property

https://github.com/seiyab/repro/tree/main/next-styled-jsx
It seems to be slightly different problem from this issue.
This issue is TypeScript error, and error in v12.2.5 is ESLint error.

I'll open a fresh issue 💡

[seiyab]

I found that a discussion for v12.2.5 has already opened.
#40269

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.