TypeScript aliases not recognized when tsconfig.json file is in Cypress folder

[conversayShawn]

Current behavior

When trying to import an Enum alias from a Typescript file within the Cypress folder as described in the docs, the webpack cannot resolve the alias, even though it is defined in the tsconfig.json file

Desired behavior

Properly import aliases from tsconfig.json files in the Cypress folder without needing to place tsconfig.json with at root project directory.

Test code to reproduce

https://github.com/shawn-e-harris/typeScriptAlias.git

Cypress Version

8.2.0

Other

Error: Webpack Compilation Error
./cypress/support/helper/helpers.js
Module not found: Error: Can't resolve '@alias-example/sub-folder/app-code.ts' in '/Users/joel.whalen/Documents/src/reproducers/alias-error-cypress/cypress/support/helper'
resolve '@alias-example/sub-folder/app-code.ts' in '/Users/joel.whalen/Documents/src/reproducers/alias-error-cypress/cypress/support/helper'
  Parsed request is a module
  using description file: /Users/joel.whalen/Documents/src/reproducers/alias-error-cypress/package.json (relative path: ./cypress/support/helper)
    Field 'browser' doesn't contain a valid alias configuration
    Looked for and couldn't find the file at the following paths:

[TomaszG]

@jennifer-shehane I see you've added the existing workaround label, could you point to that workaround?

[masaya-fukazawa]

I have the same problem, is there a solution?

[johncrim]

Try the custom webpack config with ts-loader that I posted here:

https://github.com/cypress-io/cypress/issues/19066#issuecomment-1001308186

[TomaszG]

@johncrim, thanks for that, this would work if you don't have any preprocessor files already defined (as Cypress doesn't support multiple file preprocessor - https://github.com/cypress-io/cypress/issues/5832)

The perfect solution for Cypress would be to automatically load the tsconfig.json file (and paths from it) if there's such in its root directory.

EDIT: OK, it seems that tsconfig.json is being loaded, however, it doesn't affect *.spec.js files where I'm using tsconfig paths.

EDIT2: Nevermind, it seems that another preprocessor was breaking it.

[Vestride]

I ran into what appears to have been a similar issue after doing a large migration which included TS 3 to 4. My cypress/tsconfig.json extended a TS config from my node_modules.

That config file at <project_root>/node_modules/@company/config-typescript/tsconfig.base.json config file set the "baseUrl" to "../../../src".

I fixed my issue by setting the "baseUrl" in my cypress/tsconfig.json file to "../src"

[wenqi73]

Adding "baseUrl": "./", will resolve this.

[DevKhaira]

Is there a solution when there is a tsconfig that exists outside the cypress folder (in root), I want to create a few component tests, but blocked by this issue. I have tried to use the ts-loader, but to no avail

the folder stricture is root cypress/ -all the cypress goodies including a tsconfig file that extends the root tsconfig file -tsconfig.json (where the paths exist)

[RicFer01]

Does someone know how to use aliases when you use CRA? I tried everything, but I always get error from Cypress gui, something like: > Cannot find module '@src/components/menu/Menu' even if from linting and ts point of view is working, if I click on the path it leads me to the correct component.

[kelzvictoria]

I was able to solve this with:

//cypress.config.ts
import path from 'path';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },

  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
      webpackConfig: {
        resolve: {
          alias: {
            '@': path.resolve(__dirname, 'src'),
          },
        },
      },
    },
  },
});

source: https://github.com/muratkeremozcan/tour-of-heroes-react-cypress-ts/blob/main/cypress.config.ts

[eloisetaylor5693]

I was able to solve this with:

//cypress.config.ts
import path from 'path';
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },

  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
      webpackConfig: {
        resolve: {
          alias: {
            '@': path.resolve(__dirname, 'src'),
          },
        },
      },
    },
  },
});

source: https://github.com/muratkeremozcan/tour-of-heroes-react-cypress-ts/blob/main/cypress.config.ts

Using path.resolve(__dirname, 'src'), resolved it for me