Fatal error on first launch of component testing

[rendall]

Current behavior

Cypress reports an error in-app when launching component testing. No testing is possible.

The following error originated from your test code, not from Cypress.

  > Cannot find module 'cypress/svelte'

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
View stack trace
 Print to console
    at webpackMissingModule (http://localhost:5000/__cypress/src/cypress-support-file.js:60:50)
    at ./cypress/support/component.ts (http://localhost:5000/__cypress/src/cypress-support-file.js:60:139)
    at Function.__webpack_require__ (http://localhost:5000/__cypress/src/main.js:3068:42)
From previous event:
    at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (http://localhost:5000/__cypress/runner/cypress_runner.js:3486:19)
    at Promise._then (http://localhost:5000/__cypress/runner/cypress_runner.js:1239:17)
    at Promise.then (http://localhost:5000/__cypress/runner/cypress_runner.js:1132:17)
    at runScriptsFromUrls (http://localhost:5000/__cypress/runner/cypress_runner.js:110750:136)
    at Object.runScripts (http://localhost:5000/__cypress/runner/cypress_runner.js:110791:12)
    at $Cypress.onSpecWindow (http://localhost:5000/__cypress/runner/cypress_runner.js:40862:67)
    at init (http://localhost:5000/__cypress/src/main.js:21:13)
    at ../../../.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/loader.js!../../../.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js (http://localhost:5000/__cypress/src/main.js:64:3)
    at __webpack_require__ (http://localhost:5000/__cypress/src/main.js:3068:42)
    at render (http://localhost:5000/__cypress/src/main.js:3676:5)
    at <unknown> (http://localhost:5000/__cypress/src/main.js:3678:1)
    at <unknown> (http://localhost:5000/__cypress/src/main.js:3680:3)
    at <unknown> (http://localhost:5000/__cypress/src/main.js:3682:12)
    ```
    
    Furthermore, the terminal reports:
    
    ```
    ERROR in ./cypress/support/component.ts 19:0-39
Module not found: Error: Package path ./svelte is not exported from package {project}/node_modules/cypress (see exports field in {project}/node_modules/cypress/package.json)
 @ ../../../.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/loader.js!../../../.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js 25:18-150
 @ ../../../.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js 3:4-41

ERROR in{project}t/cypress/support/component.ts
./cypress/support/component.ts 17:7-19
[tsl] ERROR in {project}t/cypress/support/component.ts(17,8)
      TS6059: File '{project}/cypress/support/commands.ts' is not under 'rootDir' '{project}/src'. 'rootDir' is expected to contain all source files.
  The file is in the program because:
    Imported via "./commands" from file '{project}/cypress/support/component.ts'
    Root file specified for compilation
 @ ../../../.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/loader.js!../../../.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js 25:18-150
 @ ../../../.cache/Cypress/12.17.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/browser.js 3:4-41

Desired behavior

No error.

Test code to reproduce

I'm not doing that.

Cypress Version

12.17.4

Node version

v18.12.1

Operating System

Ubuntu 22.04.3 LTS

Debug Logs

I don't feel comfortable with the ask. The logs contain private, proprietary information about the project and this is a public forum.

Other

svelte@3.59.2
TypeScript@5.1.6

I tried:

• Added "@cypress/svelte" as a peerDependency
• ... as a resolution;
• Wiped node_modules and the lock file.
• Added a fresh init tsconfig to the cypress folder.

[MikeMcC399]

@rendall

It seems that there are some compatibility issues!

I suggest that you compare to the example in https://github.com/cypress-io/cypress-component-testing-apps/tree/main/svelte-webpack-ts and the https://github.com/cypress-io/cypress-component-testing-apps/blob/main/svelte-webpack-ts/package.json file:

  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "cypress": "^12.7.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss": "^8.4.16",
    "postcss-loader": "^7.0.1",
    "svelte": "^3.49.0",
    "svelte-htm": "^1.1.1",
    "svelte-loader": "^3.1.3",
    "svelte-preprocess": "^4.10.7",
    "tailwindcss": "^3.1.8",
    "ts-loader": "^9.3.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.7.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.10.0"
  },
  "dependencies": {
    "@tsconfig/svelte": "^3.0.0",
    "serve": "^13.0.2"
  },

If this example is updated to cypress@12.17.4 it works fine.
Attempting to update to typescript@5.1.6 however produces some warnings:

$ npm install typescript@5.1.6 -D -E
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: undefined@undefined
npm WARN Found: typescript@4.8.2
npm WARN node_modules/typescript
npm WARN   peerOptional typescript@"^3.9.5 || ^4.0.0" from svelte-preprocess@4.10.7
npm WARN   node_modules/svelte-preprocess
npm WARN     dev svelte-preprocess@"^4.10.7" from the root project
npm WARN   3 more (ts-loader, ts-node, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional typescript@"^3.9.5 || ^4.0.0" from svelte-preprocess@4.10.7
npm WARN node_modules/svelte-preprocess
npm WARN   dev svelte-preprocess@"^4.10.7" from the root project

and npx cypress run --component fails to run.

I suggest that you revert to typescript@4.

If that does not solve your issue, then please share the contents of your package.json file and say which package manager you are using.

[rendall]

I did try. Alas, many errors upset that svelte tsconfig has "moduleResolution" : "bundler" and compiler option "verbatimModuleSyntax".

    node_modules/@tsconfig/svelte/tsconfig.json:8:25 - error TS6046: Argument for '--moduleResolution' option must be: 'node', 'classic', 'node16', 'nodenext'.

    8     "moduleResolution": "bundler",
                              ~~~~~~~~~
    node_modules/@tsconfig/svelte/tsconfig.json:14:5 - error TS5023: Unknown compiler option 'verbatimModuleSyntax'.

    14     "verbatimModuleSyntax": true,
           ~~~~~~~~~~~~~~~~~~~~~~

Speaking personally, I am comfortable waiting until the Cypress team upgrades to TypeScript 5. This issue is not urgent for me or the project. Component testing is a nice-to-have, but we're getting along fine with e2e for now.

[MikeMcC399]

@rendall

Which version of @tsconfig/svelte are you using? The example with typescript@4.8.2 uses @tsconfig/svelte@3.0.0.

[MikeMcC399]

@rendall

Speaking personally, I am comfortable waiting until the Cypress team upgrades to TypeScript 5. This issue is not urgent for me or the project. Component testing is a nice-to-have, but we're getting along fine with e2e for now.

I was not trying to say that TypeScript 5 is not supported. I was just making the observation in the example configuration that typescript@4.8.2 is being used successfully. According to the start-up checks, typescript@5 is supported, although that does not mean it works with all version combinations.

[MikeMcC399]

• Possibly fix: try to only add commonjs when running Cypress config #27484 is also related.

[rendall]

@rendall

Which version of @tsconfig/svelte are you using? The example with typescript@4.8.2 uses @tsconfig/svelte@3.0.0.

"@tsconfig/svelte": "^5.0.0" Hmm 🤔

I will roll this to another version and get back to you.

[MikeMcC399]

@rendall

In your initial post you indicated that you could not share a reproducible example. You also have only provided only partial information about which dependency versions you are using.

This limits the amount of help you can be given.

If you are not able to make progress based on the discussions so far, then a possibility for you to provide a reproducible example might be for you to fork the repo cypress-io/cypress-component-testing-apps, create a new branch and then set up the versions in the svelte-webpack-ts directory to match those which you are using. You could then share that information.

[rendall]

Oh, my apologies, @MikeMcC399 . I didn't post this for help, more just to report an issue. Feel free to close it out.

[MikeMcC399]

@rendall

Thanks for clarifying your expectations! In fact whether a issue ends up with a bug fix, feature request or whether it can be solved by some user action mostly depends on getting the problem reduced to a reproducible example, especially if it is a complex scenario.

Since I'm a community contributor, not a member of the Cypress team, I don't have privileges to close issues. So any decision to close would have to come from either you yourself or the Cypress triage team.

[rendall]

Just to follow up. I did try to downgrade @tsconfig/svelte, first to major version 4 which did not fix the errors, and then to major version 3 which created errors.

I am absolutely willing to answer any questions the cypress team may have for me, but I have depleted my energy budget for troubleshooting this. If the issue helps the team, great, but I am fine with waiting or closing.