Open conversayShawn opened 3 years ago
@jennifer-shehane I see you've added the existing workaround
label, could you point to that workaround?
I have the same problem, is there a solution?
Try the custom webpack config with ts-loader that I posted here:
https://github.com/cypress-io/cypress/issues/19066#issuecomment-1001308186
@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.
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"
Adding "baseUrl": "./",
will resolve this.
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)
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.
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
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
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 thetsconfig.json
fileDesired behavior
Properly import aliases from
tsconfig.json
files in the Cypress folder without needing to placetsconfig.json
with at root project directory.Test code to reproduce
https://github.com/shawn-e-harris/typeScriptAlias.git
Cypress Version
8.2.0
Other