Aliasing 'react' to 'preact/compat' when migrating from React (typescript)
See original GitHub issueMy project uses rollup+ts. When switching from React to preact I had to do the following in order to make the project compile
tsconfig.json
...
"paths": {
"react-dom": ["../node_modules/preact/compat"],
"react": ["../node_modules/preact-compat"],
...
This seems a bit odd to me. Is this how it was intended? I thought preact-compat
is deprecated, but if I use preact/compat
instead, then there’s some types missing, like JSX.Element
and React.DependencyList
and many others. I think it’s related to #2222 and #2150.
And the first alias cannot be changed from preact/compat
to preact-compat
either, otherwise ts complains to that line:
import * as ReactDOM from 'react-dom';
semantic error TS7016: Could not find a declaration file for module 'react-dom'. 'node_modules/preact-compat/dist/preact-compat.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/preact-compat` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-dom';`
In the end, it all works and it’s maybe not a big deal, but I think this should be documented at the very least.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:10 (4 by maintainers)
Top Results From Across the Web
Switching to Preact (from React)
Switching to Preact can be as easy as installing and aliasing preact-compat in for react and react-dom . This lets you continue writing...
Read more >How to properly alias Preact/compat with TypeScript? #2150
Reproducing git clone https://github.com/talentlessguy/preact-emotion-ts.git yarn install Open vscode, with these settings: { "eslint.
Read more >Moving React app to Preact in 10 minutes with Vite - Puru Vijay
We are using TypeScript with React, and we have to tell it that the JSX factory and fragments are now different, so let's...
Read more >Put your React on a diet - DEV Community
In docs Preact says you need to alias react and react-dom to preact/compat for everything to work. But here we have a problem, ......
Read more >Getting Started | Preact 是 React 的轻量化替代方案
If you're new to Preact, we recommend starting with Preact CLI. ... Setting up JSX; Aliasing React to Preact ... TypeScript preact/compat configuration ......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Oh, I think I’m starting to understand. I don’t need to install actual packages, just the types. After installing
@types/react-dom
I can now remove aliases fromtsconfig.json
. Still, maybe a word about it in the docs couldn’t hurt… Closing this one.@JoviDeCroock thank you for the answers.