Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
snake-py opened this issue Sep 5, 2022 · 11 comments
Labels
CT Issue related to component testing stage: awaiting response Potential fix was proposed; awaiting response topic: installation Issue during installation or downloading Cypress

Comments

@snake-py
Copy link

snake-py commented Sep 5, 2022

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 snake-py added the topic: installation Issue during installation or downloading Cypress label Sep 5, 2022
@snake-py
Copy link
Author

snake-py commented Sep 5, 2022

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

@snake-py
Copy link
Author

snake-py commented Sep 5, 2022

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

@lmiller1990
Copy link
Contributor

lmiller1990 commented Sep 8, 2022

Hi! I think this might be fixed by #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
Copy link
Author

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

@lmiller1990
Copy link
Contributor

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

@nagash77 nagash77 assigned ZachJW34 and unassigned lmiller1990 Sep 14, 2022
@snake-py
Copy link
Author

snake-py commented Sep 20, 2022

@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: '[email protected]',
    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',
    },
});

image

@ZachJW34
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link
Author

snake-py commented Oct 22, 2022

@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.

@nagash77 nagash77 reopened this Oct 24, 2022
@nagash77 nagash77 assigned warrensplayer and unassigned ZachJW34 Oct 24, 2022
@amehta265 amehta265 assigned amehta265 and unassigned warrensplayer Oct 25, 2022
@amehta265
Copy link
Contributor

@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
Copy link
Author

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

@nagash77 nagash77 assigned ZachJW34 and unassigned ZachJW34 Nov 23, 2022
@nagash77 nagash77 assigned ZachJW34 and unassigned ZachJW34 Nov 23, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CT Issue related to component testing stage: awaiting response Potential fix was proposed; awaiting response topic: installation Issue during installation or downloading Cypress
Projects
None yet
Development

No branches or pull requests

6 participants