How can I fix cypress error on github pages? - cypress

I'm getting this error when I run the tests on github pages, the app uses rails as backend and svelte for front end.
TypeError: chalk.Instance is not a constructor
at new TsconfigPathsPlugin (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/node_modules/tsconfig-paths-webpack-plugin/lib/plugin.js:17:47)
at addTypeScriptConfig (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/node_modules/#cypress/webpack-batteries-included-preprocessor/index.js:54:37)
at Object.handler (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/node_modules/#cypress/webpack-batteries-included-preprocessor/index.js:166:7)
at invoke (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:22:16)
at /home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/lib/plugins/util.js:45:14
at tryCatcher (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
at Function.Promise.attempt.Promise.try (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/method.js:39:29)
at Object.wrapChildPromise (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/lib/plugins/util.js:44:23)
at Object.wrap (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/lib/plugins/child/preprocessor.js:28:8)
at execute (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:119:27)
at EventEmitter.<anonymous> (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/lib/plugins/child/run_plugins.js:209:5)
at EventEmitter.emit (events.js:210:5)
at process.<anonymous> (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/packages/server/lib/plugins/util.js:19:22)
at process.emit (events.js:210:5)
at process.emit (/home/runner/.cache/Cypress/9.4.1/Cypress/resources/app/node_modules/source-map-support/source-map-support.js:495:21)
at emit (internal/child_process.js:876:12)
at processTicksAndRejections (internal/process/task_queues.js:81:21)
I have upgraded cypress and I still get this error I can't find references to similar error. Also have reinstalled everything fresh and did not solve the issue. Also checked my tsconfig.json
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"module": "es6",
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"*": ["node_modules/*", "app/javascript/*", "app/webpacker/*"],
"#/*": ["app/webpacker/packs/*"]
},
"sourceMap": true,
"target": "es6",
"noEmit": true,
"types": ["cypress", "cypress-file-upload"]
},
"exclude": ["**/*.spec.ts", "node_modules", "vendor", "public"],
"compileOnSave": false
}

Related

custom typescript definitions not working on windows 10

I have a Vue 2.x CLI based project that runs with typescript and vue class components. Here I want to use a package called vueisotope that has no type definition file. To make it work with typescript I changed my tsconfig.json to alternatively search for .d.ts files inside a 'customTypes' folder. I also created a customTypes/vueisotope/index.d.ts file and declared the module. On Ubuntu the project works well but on Windows 10 I still get the following error:
15:24 Could not find a declaration file for module 'vueisotope'. 'node_modules/vueisotope/dist/vue_isotope.min.js' implicitly has an 'any' type.
Try npm install #types/vueisotope if it exists or add a new declaration (.d.ts) file containing declare module 'vueisotope';
I also tried to reference the file as an ambient module but that also doesn't work:
/// <reference path = "../customTypes/vueisotope/index.d.ts" />
Am I doing something wrong here or is it a Windows/TypeScript/IDE issue? How can I bring that to work on a Windows machine?
My tsconfig:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"typeRoots": [
"./customTypes",
"./node_modules/#types"
],
"types": [
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules",
"customTypes"
]
}
my index.d.ts:
declare module "vueisotope" {
}
I simply didn't understand the typeRoots part correctly. I also had to define vueisotope inside the types part.
So the working tsconfig would be:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"typeRoots": [
"./customTypes",
"./node_modules/#types"
],
"types": [
"vueisotope",
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules",
"customTypes"
]
}

Source Map problem for NPM Google Cloud packages in VSCode

I have a large node js application. It manages HTTP REST requests. It was written in typescript. I am able to compile and run the application without any problem. In VSCode, I have a pre-launch task which basically compiles the code.
When I want to debug the application or try to add breakpoints in it with vscode, it gives me similar error messages like below:
Could not read source map for file:///Users/user/Developer/yoauto/engine/node_modules/#google-cloud/paginator/build/src/resource-stream.js: ENOENT: no such file or directory, open '/Users/user/Developer/yoauto/engine/node_modules/#google-cloud/paginator/build/src/resource-stream.js.map'
Please find my tsconfig.json and launch.json below:
{
"compilerOptions": {
"outDir": "dist/",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"strictBindCallApply": true,
"allowJs": false,
"checkJs": false,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": true,
"noEmitHelpers": true,
"lib": ["dom", "es2016", "es2017.object"],
"target": "es6",
"module": "commonjs",
"noUnusedLocals": false,
"noUnusedParameters": false,
"noEmitOnError": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": false,
"noImplicitReturns": false,
"noImplicitThis": false,
"strictNullChecks": false,
"pretty": true,
"removeComments": false,
"sourceMap": true,
"moduleResolution": "node",
"baseUrl": "src",
"paths": {
"#/*": ["./*"],
"#services/*": ["./core/services/*"],
"#domains/*": ["./core/domains/*"],
"#providers/*": ["./core/providers/*"],
"#controllers/*": ["./core/application/controllers/*"]
},
"resolveJsonModule": true
},
"include": ["./setup.ts", "./src/*", "./src/config/*.json", "setup.ts", "./_deploy/*.yaml"],
"exclude": [
"dist",
"node_modules",
"**/**/**.spec.ts",
"**/**/**.e2e.ts",
"**/**/**.spec.ts",
"**/__tests__/**"
]
}
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/dist/setup.js",
// "preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
]
}
]
}
It was working yesterday. I do not know the problem. I found the closest issue on github but not sure it's relevant though.
Publish sources and source maps to npm
I think the problem is VSCode itself since I am able to debug the application with the latest webstorm without any problem (might be wrong)
Thanks for your help
Update :
I have downgraded my vscode installation to 1.46.1 from 1.47 and it worked so I am certain that something is not right with vscode 1.47
this seems to be a problem in vsCode like spotted here https://github.com/microsoft/vscode/issues/102042.
To solve it, add those lines to your launch.json config:
"type": "pwa-node",
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**" // this lines prevent reading source maps from node_modules
],
Tell me if it helps :)

How to disable Named imports must be alphabetized - tslint

How to disable Named imports must be alphabetized - tslint ?
I am getting error:
Named imports must be alphabetized.
I don't know how to disable this error.
My tsconfig.json configuration is:
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": [
"es6",
"dom"
],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false,
"strictNullChecks": false,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
Open tslint.json and add ordered-imports to rules and restart the server (npm) if is running.
"rules": {
"ordered-imports": false
}
From this Rule of ordered-imports
Named imports must be alphabetized (i.e. “import {A, B, C} from
“foo”;”)
The exact ordering can be controlled by the named-imports-order option.
“longName as name” imports are ordered by “longName”.
Add this line to your tsconfig file:
"rules": {
"named-imports-order": "any"
}
Hope it helps.
"ordered-imports": false, works for me in VS Code.

Angular 4 startup performance

We have Angular 4 project compiled aot and bundled with rollup and without lazy loading. It takes about 3 seconds for scripting during startup. I need to reduce this time. I found examples of Angular 4 app with startup time less then 1 sec: http://www.syntaxsuccess.com/bundling-demo-rollup#/demo/spreadsheet. So I believe it's possible to reduce our startup time. Below trace from our app.
Some function calls are suspicious: build, compileComponent and _compileTemplate. This is aot compilation and still building and compilation at startup. I didn't find any useful information about it. Any suggestion about how could it happened or why it's correct are welcome.
Any suggestions on how to improve startup loading time are welcome as well.
UPD
Below sources tab
tsconfig-rollup.json
{
"extends": "./tsconfig.json",
"files": [
"temp/app/main.ts"
],
"angularCompilerOptions": {
"genDir": "temp/aot",
"skipMetadataEmit": true
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"module": "es2015",
"target": "es5",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noImplicitAny": false,
"removeComments": true,
"declaration": false,
"suppressImplicitAnyIndexErrors": true,
"allowSyntheticDefaultImports": true,
"typeRoots": [
"./node_modules/#types"
],
"lib": [
"es2015",
"es2017",
"dom"
]
},
"exclude": [
"node_modules"
]
}

Unable to debug Typescript in VSCode

Here is my launch.json
"version": "0.2.0",
"configurations": [
{
"type": "node",
"name": "Launch Server",
"request": "launch",
"program": "${workspaceRoot}/server/src/app.ts",
"cwd": "${workspaceRoot}",
"env": {
"NODE_ENV": "dev"
},
"skipFiles": [
"node_modules/**/*.js"
],
"outFiles": [
"${workspaceRoot}/dist/server/src/*.js"
],
"sourceMaps": true,
"stopOnEntry": true,
"console": "internalConsole"
},
My source folder:
My dist folder:
The error I get is:
Cannot launch program '/Dev/myapp/server/src/app.ts'; setting the 'outFiles' attribute might help.
If I change the "program" property to ""program": "${workspaceRoot}/dist/server/src/app.js", it works but I'm then debugging the transpiled javascript and not the typescript. Obviously the transpiling with .map files is working, what is wrong?
tsconfig.json
{
"compilerOptions": {
"allowJs": false,
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"es6",
"dom"
],
"mapRoot": "./",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "./dist",
"sourceMap": true,
"target": "es6",
"typeRoots": [
"node_modules/#types"
]
},
"exclude": [
"web",
"dist",
"node_modules"
]
}
You are missing src folder in your configuration:
"outFiles": [
"${workspaceRoot}/dist/server/src/*.js"
],
Also set your mapRoot in tsconfig.json to ./dist/. Currently it will search your ./server/src folder for sourcemaps instead of ./dist
In my case, I had in launch.json
"program": "${file}"
Which obviously tried to run the ts file in node, when hitting F5 / Ctrl+F5
when changing it to
"program": "${workspaceFolder}/${fileBasenameNoExtension}.js"
allows me to run both active ts and js files...
also launch tsc -watch build task to get js file compiled on the fly

Resources