question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Typescript support: Electron is reading the wrong tsconfig.json

See original GitHub issue

Current behavior:

In 4.4.0, using the included TypeScript support I cannot run tests in Electron. Using Chrome still works.

The problem I’m facing seems to be related to the tsconfig.json file I have at the root of my project. If that file is removed, Electron starts working again.

When I try to run with Electron I’m getting this:

npm run cypress:run

...

====================================================================================================

  (Run Starting)

  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
  β”‚ Cypress:    4.4.0                                                                              β”‚
  β”‚ Browser:    Electron 80 (headless)                                                             β”‚
  β”‚ Specs:      1 found (spec.ts)                                                                  β”‚
  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  spec.ts                                                                         (1 of 1)
Cannot use import statement outside a module
/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/lib/browsers/electron.js:1
import * as tslib_1 from "tslib";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:896:18)
    at Module.m._compile (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/ts-node/src/index.ts:536:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:986:10)
    at Object.require.extensions.<computed> [as .js] (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/ts-node/src/index.ts:539:12)
    at Module.load (internal/modules/cjs/loader.js:816:32)
    at Module._load (internal/modules/cjs/loader.js:728:14)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:853:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getBrowserLauncher (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/lib/browsers/index.js:51:12)
    at /home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/lib/browsers/index.js:189:31
    at tryCatcher (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromiseCtx (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/promise.js:641:10)
    at _drainQueueStep (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/async.js:97:12)
    at _drainQueue (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/home/tspmelo/.cache/Cypress/4.4.0/Cypress/resources/app/packages/server/node_modules/bluebird/js/release/async.js:15:14)
    at processImmediate (internal/timers.js:439:21)

Desired behavior:

  • It should work in all browsers.
  • Electron should not read tsconfig.json
  • Both browsers were working in 4.3.0, using webpack preprocessor.

Test code to reproduce

Before knowing about cypress-test-tiny I created a reproducible example in cypress-example-recipes: https://github.com/tspmelo/cypress-example-recipes/commit/4a310b116b900b016598e79d8be10807bc0377bf If needed I can move the code to the other repo. (And if you think it would be a good addition, I can open a working PR in cypress-example-recipes with the example used here)

cd examples/preprocessors__typescript-none
npm run cypress:run  # Will fail
npm run cypress:run -- --browser chrome # Will work

rm tsconfig.json
npm run cypress:run  # Will work

Versions

OS: Linux
Cypress 4.4.0
Browsers:
- Electron: 80
- Chrome: 80

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:6
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
jennifer-shehanecommented, Apr 17, 2020

I can recreate this. Have a cypress project with typescript installed in Cypress 4.4.0 and add the following tsconfig.json to the root of the project then run cypress run.

{
  "compilerOptions": {
    "importHelpers": true,
    "module": "esnext",
    "target": "es2015",
    "allowJs": true
  }
}

Fails only in Electron with following stacktrace

 cypress run

====================================================================================================

  (Run Starting)

  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
  β”‚ Cypress:    4.4.0                                                                              β”‚
  β”‚ Browser:    Electron 80 (headless)                                                             β”‚
  β”‚ Specs:      1 found (spec.js)                                                                  β”‚
  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  spec.js                                                                         (1 of 1)
Cannot use import statement outside a module
/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/browsers/electron.js:1
import { __awaiter } from "tslib";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:896:18)
    at Module.m._compile (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:536:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:986:10)
    at Object.require.extensions.<computed> [as .js] (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:539:12)
    at Module.load (internal/modules/cjs/loader.js:816:32)
    at Module._load (internal/modules/cjs/loader.js:728:14)
    at Module._load (electron/js2c/asar.js:717:26)
    at Function.Module._load (electron/js2c/asar.js:717:26)
    at Module.require (internal/modules/cjs/loader.js:853:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getBrowserLauncher (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/browsers/index.js:51:12)
    at /Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/browsers/index.js:189:31
    at tryCatcher (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:547:31)
    at Promise._settlePromise (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:604:18)
    at Promise._settlePromiseCtx (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/promise.js:641:10)
    at _drainQueueStep (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:97:12)
    at _drainQueue (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:86:9)
    at Async._drainQueues (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:102:5)
    at Immediate.Async.drainQueues [as _onImmediate] (/Users/jennifer/Library/Caches/Cypress/4.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/async.js:15:14)
    at processImmediate (internal/timers.js:439:21)
1reaction
izaylcommented, Apr 29, 2020

@jennifer-shehane any progress here? Cypress 4.5.0 have the same issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Electron and typescript "Cannot find module 'electron'"
The problem seems to lie in the way tsc (and tsserver ) resoves modules by default. To use use node.js-like algorithm you need...
Read more >
TypeScript and Electron The Right Way | by Dave Bush
I've been working on a new project over the last weeks that involves getting TypeScript and Electron working together. Unfortunately, the amount ofΒ ......
Read more >
TypeScript configuration - Angular
The Angular CLI generates a tsconfig.app.json file which is used to build an application, in which the types compiler option is set to...
Read more >
Supporting TypeScript - Quasar Framework
quasar/app-webpack) How to enable support for TypeScript in a Quasar app. ... Then create /tsconfig.json file at the root of you project with...
Read more >
Electron-Forge + React + TypeScript = Awesome! | F5
Since we are not using Babel, we will need to create config file for TypeScript. Create a tsconfig.json file in the root folder...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found