How to properly alias Preact/compat with TypeScript?

[talentlessguy]

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 (?)

[JoviDeCroock]

The reason behind npx eslint src/*.tsx --fix not reporting this is because it is a tsc (the process that compiles typescript) error, this means that the typescript compiler is throwing this and isn't related to linting.

[talentlessguy]

The reason behind npx eslint src/*.tsx --fix not reporting this is because it is a tsc (the process that compiles typescript) error, this means that the typescript compiler is throwing this and isn't related to linting.

okay, thanks for pointing out the issue.

npx tsc outputs this:

❯ npx tsc
node_modules/@emotion/core/types/index.d.ts:17:8 - error TS2307: Cannot find module 'react'.

17 } from 'react'
          ~~~~~~~

node_modules/@emotion/styled-base/types/helper.d.ts:1:24 - error TS2307: Cannot find module 'react'.

1 import * as React from 'react'
                         ~~~~~~~

node_modules/@emotion/styled-base/types/helper.d.ts:7:23 - error TS2694: Namespace 'global.JSX' has no exported member 'IntrinsicElements'.

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

node_modules/@emotion/styled-base/types/helper.d.ts:8:9 - error TS2694: Namespace 'global.JSX' has no exported member 'LibraryManagedAttributes'.

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

node_modules/@emotion/styled-base/types/index.d.ts:16:24 - error TS2307: Cannot find module 'react'.

16 import * as React from 'react'
                          ~~~~~~~

node_modules/@emotion/styled-base/types/index.d.ts:29:20 - error TS2694: Namespace 'global.JSX' has no exported member 'IntrinsicElements'.

29 type JSXInEl = JSX.IntrinsicElements
                      ~~~~~~~~~~~~~~~~~

src/index.tsx:23:6 - error TS2604: JSX element type 'Header' does not have any construct or call signatures.

23     <Header>Hello World</Header>
        ~~~~~~


Found 7 errors.

[JoviDeCroock]

This seems to be related to us missing the deprecated SFC shorthand in /compat/src/index.d.ts

[talentlessguy]

But I don't use preact/compat 🤔

If there is no any option with using pure Preact and Emotion, I can alias it

[JoviDeCroock]

The purpose of preact/compat is allowing you to use React libraries in Preact. Emotion is written for React

[talentlessguy]

@JoviDeCroock okay, then I'll just stick to preact/compat

Closing the issue

[talentlessguy]

Update: Even when aliasing to preact/compat in tsconfig.json, like this:

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es6",
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "react": ["node_modules/preact/compat"],
      "react-dom": ["node_modules/preact/compat"]
    },
    "allowSyntheticDefaultImports": true
  },
  "include": ["./src/**/*"]
}

I still get this error (and new ones):

❯ npx tsc
node_modules/@emotion/core/types/index.d.ts:8:3 - error TS2305: Module '"../../../preact/compat/src"' has no exported member 'ClassAttributes'.

// ...

node_modules/@emotion/styled-base/types/index.d.ts:29:20 - error TS2694: Namespace 'global.JSX' has no exported member 'IntrinsicElements'.

src/index.tsx:23:6 - error TS2604: JSX element type 'Header' does not have any construct or call signatures.

Found 18 errors.

Full log here: https://termbin.com/r9vr

I guess I messed up somewhere in aliasing

[JoviDeCroock]

Your tsconfig is excluding paths from taking effect in node_modules, since it's set to only include source files.

Secondly to make parcel work you'll have to add

  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }

To package.json since parcel will try to resolve react

[talentlessguy]

okay, I removed module resolution from tsconfig.json

yeah, I have it aliased, so it builds fine (using npx parcel index.html), but in VS Code editor warning is still present

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

[JoviDeCroock]

okay, I removed module resolution from tsconfig.json

Well that's not really the solution, it goes recursively into @emotion but paths has no effect there due to the scoping settings you have in include. So it will just try React instead of your resolution. Can't look into it right now but if you haven't solved it when I get home I'll take a look.

[talentlessguy]

@JoviDeCroock no problem, I can wait

Thanks for spending time on my issue btw ❤️

[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

[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 👍

[ahuglajbclajep]

As for e.target, since JSX.TargetedEvent is declared with type, it seems that the type definition can not be overridden and existing React code must be changed.
See also #1930 and #2084 (comment).

[matthias-ccri]

For ReactNode I have ComponentChild instead of VNode.

Because according to @types/react, ReactNode includes string etc. But VNode is an object.

export {
    ...
    ComponentChild as ReactNode,
    // Also:
    Component as PureComponent,
    ...
} from 'preact';

For the record, this is how to use the react.d.ts file, in your tsconfig.json:

"paths": {
  "react": ["react.d.ts"],
},

[piotr-cz]

I had similar problems when compiling tsx because on of the dependencies - react-leaflet uses react types extensively.

I was successful with a modified version of @types/react (without the JSX namespace), but then decided to just set "skipLibCheck": false in tsconfig.json as described in docs

[mate-h]

@talentlessguy Small correction:

react.d.ts

import {
  AnyComponent,
  createElement,
  FunctionalComponent,
  RenderableProps,
  ComponentChild,
  ComponentChildren
} 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,
  createElement,
  Fragment,
  Ref,
  render,
  JSX,
  RenderableProps as ComponentPropsWithRef
} from 'preact'

export type ReactNode = ComponentChild | ComponentChildren;

// export type JSXElementConstructor = AnyComponent;