question-mark
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.

Aliasing 'react' to 'preact/compat' when migrating from React (typescript)

See original GitHub issue

My 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:closed
  • Created 2 years ago
  • Reactions:1
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
AlexIIIcommented, Dec 1, 2021

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 from tsconfig.json. Still, maybe a word about it in the docs couldn’t hurt… Closing this one.

0reactions
AlexIIIcommented, Dec 1, 2021

@JoviDeCroock thank you for the answers.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found