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.
Related
I am building a GraphQL lambda server with typescript#4.9.4 graphql#15.8.0 apollo-server-lambda#2.19.0, but got the following error:
node_modules/apollo-link/lib/types.d.ts(5,18): error TS2430: Interface 'ExecutionResult<TData>' incorrectly extends interface 'ExecutionResult<{ [key: string]: any; }, { [key: string]: any; }>'
Types of property 'data' are incompatible.
Type 'TData | null | undefined' is not assignable to type '{ [key: string]: any; } | null | undefined'.
Type 'TData' is not assignable to type '{ [key: string]: any; } | null | undefined'.
Type 'TData' is not assignable to type '{ [key: string]: any; }'.
Any suggestions on how to fix this issue?
Have tried to install different graphql versions ^14.0.0 ^16.0.0? They did not work.
package.json dependencies:
"#aws-sdk/client-kms": "^3.16.0",
"apollo-server-lambda": "2.19.0",
"aws-embedded-metrics": "^2.0.4",
"axios": "^0.24.0",
"axios-retry": "^3.2.5",
"graphql": "^15.5.0",
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 = {...}
I'm getting this error below when I run: npm run clear && tsc -P ./tsconfig.app.json && npm run post:build or tsc -p .
node version: v12.13.0
npm: v6.14.2
Express: 4
Does someone already have the same problem?
> tsc -p .
node_modules/#types/readable-stream/index.d.ts:14:15 - error TS2417: Class static side 'typeof _Readable' incorrectly extends base class static side 'typeof Readable'.
The types of '(new Stream.Readable.Duplex(...))._destroy' are incompatible between these types.
Type '(err: Error | null, callback: (error: Error | null) => void) => void' is not assignable to type '(error: Error | null, callback: (error?: Error | undefined) => void) => void'.
Types of parameters 'callback' and 'callback' are incompatible.
Types of parameters 'error' and 'error' are incompatible.
Type 'Error | null' is not assignable to type 'Error | undefined'.
Type 'null' is not assignable to type 'Error | undefined'.
14 declare class _Readable extends stream.Readable {
~~~~~~~~~
node_modules/#types/readable-stream/index.d.ts:88:9 - error TS2416: Property '_destroy' in type 'Duplex' is not assignable to the same property in base type 'Duplex'.
Type '(err: Error | null, callback: (error: Error | null) => void) => void' is not assignable to type '(error: Error | null, callback: (error?: Error | undefined) => void) => void'.
Types of parameters 'callback' and 'callback' are incompatible.
Types of parameters 'error' and 'error' are incompatible.
Type 'Error | null' is not assignable to type 'Error | undefined'.
Type 'null' is not assignable to type 'Error | undefined'.
88 _destroy(err: Error | null, callback: (error: Error | null) => void): void;
~~~~~~~~
node_modules/#types/readable-stream/index.d.ts:88:9 - error TS2416: Property '_destroy' in type 'Duplex' is not assignable to the same property in base type 'Writable'.
Type '(err: Error | null, callback: (error: Error | null) => void) => void' is not assignable to type '(error: Error | null, callback: (error?: Error | undefined) => void) => void'.
Types of parameters 'callback' and 'callback' are incompatible.
Types of parameters 'error' and 'error' are incompatible.
Type 'Error | null' is not assignable to type 'Error | undefined'.
Type 'null' is not assignable to type 'Error | undefined'.
88 _destroy(err: Error | null, callback: (error: Error | null) => void): void;
~~~~~~~~
node_modules/#types/readable-stream/index.d.ts:88:9 - error TS2416: Property '_destroy' in type 'Duplex' is not assignable to the same property in base type '_Readable'.
Type '(err: Error | null, callback: (error: Error | null) => void) => void' is not assignable to type '(error: Error | null, callback: (error?: Error | undefined) => void) => void'.
Types of parameters 'callback' and 'callback' are incompatible.
Types of parameters 'error' and 'error' are incompatible.
Type 'Error | null' is not assignable to type 'Error | undefined'.
Type 'null' is not assignable to type 'Error | undefined'.
88 _destroy(err: Error | null, callback: (error: Error | null) => void): void;
~~~~~~~~
node_modules/#types/readable-stream/index.d.ts:102:11 - error TS2720: Class '_Readable.PassThrough' incorrectly implements class 'import("stream").PassThrough'. Did you mean to extend 'import("stream").PassThrough' and inherit its members as a subclass?
Types of property '_destroy' are incompatible.
Type '(err: Error | null, callback: (error: Error | null) => void) => void' is not assignable to type '(error: Error | null, callback: (error?: Error | undefined) => void) => void'.
Types of parameters 'callback' and 'callback' are incompatible.
Types of parameters 'error' and 'error' are incompatible.
Type 'Error | null' is not assignable to type 'Error | undefined'.
Type 'null' is not assignable to type 'Error | undefined'.
102 class PassThrough extends Transform implements stream.PassThrough {
~~~~~~~~~~~
node_modules/#types/readable-stream/index.d.ts:138:18 - error TS2749: 'StringDecoder' refers to a value, but is being used as a type here.
138 decoder: StringDecoder | null;
~~~~~~~~~~~~~
node_modules/#types/readable-stream/index.d.ts:164:11 - error TS2720: Class '_Readable.Transform' incorrectly implements class 'import("stream").Transform'. Did you mean to extend 'import("stream").Transform' and inherit its members as a subclass?
Types of property '_destroy' are incompatible.
Type '(err: Error | null, callback: (error: Error | null) => void) => void' is not assignable to type '(error: Error | null, callback: (error?: Error | undefined) => void) => void'.
Types of parameters 'callback' and 'callback' are incompatible.
Types of parameters 'error' and 'error' are incompatible.
Type 'Error | null' is not assignable to type 'Error | undefined'.
Type 'null' is not assignable to type 'Error | undefined'.
164 class Transform extends Duplex implements stream.Transform {
~~~~~~~~~
Found 7 errors.
Try adding
"#types/node": "^12.12.7"
to devDependencies in package.json. then,
npm install
It worked for me. Cheers!!
I am trying to setup jest with my react-native app. I created a simple test case and while running npm test, I get the following error
FAIL __tests__/actionsSpecs.js
● Test suite failed to run
/Users/abc/Projects/MyApp/node_modules/react-native/Libraries/Renderer/src/renderers/shared/hooks/ReactHostOperationHistoryHook.js: Unexpected token (20:4)
18 | & {instanceID: DebugID}
19 | & (
> 20 | | {type: 'mount', payload: string}
| ^
21 | | {type: 'insert child', payload: {toIndex: number, content: string}}
22 | | {type: 'move child', payload: {fromIndex: number, toIndex: number}}
23 | | {type: 'replace children', payload: string}
Basically, it is failing on a flow type declaration. I have tried using flow babel preset and transform-flow-strip-types but that didn't help.
Below is my jest configuration in package.json
"jest": {
"preset": "react-native",
"setupFiles": [
"./setup.js"
],
"transformIgnorePatterns": [ "node_modules/(?!react-native)" ]
}
This is the .babelrc file
{
"presets": ["react-native", "flow"]
}
It looks like the flow preset didn't get rid of the flow types during transpilation but I don't know how to get it to work now.
Please let me know if you know what is wrong.
You need more than just presets, you also need a transform that strips flowtypes. Usually this is done with with the babel plugin babel-plugin-transform-flow-strip-types.
Your .babelrc file should look something like this:
{
"presets": [
"react-native"
],
"plugins": [
"transform-flow-strip-types"
]
}
Edit: Another possibility is that your flow syntax is incorrect, and the transform doesn't know how to handle it. It looks to me from the snippet you've pasted that there's an extra | preceding the object definition on line 20. Does removing that change the output at all?
When I install NodeJs module, there is a bug in the running.
request module is the latest version:
npm install request
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ./~/request/~/tough-cookie/package.json
Module parse failed: /Users/DongYao/Develop/proj-1/weicang_c/node_modules/request/node_modules/tough-cookie/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "author": {
| "name": "Jeremy Stashewsky",
| "email": "jstashewsky#salesforce.com"
# ./~/request/~/tough-cookie/lib/cookie.js 38:14-40./~/request/~/mime-types/~/mime-db/db.json
Module parse failed: /Users/DongYao/Develop/proj-1/weicang_c/node_modules/request/node_modules/mime-types/node_modules/mime-db/db.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "application/1d-interleaved-parityfec": {
| "source": "iana"
| },
==================
and more.........
Please help me.