Solve the declaration error of the import module of React18+ts project

path configuration

The configuration ts of the project path alias
does not support the directory prompt that @ points to src,
so you need to manually configure the @ symbol to point
to vite.config.ts

import path from 'path'
export default defineConfig({
    
    
	plugins:[react()],
	resolve:{
    
    
		alias:{
    
    
		"@":path.resolve(__dirname, './src')
		}
	}
})
	

But at this time, an error will be reported when the path module is introduced, but in fact, we already have a node, so we already have a path module, and the knowledge lacks declaration configuration. So it is necessary to install the ts declaration configuration of the node library:

npm i -D @types/node

There is no popularity after installation. If the path behind the import becomes popular, modify the import:

import * as  path from 'path'

But at this time, if you enter @, there is no prompt for the path
. Then configure the path alias prompt in tsconfig.json

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

report error

react import module error:
import path cannot end with ".tsx" extension. Consider instead importing "./App.js"

in the declaration file vite-env.d.ts

/// <reference types="vite/client" />
declare module '*.tsx'

Error: Argument of type 'Element' cannot be assigned to parameter of type 'ReactNode'.
Type 'Element' is missing the following properties from type 'ReactPortal': key, children, type, props

in tsconfig.js

 "compilerOptions": {
    
    
	//...
    "moduleResolution": "node",
    
  },