cypress config migration - export declare function __extends(d: Function, b: Function): void

[snake-py]

Current behavior

I updated to cypress 10 today, and I am seeing below error message after cypress UI has offered me to automatically migrate my cypress.json to cypress.config.js/ts. The UI created the TS file successfully, but then I tried to set up component testing and the UI displays the error.

This is the created config file:

import { defineConfig } from 'cypress';

export default defineConfig({
    projectId: 'wdenbx',
    experimentalSourceRewriting: false,
    video: false,
    chromeWebSecurity: false,
    retries: {
        runMode: 3,
        openMode: 0,
    },
    env: {
        CY_BASE_URL: 'http://localhost:8080',
        CY_TIMEOUT: 60000,
        CY_WAIT_SHORT: 4000,
        CY_WAIT_MEDIUM: 6000,
        CY_WAIT_LONG: 9000,
        PERCY_TOKEN: "",
        PERCY_LOGIN_USERNAME: 'user',
        PERCY_LOGIN_PASSWORD: 'pw',
        PERCY_CUSTOMER_ID: '',
        PERCY_SECURITY_FIELD: '',
    },

    fixturesFolder: 'tests/e2e/fixtures',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',

    e2e: {
        // We've imported your old cypress plugins here.
        // You may want to clean this up later by importing these.
        // setupNodeEvents(on, config) {
         //   return require('./tests/e2e/plugins/index.js')(on, config);
        // },
        specPattern: 'tests/e2e/specs/**/*.{js,jsx,ts,tsx}',
        supportFile: 'tests/e2e/support/index.js',
    },

    component: {
        supportFile: 'tests/e2e/support/component.ts',
        devServer: {
            framework: 'vue-cli',
            bundler: 'webpack',
        },
    },
});

Debug logs

/home/user/frontend/node_modules/tslib/tslib.d.ts:22
export declare function __extends(d: Function, b: Function): void;
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Object.require.extensions. [as .ts] (/home/user/.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/ts-node/src/index.ts:1445:43)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object. (/home/user/.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:5:17)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object. (/home/user/.cache/Cypress/10.7.0/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/index.js:4:21)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)

### Cypress Version

10.7.0

### Node version

16.17.0

### Package Manager

npm

### Package Manager Version

8.18.0

### Operating system

Linux

### Operating System Version

Ubuntu 20.04.5 LTS

### Other

I updated from 9.7.0

[snake-py]

The configuration is also crashing with the same error if I am trying to use any spread operator in this file.

[snake-py]

Also once the UI crashed, I cannot return to end-to-end testing.

[lmiller1990]

Hi! I think this might be fixed by https://github.com/cypress-io/cypress/pull/23637 (which isn't released; next week).

In the meantime, can you try using Node.js 16.16? Having your tsconfig.json and package.json would also be useful - what version of typescript, vue-cli, and wepback are you on?

If you've still got an error, please provide a minimal reproduction - I can definitely make more suggestions, but it's likely faster and easier if you create a minimal example I can run locally.

[snake-py]

@lmiller1990 I will give feedback this week if I still see this issue

[lmiller1990]

No problem, if you do make a minimal example please share it, I can test it out with the unreleased commits.

[snake-py]

@lmiller1990 so I updated and still seeing the error, now I cannot even use end to end testing.

Node version 16.17.0

import { defineConfig } from 'cypress';

const getFromEnv = (defaultEnv) => {
    const envPrefix = ['VUE_APP', 'PERCY'];

    const customEnvKeys = Object.keys(process.env).filter((key) =>
        envPrefix.some((prefix) => key.startsWith(prefix))
    );
    const mergedEnv = defaultEnv;
    customEnvKeys.forEach((key) => {
        mergedEnv[key] = process.env[key];
    });

    return mergedEnv;
};

const customConfigEnvs = getFromEnv({
    CY_BASE_URL: 'http://localhost:8080',
    CY_TIMEOUT: 60000,
    CY_WAIT_SHORT: 4000,
    CY_WAIT_MEDIUM: 6000,
    CY_WAIT_LONG: 9000,
    CY_LOGIN_USERNAME_OTP: 'info@XXX.de',
    CY_LOGIN_USERNAME: 'XXX',
    CY_LOGIN_PASSWORD: 'XXXX!',
    CY_ACCESS_OTP_TOKEN: 'XXXXX',
});

export default defineConfig({
    projectId: '',
    experimentalSourceRewriting: false,
    video: false,
    chromeWebSecurity: false,
    retries: {
        runMode: 3,
        openMode: 0,
    },
    env: customConfigEnvs,
    fixturesFolder: 'tests/e2e/fixtures',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',

    component: {
        supportFile: false,
        devServer: {
            framework: 'vue-cli',
            bundler: 'webpack',
        },
    },
    e2e: {
        setupNodeEvents(on, config) {
            // eslint-disable-next-line  @typescript-eslint/no-var-requires
            require('cypress-terminal-report/src/installLogsPrinter')(on);
        },
        specPattern: 'tests/e2e/specs/**/*.{js,jsx,ts,tsx}',
        supportFile: 'tests/e2e/support/index.js',
    },
});

[ZachJW34]

@snake-py I tried to reproduce the problem with your given config and I didn't see any issues. Before I investigate this further, please provide a reproducible example, preferably using the https://github.com/cypress-io/cypress-test-tiny template.

[ZachJW34]

Right now there doesn't seem to be enough information to reproduce the problem on our end. We'll have to close this issue until we can reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please comment on this issue with a reproducible example and we can reopen. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

[snake-py]

@ZachJW34 So I had finally time to put something together where I am already seeing the issue: https://github.com/snake-py/minimal-bug-repo-cy-10

I added a Readme on how to use it. The repo has no tests and no app, only the barebone configs.

[amehta265]

@snake-py Thank you for putting something together. I can confirm that I can reproduce this problem on my end.

Upon further investigation, the problem stems from tslib setup in the tsconfig.json file specifically declaring a particular path ("tslib": ["node_modules/tslib/tslib.d.ts"]) for tslib as you have done in your config file.

A simple workaround would be to remove this tslib path all together from your tsconfig.json. According to the tslib documentation you do not need to specify a path in your case but instead just set the importHelpers flag which you have already done. Furthermore, if you update your path to "tslib": "[node_modules/tslib/]", this does the trick as well.

I am looking at how this might relate to the way Cypress handles typescript configurations but I hope that this work around suffices for now

[snake-py]

@amehta265 thank you for pointing out the workaround. This seems sufficient enough for me.