Multiple errors in ServiceStack Angular client - servicestack

We just started getting these errors when building our Angular project
Error: node_modules/#servicestack/client/dist/index.d.ts:484:20 - error TS1005: ';' expected.
484 get completed(): boolean;
~
Error: node_modules/#servicestack/client/dist/index.d.ts:484:22 - error TS2693: 'boolean' only refers to a type, but is being used as a value here.
484 get completed(): boolean;
~~~~~~~
Error: node_modules/#servicestack/client/dist/index.d.ts:484:5 - error TS1131: Property or signature expected.
484 get completed(): boolean;
using "#servicestack/client": "^1.1.17"

We fixed by using "#servicestack/client": "1.0.59"

Related

TypeError: TextEncoder is not a constructor

I was trying to run tests using supertest in nodejs and I got this error message
ReferenceError: TextEncoder is not defined
Then i was advised to locate the file "node_modules/whatwg-url/lib/encoding.js" and add this lines of code at the top
const { TextEncoder, TextDecoder } = require("./utils");
After i did that, i started getting this message
TypeError: TextEncoder is not a constructor
please, i am using node version 17.4.0

Suddenly getting Typescript error TS2322, type not assignable errors during build process

I have APIs written in lambda, exposed via API Gateway using Koa. I use AWS Codebuild for my deployment.
Recently Codebuild has started throwing the following error when the build process starts:
src/components/chart-color-settings/chart-color-settings.ts(11,13): error TS2322: Type 'string | string[] | undefined' is not assignable to type 'string | undefined'.
Type 'string[]' is not assignable to type 'string'.
It throws this error in some of the files where I am reading query param and passing it to a function.
For example
import { Context } from "koa";
static async getChartColorSetting(ctx: Context) {
const handlerFactory = ChartColorSettingsHandlerFactory.getInstance(dbService);
let chartType: string | undefined = ctx.request.query.chartType; //this is where it says the problem is
let result = await handlerFactory.getChartColorSetting(chartType)
//rest of the code
}
Earlier it never complained about this problem. Suddenly it has started failing the builds because it "thinks" it will receive either string[] in the ctx.request.query or the function accepts some other type of param
Nothing has changed in that code, also it is showing similar build failure errors in other places where I am reading from ctx.request.query and giving me "not assignable" errors
Codebuild error below:
Whereas the actual code for the error it is talking about looks like this:
As you can see from the code screenshot from above that the method tranlateHolidayInShifts is expecting the right type of params as read via the ctx.request.query.
I have no idea to what has caused this all of a sudden.
Any ideas or suggestions to fix this once and for all so the builds don't keep failing.
Thank you.
Error said type string[] is not assignable to type 'string', So i think u can try declare ur variable from string to array of string:
let chartType: string[] | undefined = ctx.request.query.chartType;
The reason this error may have suddenly appeared is because you're not committing either the "package-lock.json" or "yarn.lock" files.

Unexpected token, expected "," when trying to use react rendering

The code I had used to work, but after doing a lot of major updates to packages I have been working through some errors. The one that has me stuck right now is the following:
renderDateTextField = (props: TextFieldProps) => {
return (<TextField
className={`${styles.datesContainer} ${styles.textfield}`}
onClick={props.onClick}
value={props.value}
{...props}
/>);
};
Here is the error message:
ERROR in ./src/components/Desk/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /var/www/FlaskApp/people-app-prod/static/src/components/Desk/index.js: Unexpected token, expected "," (604:32)
602 | };
603 |
> 604 | renderDateTextField = (props: TextFieldProps) => {
| ^
605 | return (<TextField
606 | className={`${styles.datesContainer} ${styles.textfield}`}
607 | onClick={props.onClick}
I am personally not as familiar with this code/react and am a new developer on this project trying to get things updated. It's unclear what the problem was here and why it is being triggered when building now, but older versions of the packages did not have issues.
Edit:
Previously in babel I the es2015 preset was being used, this has now been changed to #babel/preset-env as suggested on the babel page since es2015 is deprecated: https://babeljs.io/docs/en/babel-preset-es2015 . I am wondering if this is related to the problem.
It looks like that code is using the Flow typing system. I would check to see that Flow is properly configured.

How to fix Typescript compilation error ts2345 "Type 'Response' is missing ... from type 'Response': redirected, trailer, formData!"

I am trying to make a request using node-fetch in my typescript project and I do not understand how to fix the compilation error or what it actually tries to tell me.
I've updated all packages (including the global typescript package) to the latest versions.
I've created a gist that isolates the error: https://gist.github.com/HerrZatacke/ae90f608e042864b6e00e9c73a950602
This (very short) script is able to reproduce the compilation error:
import fetch from 'node-fetch';
const toJson = (response: Response):PromiseLike<object> => (
response.json()
);
const makeSomeRequest = (): Promise<object> => {
return fetch('https://some-api.com/')
.then(toJson)
};
makeSomeRequest();
The installed versions used are
#types/node-fetch 2.3.7
node-fetch2.6.0
typescript 3.5.2
the actual error is
example.ts:9:11 - error TS2345: Argument of type '(response: Response) => PromiseLike<object>' is not assignable to parameter of type '(value: Response) => object | PromiseLike<object>'.
Types of parameters 'response' and 'value' are incompatible.
Type 'Response' is missing the following properties from type 'Response': redirected, trailer, formData
With the help/hints of the two commenters above (thanks a lot), I managed to find the reason and a solution for that error:
Typescript initially tries to "guess" which types you are using.
The following line states I want to use the type response, which is an interface of the native Fetch API
const toJson = (response: Response): Promise<object> => {
the type definition for it can be found in lib.dom.d.ts
node-fetch instead is implementing it's own Response type from #types\node-fetch\index.d.ts
So, if the correct response type is being imported first, the typescript compiler runs without the error.
Which means, instead of just importing node-fetch, you also have to import it's definition of Response:
import fetch, { Response } from 'node-fetch';

Nuxt.js end to end testing errors after following documentation also using nuxt-auth

Edit: Reduced test case https://github.com/mkstix6/nuxt-e2e-testing-auth-bug
I'm following the nuxt.js e2e testing documentation here:
https://nuxtjs.org/guide/development-tools#end-to-end-testing
I am also using the nuxt-auth module (https://auth.nuxtjs.org)
When I follow the documentation and run npm test I get errors.
The first few lines are [edit: expanded this a bit]:
Entrypoint app = 7e99177222eb06aee534.js f26c11108ae3834e1137.js 3e276f5900ac5332c193.js
[12:04:56 PM] Compiling server
[12:05:01 PM] Compiled server in 5s
Hash: 944950bfae0ad00400a8
Version: webpack 4.20.2
Time: 4945ms
Built at: 10/16/2018 12:05:01 PM
Asset Size Chunks Chunk Names
server-bundle.json 995 KiB [emitted]
Entrypoint app = server-bundle.js
[Vue warn]: Property or method "$auth" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based comp
onents, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Default> at default.vue
<Root>
[Vue warn]: Error in render: "TypeError: Cannot read property '$state' of undefined"
found in
---> <Default> at default.vue
<Root>
[Vue warn]: Property or method "$auth" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based comp
onents, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Default> at default.vue
<Root>
[Vue warn]: Error in render: "TypeError: Cannot read property '$state' of undefined"
found in
---> <Default> at default.vue
<Root>
[12:05:02 PM] TypeError: Cannot read property '$state' of undefined
at Proxy.defaultvue_type_template_id_706d1520_render (server-bundle.js:2010:28)
at VueComponent.Vue._render (/PROJECT_PATH/node_modules/vue/dist/vue.runtime.common.js:4542:22)
at renderComponentInner (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:7532:25)
at renderComponent (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:7502:5)
at RenderContext.renderNode (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:7418:5)
at RenderContext.next (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:2436:14)
at cachedWrite (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:2295:9)
at renderElement (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:7656:5)
at renderNode (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:7420:5)
at renderComponentInner (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:7538:3)
at renderComponent (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:7502:5)
at RenderContext.renderNode (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:7418:5)
at RenderContext.next (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:2436:14)
at RenderContext.next (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:2449:12)
at cachedWrite (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:2295:9)
at renderElement (/PROJECT_PATH/node_modules/vue-server-renderer/build.js:7646:5)
2 failed
Route / exits and render HTML
/PROJECT_PATH/server-bundle.js:2010
Rejected promise returned by test. Reason:
TypeError {
message: 'Cannot read property \'$state\' of undefined',
}
Proxy.defaultvue_type_template_id_706d1520_render (server-bundle.js:2010:28)
VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.js:4542:22)
renderComponentInner (node_modules/vue-server-renderer/build.js:7532:25)
renderComponent (node_modules/vue-server-renderer/build.js:7502:5)
RenderContext.renderNode (node_modules/vue-server-renderer/build.js:7418:5)
RenderContext.next (node_modules/vue-server-renderer/build.js:2436:14)
cachedWrite (node_modules/vue-server-renderer/build.js:2295:9)
renderElement (node_modules/vue-server-renderer/build.js:7656:5)
renderNode (node_modules/vue-server-renderer/build.js:7420:5)
renderComponentInner (node_modules/vue-server-renderer/build.js:7538:3)
renderComponent (node_modules/vue-server-renderer/build.js:7502:5)
RenderContext.renderNode (node_modules/vue-server-renderer/build.js:7418:5)
RenderContext.next (node_modules/vue-server-renderer/build.js:2436:14)
RenderContext.next (node_modules/vue-server-renderer/build.js:2449:12)
cachedWrite (node_modules/vue-server-renderer/build.js:2295:9)
renderElement (node_modules/vue-server-renderer/build.js:7646:5)
Route / exits and render HTML with CSS applied
/PROJECT_PATH/node_modules/request-promise-core/lib/errors.js:32
Rejected promise returned by test. Reason:
StatusCodeError {
error: Buffer #Uint8Array [
I have tried the advice in the "Declaring Reactive Properties" page – as hinted to in the error – but I'm quite new to nuxt.js and vue.js; I may have gotten it wrong.
I'm looking for some advice on how to move past these errors.
Thanks for reading.

Resources