How to properly alias Preact/compat with TypeScript?

Reproducing

1. git clone https://github.com/talentlessguy/preact-emotion-ts.git
2. yarn install
3. Open vscode, with these settings:

{
    "eslint.packageManager": "yarn",
    "npm.packageManager": "yarn",
    "editor.formatOnSave": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "editor.suggestSelection": "first",
    "eslint.autoFixOnSave": true,
    "eslint.alwaysShowStatus": true,
    "prettier.configPath": "/home/v1rtl/.prettierrc.yml",
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

And see this error on <Header> component:

JSX element type 'Header' does not have any construct or call signatures.

Versions

emotion: 10.0.22 preact: 10.0.5 eslint: 6.7 typescript: 3.7.2

Screenshot

The weirdiest thing is that npx eslint doesn’t show anything like this

preact-emotion-ts is 📦 v1.0.0 via ⬢ v13.2.0 
❯ npx eslint src/*.tsx --fix
Warning: React version was set to "detect" in eslint-plugin-react settings, but the "react" package is not installed. Assuming latest React version for linting.

I don’t what the issue is coming from but I suppose it is a problem with typings of preact (?)

[talentlessguy]

@ForsakenHarmony thanks, it works now!

my final react.d.ts is like this:

import {
  AnyComponent,
  createElement,
  FunctionalComponent,
  RenderableProps,
  ComponentChild
} from 'preact'

export {
  Attributes,
  FunctionalComponent as SFC,
  AnyComponent as ComponentType,
  AnyComponent as JSXElementConstructor,
  Component as ComponentClass,
  ClassAttributes,
  PreactContext as Context,
  PreactProvider as Provider,
  VNode as ReactElement,
  VNode as ReactNode,
  createElement,
  Fragment,
  Ref,
  render,
  JSX,
  RenderableProps as ComponentPropsWithRef
} from 'preact'

// export type JSXElementConstructor = AnyComponent;

there are only 3 warnings about JSX namespace but VS Code doesn’t complain about them:

node_modules/@emotion/styled-base/types/helper.d.ts:7:19 - error TS2503: Cannot find namespace 'JSX'.

7   C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
                    ~~~

node_modules/@emotion/styled-base/types/helper.d.ts:8:5 - error TS2503: Cannot find namespace 'JSX'.

8 > = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>
      ~~~

node_modules/@emotion/styled-base/types/index.d.ts:29:16 - error TS2503: Cannot find namespace 'JSX'.

29 type JSXInEl = JSX.IntrinsicElements
                  ~~~


Found 3 errors.

Closing the issue 👍

[ForsakenHarmony]

I just remembered I used emotion at some point

https://github.com/ForsakenHarmony/sky1/blob/master/frontend/typings/react/index.d.ts I have react aliased with preact exports

• this in the tsconfig https://github.com/ForsakenHarmony/sky1/blob/master/frontend/tsconfig.json#L15