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

[AlexIII]

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.

[JoviDeCroock]

Hmm, odd normally you don't have to do anything in TypeScript, especially not creating path aliases 😅

[AlexIII]

Maybe I wasn't completely clear, the project was running on React, so it has import * as React from 'react' in every file. I don't believe typescript could somehow 'know' that it should use 'preact' module instead of 'react' without aliasing.

[JoviDeCroock]

I mean, it doesn't have to as @types/react is the same as preact/compat which means that it doesn't need a type-alias. Also TypeScript most of the time isn't really involved in the compilation process (unless you explicitly want it to but the bundles aren't good at all) so your best benefit is not aliasing it.

[AlexIII]

I'm sorry, what you're saying doesn't make any sense to me. I realize that @types/react and preact/compat supposed to be the same, but typescript couldn't know that. It literally would only look in node_modules/react folder because import statement tells it to do so. It won't look in other places, like node_modules/preact/compat, without me explicitly specifying that I want the compiler to look into that folder when I do import from react.

[JoviDeCroock]

Yes, but TypeScript is mainly an IDE tool so it doesn't actually need to know that 😅 you can just let it think you are importing from React as it won't affect your ending bundle unless you're using it to get the end bundle which in terms of bundle size I'd advise against.

https://www.npmjs.com/package/@rollup/plugin-alias is better for that alias stuff

[AlexIII]

I should have mentioned, that I do use plugin-alias already.

rollup.config.js

plugins: [
...
typescript(),
alias({
            entries: [
                { find: 'react', replacement: 'preact/compat' },
                { find: 'react-dom', replacement: 'preact/compat' }
            ]
        }),

It's just it's not enough on it's own, I still have to add aliasing in tsconfig.json or typescript will complain Cannot find module 'react-dom' or its corresponding type declarations (also all imports turn red in vscode).
And of course I don't use typescript for bundling, rollup does that.

[JoviDeCroock]

Ah yes, my solution assumes that you just leave react(-dom) installed as it doesn't really matter if it's a node_module 😅 haven't really done the ts-path aliases as I find them quite flakey

[AlexIII]

So, could you explain, how migration supposed to be done? Should I leave react and react-dom in my dependencies in package.json (perhaps move them to devDependencies...)? That seems a bit strange to have dependencies you don't actually use... I usually like to keep them clean.

[AlexIII]

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.

[AlexIII]

@JoviDeCroock thank you for the answers.