I'm using Cypress in TypeScript, in WebStorm. I'd been working on project A1 for a few weeks, I added Cypress, I add TS to Cypress, and then things started getting a little funny, including js files being added alongside the ts files, both in Cypress and in my src folder. (tsx files didn't do this, only ts)
So I restarted the project: I created a whole new Create React App project, A2, and started dragging the files one by one (or folder by folder) from A1 to A2. I added the Cypress files to A2 by running cypress open when A2 had no cypress files in it, which caused Cypress to add its files. Then I added my tests from A1 (copying code into new files, not copying the files) and set up various config files and stuff such that:
- TS recognizes my custom cypress commands
- No extra JS files are created
Then I deleted all the files in the A1 project and dragged in all the files, minus the node_modules folder, from A2, and ran yarn install.
Everything works, except the Cypress folder still creates js files alongside the ts files.
It's very hard to pinpoint the actual moment when this happens: I had written this post and abandoned it because things seemed to be working fine. But then a few hours later I noticed the js files were back! Only in the Cypress folders, including ALL ts files in the Cypress folders (/integration, /plugins, etc).
Here's some tsconfigs:
cypress/tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress"]
},
"include": [
"**/*.ts", "**/*.d.ts"
]
}
<project_root>/tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}
Oh no, and now all of a sudden it's making js files out of ts in my src folder!
When I delete all these extra js files (which, in the src folder, generate warnings in the running app), I also get these kind of warnings from WebStorm:
Oops! Something went wrong! :( ESLint: 6.7.2. ESLint couldn't find the plugin "eslint-plugin-import". (The package "eslint-plugin-import" was not found when loaded as a Node module from the directory "/Users/tuzmacbookpro2017/dev/Sunrise/IVD".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: npm install eslint-plugin-import@latest --save-dev The plugin "eslint-plugin-import" was referenced from the config file in "nginx/front_end/package.json » eslint-config-react-app". If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.
The react server and the cypress server and runner all seem happy though.
Help! What's with these js files? (I know TS transpiles ts into js or whatever, but usually the files don't actually show up like this)