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.