Issue
'Link' cannot be used as a JSX component.
Its type 'ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>' is not a valid JSX element type.
Type 'ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
Once again, this never showed up. I didn't touch anything and now the whole ts codebase is broken because of non-existent errors.
Other examples:
'SortingTable' cannot be used as a JSX component.
Its type '({ rowData, filtered, initialRecords, setInitialRecords, tableName, columns, search, setSearch }: { rowData: any; filtered: any; initialRecords: any; setInitialRecords: any; tableName: any; columns: any; search: any; setSearch: any; }) => Element' is not a valid JSX element type.
Type '({ rowData, filtered, initialRecords, setInitialRecords, tableName, columns, search, setSearch }: { rowData: any; filtered: any; initialRecords: any; setInitialRecords: any; tableName: any; columns: any; search: any; setSearch: any; }) => Element' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'Element' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.ts(2786)
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686) --> FOR EVERY SINGLE HTML TAG (importing React is a practice I do not do anymore, never gave problems)
'React.StrictMode' cannot be used as a JSX component.
Its type 'ExoticComponent<{ children?: ReactNode; }>' is not a valid JSX element type.
Type 'ExoticComponent<{ children?: ReactNode; }>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
and this:
index.d.ts file inside node_modules
Subsequent property declarations must have the same type. Property 'feDisplacementMap' must be of type 'SVGProps<SVGFEDisplacementMapElement>', but here has type 'SVGProps<SVGFEDisplacementMapElement>'.ts(2717)
I leave here my tsconfig.json and tsconfig.node.json:
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.json
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
tsconfig.node.json
Solution
Ok people, a simple npm update
was enough to solve any issue.
Answered By - user74747
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.