1

I'm new to JS world. Please let me know the correct way and where did I go wrong. Thank you so much!

My project use Vite^4.3.2, React^18.2.0 & Typescript^5.0.4. I have to use an specific external react components library with pnpm v7.14.0 and node v16.20.0 (project specs required that).

The problem: Typescript and vscode's intellisense can't detect the props type of components from that lib: Alway show any, so I don't know what props the component has and the types of each. The intellisense work as expected with other libraries such as formik, dayjs, react-router-dom, it shows type correctly.

There are no ESlint error. I checked pnpm dev or build production then preview it, my app functions work fine on both env.

My tsconfig.json file is basically the same as the default created by Vite:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": true,

    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["./src"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

vite.config.ts

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react-swc';
// import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths(), svgr()],
  server: {
    open: true,
  },
  build: {
    commonjsOptions: {
      ignoreTryCatch: false,
    },
  },
});

I have no idea how to make intellisense can detect the props of components like this: enter image description here

So i tried to change moduleResolution to node and add "allowSyntheticDefaultImports": true to tsconfig.json then restart vscode. But vscode intellisense loading forever only on this project.

Typescript of my workspace and VSCode are the same version 5.0.4

Additional info:

Env: Windows 11 - 22H2, nodejs v16.20.0, pnpm v7.14.0, VSCode v1.78.2 (user setup), .

This is declare from node_modules Component of external lib

That @stitches... is already on node_modules/.pnpm

Kai
  • 11
  • 2

0 Answers0