Module aliasing in TypeScript without WebPack

[bard]

I want to alias preact-compat to react. I'm not using WebPack, I'm using Parcel which in turn is letting TypeScript do its own module resolution.

I'm 50% there but type definitions are getting in the way (see below).

Details:

react and react-dom are aliased to preact-compat via the paths property in tsconfig.json:

{
  "files": [
    "./src/index.tsx"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "react": ["node_modules/preact-compat"],
      "react-dom": ["node_modules/preact-compat"]
    },
  ...

The compiler tries resolving react, looks at node_modules/react as per default, finds nothing, looks at the value of paths above, tries node_modules/preact-compat, finds it and accepts it:

$ tsc --traceResolution | grep "Module name 'react' was " 
======== Module name 'react' was successfully resolved
to '[redacted]/node_modules/preact-compat/dist/preact-compat.js'. ========

So far, so good.

However if I install @types/react and retry the above...

$ tsc --traceResolution | grep "Module name 'react' was " 
======== Module name 'react' was successfully resolved 
to '[redacted]/node_modules/@types/react/index.d.ts'. ========

Ouch, react is now resolved to @types/react/index.d.ts.

How to keep types installed and still have react alias to preact-compat?

(I realize this is more of a TypeScript question but given the use case perhaps someone has come across and solved this already.)

[marvinhagemeister]

Having @types/react alongside preact is currently not supported by neither of those packages. Both declare the JSX types globally which will clash with each other. For preact this is tracked here preactjs/preact#1036. As far as I know @types/react don't have any short term plans to change that or perhaps no one has done a PR yet.

[bard]

@marvinhagemeister forgive me if it's a dumb question, I'm relatively new to TypeScript, does that imply that (at least for now) preact-compat with TypeScript is a no-go and one should go with vanilla preact?

[marvinhagemeister]

@bard preact works fine with react as long as you do not install @types/react.

[bard]

So, it appears I was barking wildly up the wrong tree. Parcel does its own resolution and aliasing modules is as easy as placing this in package.json:

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

Everything runs smoothly after that, even keeping @types/react and @types/react-dom installed.

Would you guys consider adding that bit to https://preactjs.com/guide/switching-to-preact?

[marvinhagemeister]

@bard awesome, that's even better 🎉 Filed an issue over at preact-www regarding our docs.