Yarn Build error on Jenkins TS2322: Type '{ children: Element; key: - node.js

`TS2322: Type '{ children: Element; key: any; as: ForwardRefExoticComponent<NavLinkProps & RefAttributes>; to: any; activeClassName: string; className: string; }' is not assignable to type 'IntrinsicAttributes & Omit<NavLinkProps & RefAttributes, BsPrefixProps<ForwardRefExoticComponent<NavLinkProps & RefAttributes<...>>> & NavLinkProps> & BsPrefixProps<...> & NavLinkProps & { ...; }'.
Property 'activeClassName' does not exist on type 'IntrinsicAttributes & Omit<NavLinkProps & RefAttributes, BsPrefixProps<ForwardRefExoticComponent<NavLinkProps & RefAttributes<...>>> & NavLinkProps> & BsPrefixProps<...> & NavLinkProps & { ...; }'.
59 | as={NavLink}
60 | to={subitems.path}
61 | activeClassName="text-white rna-analytictab-item-active"
| ^^^^^^^^^^^^^^^
62 | className="rna-analytictab-item"
63 | >
64 |
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`
This is the error I'm getting on Jenkins but on running it on /tmp location its working. Locally also its working file. The problem comes only when its in /var/lib/jenkins/workspace/ Yarn version is 1.22.17 and node is 14.19

Related

'error TS2300: Duplicate identifier 'DocumentQuery' from ts-mongoose and and mongoose

I am trying to run a local copy of a server I am working on with the following packages.
"dependencies": {
"#types/mongodb": "^4.0.7",
"cors": "^2.8.5",
"express": "^4.18.2",
"mongoose": "^5.10.19",
"nodemon": "^2.0.20",
"ts-mongoose": "0.0.24",
"typescript": "3.9.5"
}
However, when I try to run this very basic app I get the following error message.
node_modules/mongoose/index.d.ts:3033:8 - error TS2300: Duplicate identifier 'DocumentQuery'.
After a bit of googling, I /think/ the issue is that both mongoose and mongoose TS are declaring the same identifier. But I'm unsure how to fix it. I'm also unsure of what info needs to be included as well. The code for the app doesn't actually include DocumentQuery, so I find that confusing as well. What should be my next steps in terms of identify and solving the issue?
Here is a full copy of the error.
node_modules/mongoose/index.d.ts:3033:8 - error TS2300: Duplicate identifier 'DocumentQuery'.
3033 type DocumentQuery<ResultType, DocType extends Document, THelpers = {}> = Query<ResultType, DocType, THelpers>;
~~~~~~~~~~~~~
node_modules/ts-mongoose/plugin.d.ts:4:15
4 interface DocumentQuery<T, DocType extends Document, QueryHelpers = {}> extends mquery {
~~~~~~~~~~~~~
'DocumentQuery' was also declared here.
node_modules/ts-mongoose/plugin.d.ts:4:15 - error TS2300: Duplicate identifier 'DocumentQuery'.
4 interface DocumentQuery<T, DocType extends Document, QueryHelpers = {}> extends mquery {
~~~~~~~~~~~~~
node_modules/mongoose/index.d.ts:3033:8
3033 type DocumentQuery<ResultType, DocType extends Document, THelpers = {}> = Query<ResultType, DocType, THelpers>;
~~~~~~~~~~~~~
'DocumentQuery' was also declared here.
node_modules/ts-mongoose/plugin.d.ts:5:103 - error TS2344: Type 'T & Document<any, any, any>' does not satisfy the constraint 'Document<any, any, any>'.
The types of 'replaceOne(...).$where(...).and' are incompatible between these types.
Type '(array: _FilterQuery<T & Document<any, any, any>>[]) => Query<(T & Document<any, any, any>)[], T & Document<any, any, any>, {}, T & Document<...>>' is not assignable to type '(array: _FilterQuery<Document<any, any, any>>[]) => Query<Document<any, any, any>[], Document<any, any, any>, {}, Document<any, any, any>>'.
Types of parameters 'array' and 'array' are incompatible.
Type '_FilterQuery<Document<any, any, any>>[]' is not assignable to type '_FilterQuery<T & Document<any, any, any>>[]'.
Type '_FilterQuery<Document<any, any, any>>' is not assignable to type '_FilterQuery<T & Document<any, any, any>>'.
Type '_FilterQuery<Document<any, any, any>>' is not assignable to type '{ [P in keyof (T & Document<any, any, any>)]?: Condition<[Extract<(T & Document<any, any, any>)[P], ObjectId>] extends [never] ? (T & Document<any, any, any>)[P] : string | (T & Document<...>)[P]>; }'.
5 populateTs<P extends keyof MaybeItem<NonNullable<T>>>(prop: P): DocumentQuery<Populate<T, P>, T & Document> & QueryHelpers;
~~~~~~~~~~~~
node_modules/ts-mongoose/types/extract.d.ts:10:136 - error TS2344: Type 'R & SubDocument' does not satisfy the constraint 'SubDocument'.
Types of property 'overwrite' are incompatible.
Type '(obj: DocumentDefinition<R & SubDocument>) => R & SubDocument' is not assignable to type '(obj: DocumentDefinition<SubDocument>) => SubDocument'.
Types of parameters 'obj' and 'obj' are incompatible.
Type 'DocumentDefinition<SubDocument>' is not assignable to type 'DocumentDefinition<R & SubDocument>'.
10 declare type DeepExtractProps<T> = T extends ((infer R & SubDocument) | (infer R & SubDocumentNoId)) ? R : T extends (SubDocumentArray<infer R & SubDocument> | SubDocumentArrayNoId<infer R & SubDocumentNoId>) ? Array<{
~~~~~~~~~~~~~~~~~~~~~
node_modules/ts-mongoose/types/singleType.d.ts:21:173 - error TS2344: Type 'Extract<T> & SubDocument' does not satisfy the constraint 'SubDocument'.
Types of property 'overwrite' are incompatible.
Type '(obj: DocumentDefinition<Extract<T> & SubDocument>) => Extract<T> & SubDocument' is not assignable to type '(obj: DocumentDefinition<SubDocument>) => SubDocument'.
Types of parameters 'obj' and 'obj' are incompatible.
Type 'DocumentDefinition<SubDocument>' is not assignable to type 'DocumentDefinition<Extract<T> & SubDocument>'.
21 export declare type ArrayOfElements<T> = IsSchemaType<T, ExtractOptions<T> extends OptionIdDisabled ? SubDocumentArrayNoId<Extract<T> & SubDocumentNoId> : SubDocumentArray<Extract<T> & SubDocument>, Array<T>>;

Getting typescript errors while deploying the node app to heroku

I have been trying to deploy my typescript based node server to heroku but getting the following error while deployment
-----> Build
Running build
> autoscan-back-end#1.0.0 build
> rimraf dist && tsc
src/services/notification/notification.service.ts(46,37): error TS2322: Type 'string | ObjectId' is not assignable to type 'Condition<string>'.
Type 'ObjectId' is not assignable to type 'Condition<string>'.
src/services/report/report.service.ts(53,35): error TS2769: No overload matches this call.
Overload 1 of 3, '(callback?: Callback<ReportType[]>): Query<ReportType[], ReportType, {}, ReportType>', gave the following error.
Argument of type '{ _id?: string; admin: string | Types.ObjectId; status?: string; containsDublicates?: boolean; stickers?: [Types.ObjectId]; }' is not assignable to parameter of type 'Callback<ReportType[]>'.
Type '{ _id?: string; admin: string | ObjectId; status?: string; containsDublicates?: boolean; stickers?: [ObjectId]; }' provides no match for the signature '(error: NativeError, result: ReportType[]): void'.
Overload 2 of 3, '(filter: FilterQuery<ReportType>, callback?: Callback<ReportType[]>): Query<ReportType[], ReportType, {}, ReportType>', gave the following error.
Argument of type '{ _id?: string; admin: string | Types.ObjectId; status?: string; containsDublicates?: boolean; stickers?: [Types.ObjectId]; }' is not assignable to parameter of type 'FilterQuery<ReportType>'.
Type '{ _id?: string; admin: string | Types.ObjectId; status?: string; containsDublicates?: boolean; stickers?: [Types.ObjectId]; }' is not assignable to type '{ _id?: any; admin?: Condition<string>; status?: Condition<string>; containsDublicates?: Condition<boolean>; stickers?: Condition<[ObjectId]>; ... 55 more ...; validateSync?: Condition<...>; }'.
Types of property 'admin' are incompatible.
Type 'string | ObjectId' is not assignable to type 'Condition<string>'.
Type 'ObjectId' is not assignable to type 'Condition<string>'.
Overload 3 of 3, '(filter: FilterQuery<ReportType>, projection?: any, options?: QueryOptions, callback?: Callback<ReportType[]>): Query<...>', gave the following error.
Argument of type '{ _id?: string; admin: string | Types.ObjectId; status?: string; containsDublicates?: boolean; stickers?: [Types.ObjectId]; }' is not assignable to parameter of type 'FilterQuery<ReportType>'.
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
the project is running smoothly without any error locally, getting this on heroku only
Actually ts was checking the query response from mongodb, which was ignored in other functions but not these.
So I just added //#ts-ignore before the line 53 and 46 to ingore just like other query functions

Add Icons to project Material Table error

I`m try to do this https://github.com/mbrn/material-table but I get error. I think there is a problem because I use TSX not JSX? do you know how to fix?
No overload matches this call.
Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; color?: "primary" | "secondary" | "disabled" | "error" | "inherit" | "action" | undefined; fontSize?: "inherit" | ... 3 more ... | undefined; htmlColor?: string | undefined; shapeRendering?: string | undefined; titleAccess?: string | undefined; viewBox?: string | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.
Property 'component' is missing in type '{ ref: ((instance: unknown) => void) | MutableRefObject<unknown> | null; children?: ReactNode; }' but required in type '{ component: ElementType<any>; }'.
Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element', gave the following error.
Type '((instance: unknown) => void) | MutableRefObject<unknown> | null' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.
Type 'MutableRefObject<unknown>' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.
Type 'MutableRefObject<unknown>' is not assignable to type 'RefObject<SVGSVGElement>'.ts(2769)
OverridableComponent.d.ts(17, 7): 'component' is declared here.
and here
No overload matches this call.
Overload 1 of 2, '(props: Readonly<MaterialTableProps<{ name: string; surname: string; birthYear: number; birthCity: number; }>>): MaterialTable<{ name: string; surname: string; birthYear: number; birthCity: number; }>', gave the following error.
Type '{ Add: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>; Check: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>; Clear: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>; ... 13 more ...; ViewColumn: React.ForwardRefExoticComponent<...>; }' is not assignable to type 'Icons'.
The types of 'Add.defaultProps' are incompatible between these types.
Type 'Partial<RefAttributes<unknown>> | undefined' is not assignable to type 'Partial<RefAttributes<SVGSVGElement>> | undefined'.
Type 'Partial<RefAttributes<unknown>>' is not assignable to type 'Partial<RefAttributes<SVGSVGElement>>'.
Types of property 'ref' are incompatible.
Type '((instance: unknown) => void) | RefObject<unknown> | null | undefined' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.
try this
forwardRef<SVGSVGElement>
in the icons
or
import Icons like this:
import MaterialTable, { Icons } from 'material-table'
const tableIcons: Icons = {...}

How do I use local TypeScript with npm on an isolated file in a larger project?

I have an Expo TypeScript project with some scratch TypeScript files that I would like to test by running tsc (and then node on the emitted JS). But doing so results in unexpected errors, and fails to report legitimate expected TS errors.
I have a (correctly, I believe) configured TypeScript locally installed with npm, as confirmed by
$ ./node_modules/typescript/bin/tsc --version
Version 3.5.3
but when I try use tsc on a TypeScript file I get unexpected errors, such as those listed below following execution of
npx tsc somefile.ts
Moreover, tsc (at least when invoked as above) fails to emit any expected errors or compiler warnings, such as should be generated from, for example
let foo: number = 5
foo = null
Nonetheless, the expected _somefile.js is generated and runs as expected (ignoring errors).
How do I get tsc to detect errors in my .ts file, and avoid having it report numerous errors in other modules associated with my project installation?
Output from npx tsc somefile.ts, abbreviated:
node_modules/#types/react-native/globals.d.ts:40:15 - error TS2300: Duplicate identifier 'FormData'.
40 declare class FormData {
~~~~~~~~
node_modules/typescript/lib/lib.dom.d.ts:5353:11
5353 interface FormData {
~~~~~~~~
'FormData' was also declared here.
node_modules/typescript/lib/lib.dom.d.ts:5363:13
5363 declare var FormData: {
~~~~~~~~
and here.
node_modules/#types/react-native/globals.d.ts:85:5 - error TS2717: Subsequent property declarations must have the same type. Property 'body' must be of type 'BodyInit', but here has type 'string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData'.
85 body?: BodyInit_;
~~~~
node_modules/typescript/lib/lib.dom.d.ts:1413:5
1413 body?: BodyInit | null;
~~~~
'body' was also declared here.
node_modules/#types/react-native/globals.d.ts:111:14 - error TS2300: Duplicate identifier 'RequestInfo'.
111 declare type RequestInfo = Request | string;
~~~~~~~~~~~
node_modules/typescript/lib/lib.dom.d.ts:18568:6
18568 type RequestInfo = Request | string;
~~~~~~~~~~~
'RequestInfo' was also declared here.
node_modules/#types/react-native/globals.d.ts:130:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'Response' must be of type '{ new (body?: BodyInit, init?: ResponseInit): Response; prototype: Response; error(): Response; redirect(url: string, status?: number): Response; }', but here has type '{ new (body?: string | ArrayBuffer | DataView | Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | Blob | FormData, init?: ResponseInit): Response; prototype: Response; error: () => Response; redirect: (url: string, status?: number) => Res...'.
130 declare var Response: {
~~~~~~~~
node_modules/typescript/lib/lib.dom.d.ts:12463:13
12463 declare var Response: {
~~~~~~~~
'Response' was also declared here.
node_modules/#types/react-native/globals.d.ts:253:14 - error TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
253 declare type XMLHttpRequestResponseType = "" | "arraybuffer" | "blob" | "document" | "json" | "text";
~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/typescript/lib/lib.dom.d.ts:18746:6
18746 type XMLHttpRequestResponseType = "" | "arraybuffer" | "blob" | "document" | "json" | "text";
~~~~~~~~~~~~~~~~~~~~~~~~~~
'XMLHttpRequestResponseType' was also declared here.
[...]
node_modules/typescript/lib/lib.dom.d.ts:18746:6 - error TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.
18746 type XMLHttpRequestResponseType = "" | "arraybuffer" | "blob" | "document" | "json" | "text";
~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/#types/react-native/globals.d.ts:253:14
253 declare type XMLHttpRequestResponseType = "" | "arraybuffer" | "blob" | "document" | "json" | "text";
~~~~~~~~~~~~~~~~~~~~~~~~~~
'XMLHttpRequestResponseType' was also declared here.
Found 12 errors.
Contents of tsconfig.json:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"strict": true
}
}
The dependences in project.json:
"dependencies": {
"expo": "^34.0.4",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
"react-native-web": "^0.11.5",
"native-base": "^2.13.4",
"redux": "^4.0.4",
"react-redux": "^7.1.0"
},
These errors occur because both React Native and the standard dom modules define the same types.
Delete whichever of those you aren't using.

ant-design: bad type declarations?

There is this tutorial on the main page: https://ant.design/docs/react/use-in-typescript it shows some example code that does not compile. In particular, <Button type="primary">Button</Button> does not compile because it should be htmlType and not type. Can somebody please confirm that this is true? Or is it just a problem with my installation?
Another problem I have noticed is that props for Button have bad type declaration. At least on my computer. I just installed antd, and I have this NativeButtonProps, which has htmlType?: ButtonHTMLType, and that is declared as: export declare type ButtonHTMLType = 'submit' | 'button' | 'reset';
This is very confusing because the documentation says that there are types called "primary" "dashed" and "danger". Is this also a problem with the declaration?
Is it possible that I have a broken installation but I doubt. I have tried to install everything from scratch on a computer that had no node.js installed. But the result is the same. What am I doing wrong?
UPDATE more details on the problem. If I use this code:
<Button type="primary">Buttonka</Button>
Then I get this compilation error and it won't generate js code:
C:/TypeScript/antd-demo-ts/src/App.tsx
(10,10): Type '{ children: string; type: "primary"; }' is not assignable to type '(IntrinsicAttributes & IntrinsicClassAttributes & Pick & Readonly & Pick, "htmlType">, "color" | ... 258 more ... | "htmlType"> & Partial<...> & Partial<...>) | ...'.
Type '{ children: string; type: "primary"; }' is not assignable to type 'Pick & Readonly & Pick, "htmlType">, "color" | ... 262 more ... | "value">'.
Property 'htmlType' is missing in type '{ children: string; type: "primary"; }'.
If I use htmlType="primary" instead, then I get the following warning:
{
"resource": "/c:/TypeScript/antd-demo-ts/src/App.tsx",
"owner": "typescript",
"code": "2322",
"severity": 8,
"message": "Type '{ children: string; htmlType: \"primary\"; }' is not assignable to type '(IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & R...'.\n Type '{ children: string; htmlType: \"primary\"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Re...'.\n Type '{ children: string; htmlType: \"primary\"; }' is not assignable to type 'Readonly'.\n Types of property 'htmlType' are incompatible.\n Type '\"primary\"' is not assignable to type '\"submit\" | \"button\" | \"reset\" | undefined'.",
"source": "ts",
"startLineNumber": 10,
"startColumn": 10,
"endLineNumber": 10,
"endColumn": 16
}
and in this case the TypeScript code is compiled, but the button is shown as opaque/white, and it is not primary/blue.
It is a fact that the css has been imported into App.tsx:
import './App.css';
and also the ant design css has been imported in App.css:
#import '~antd/dist/antd.css';
But either way, I can't set the primary (blue) style on the button.

Resources