0

I am starting a webapp using preact with typescript and parcel as a bundler.

I'd like to avoid using preact-specific imports, so (as per the parcel docs) I added this parcel-specific configuration to my package.json:

"alias": {
    "react": "preact/compat",
    "react-dom/test-utils": "preact/test-utils",
    "react-dom": "preact/compat",
    "react/jsx-runtime": "preact/jsx-runtime"
},

With that configuration, this import works fine when the application is compiled/started with parcel:

import * as React from "react";

However, the typescript language service and therefore IDEA is highlighting it as an error

TS2307: Cannot find module 'react' or its corresponding type declarations

which is understandable, of course, because typescript does not know about parcel specific stuff.

ts-error-in-idea

My current workaround is to also have react installed in devDependencies in addition to preact in dependencies. That just feels wrong. Is there another option?

eekboom
  • 5,551
  • 1
  • 30
  • 39
  • do you have `@types/react` in `package.json` file? – Alan Z Dec 25 '21 at 15:49
  • I added both `@types/react-dom` and `@types/react` . Now I get another error, this time on "ReactDOM" in the import statement instead of the "recat-dom" as before: `TS1192: Module ".../node_module/@types/react-dom/index" has no default export`. – eekboom Dec 25 '21 at 15:57
  • 1
    Can you check `tsconfig.json` file and check if `esModuleInterop` is true? – Alan Z Dec 25 '21 at 16:00
  • 1
    In `tsconfig.json` use the `"paths"` option to mirror the aliases: `"paths": { "react": ["preact/compat"], "react-dom/test-utils": ["preact/test-utils"], "react-dom": ["preact/compat"], "react/jsx-runtime": ["preact/jsx-runtime"] }`. See https://www.typescriptlang.org/tsconfig#paths – Aluan Haddad Dec 25 '21 at 18:02

0 Answers0