Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[10.0.0-beta.2] TS7026 error when using module alias between react and preact/compat on tsconfig.json

See original GitHub issue

Hi, committers!

When I set this module alias between react and preact/compat on tsconfig.json,

    ...
    "baseUrl": "./",
    "paths": {
      "react": ["node_modules/preact/compat"],
      "react-dom": ["node_modules/preact/compat"]
    },
    ...

I see tsc has TS7026 errors (“JSX element implicitly has type ‘any’ because no interface ‘JSX.IntrinsicElements’ exists.”).

$ yarn tsc
yarn run v1.16.0
$ /Users/babie/src/github.com/babie/preact-cli-template/template/node_modules/.bin/tsc
src/App.tsx:5:5 - error TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

5     <h1 className="title">Hello, Preact!</h1>
      ~~~~~~~~~~~~~~~~~~~~~~
...

And when I write this patch,

diff --git a/node_modules/preact/compat/src/index.d.ts b/node_modules/preact/compat/src/index.d.ts
index bdc044f..6314d96 100644
--- a/node_modules/preact/compat/src/index.d.ts
+++ b/node_modules/preact/compat/src/index.d.ts
@@ -11,6 +11,7 @@ export import createRef = preact.createRef;
 export import Fragment = preact.Fragment;
 export import createElement = preact.createElement
 export import cloneElement = preact.cloneElement
+export import JSX = preact.JSX
 
 export declare const version: string;

Then tsc has no error.

$ yarn tsc
yarn run v1.16.0
$ /Users/babie/src/github.com/babie/preact-cli-template/template/node_modules/.bin/tsc
✨  Done in 1.72s.

Probably, TypeScript needs a global(top level) JSX type.

Here is a sample repository:

Issue Analytics

State:
Created 4 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

pmkroekercommented, Jun 11, 2019

So after some investigation, adding export import JSX = preact.JSX does solve the issue when using the import like import * as React from 'preact/compat', but unfortunately does not if using import React from 'preact/compat. Currently working on a solution to hopefully allow both methods to work equally.

0reactions

babiecommented, Jun 11, 2019

Alright. I hope to hear from you.

Top Results From Across the Web

tsconfig.json using alias for import not working - Stack Overflow

Some precision : with create-react-app, I can't directly edit webpack.config.js, so I found this for have same result. add required module ...

TypeScript | Preact: Fast 3kb React alternative with the same ...

TypeScript configuration. TypeScript includes a full-fledged JSX compiler that you can use instead of Babel. Add the following configuration to your tsconfig.

TypeScript errors and how to fix them

Fixed Code ✔️. Solution 1: When “importsNotUsedAsValues” is set to “error” in your “tsconfig.json”, then you have to use the ...

Moving React app to Preact in 10 minutes with Vite - Puru Vijay

This post is just a recount of my experience when I moved a medium size React app(30+ components) to use Preact, in just...

Can't resolve path alias : r/reactjs - Reddit

src/App.tsx 7:0-53 Module not found: Error: Can't resolve '$/features/counter/Counter' in '\frontend\src'. I added these to tsconfig.json