Can't make it work with VSCode and TypeScript

[al6x]

Hi, can you please help me with setting up Preact in TypeScript VSCode

I'm not sure what's the problem, other libs are working fine. The vite also sees Preact (although it probably don't use TypeScript). I use bun instead of node but it shouldn't interfere with the VSCode.

The error - VSCode can't find the preact library.

The package.json

{
  "devDependencies": {
    "@types/bun": "^1.1.5",
    "bun-types": "^1.1.16",
    "typescript": "^5.5.2",
    "vite": "^5.3.1",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "dependencies": {
    "preact": "^10.22.0"
  }
}

The tsconfig.json

{
  "compilerOptions": {
    "module": "es2022",
    "lib": ["dom", "es2022"],
    "target": "es2022",
    "rootDir": ".",
    "alwaysStrict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveConstEnums": true,
    "removeComments": false,
    "sourceMap": true,
    "inlineSources": true,
    "strict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "strictBindCallApply": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "pretty": true,
    "declaration": true,
    "experimentalDecorators": true,
    "downlevelIteration": true,

    "baseUrl": "./",
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "outDir": "build"
  },
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "build",
    "vendor",
    "node_modules",
    "old"
  ]
}

[marvinhagemeister]

What happens if you follow the instructions in the tooltip and add "moduleResolution": "nodenext" to the compilerOptions section inside tsconfig.json?

[al6x]

Thanks, I checked it, it works, but I can't use it. I have the standard and same TypeScript config across many projects and can't and don't want to break it.

But, I found another way, I made ./vendor/preact-10.22.0-fix/preact.js with export * from 'preact' and copied types from node_modules/preact to ./vendor/preact-10.22.0-fix/preact.d.ts and added "preact": ["./vendor/preact-10.22.0-fix/preact"] to tsconfig import paths, now it works without custom TS setting.

[rschristian]

Can you run tsc against your project to see if it also can't pick up on the types? That narrows down whether it's an issue with VSCode specifically or your project config in general.

We do specify non-nodenext types, "moduleResolution": "nodenext" shouldn't be a requirement. Interesting that it works though, I don't know why that'd be.

If you've installed preact with bun, do try installing it with NPM too. Might be a bun issue.

[al6x]

@rschristian I ran tsc as bun run tsc it gives the same error:

error TS2792: Cannot find module 'preact'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

[rschristian]

Please provide a repo we can check out then, it's not productive nor a good use of maintainers' time to play guess and check.

P.S. The preact setup looks way overcomplicated, basically all there should be is 4 files preact.js, preact/hooks.js and corresponding d.ts files.

If you're referring to our build outputs, we need to support many different environments and users. Your suggestion would be wildly insufficient, hence our current setup (no one likes tooling; where it exists, it's necessary -- most of the time, anyhow).

That's not to say we're perfect, our browser build is entirely redundant I believe, but 4 files would not come close to cutting it. The CJS and UMD builds are still heavily used.