configFile is invalid with Remix-run project

[mkikets99]

Newly created React/Remix-run project. Installed cypress with yarn add -D cypress.
Run yarn cypress open and accepted basic configuration files.
And now UI and CLI shows same error:

Your configFile is invalid: /.../project/cypress.config.ts

It threw an error when required, check the stack trace below:

{}

This both weird and not understandable...

Using cypress v13.5.1 (tried 13.5.0 - same here)
NodeJS is at version: v20.9.0

Giving you a tsconfig.json - maybe there something wrong...

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

and also cypress.config.ts (to prove that it is basic):

import { defineConfig } from "cypress";

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

Update: Found something when "install process" is called

In post install scripts i getting next error:

error /.../project/node_modules/cypress: Command failed.
Exit code: 1
Command: node index.js --exec install
Arguments: 
Directory: /.../project/node_modules/cypress
Output:
/.../project/node_modules/cli-truncate/index.js:3
const stringWidth = require('string-width');
                    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /.../project/node_modules/string-width/index.js from /.../project/node_modules/cli-truncate/index.js not supported.
Instead change the require of /home/mkikets/code/nginx-extra-ui/node_modules/string-width/index.js in /.../project/node_modules/cli-truncate/index.js to a dynamic import() which is available in all CommonJS modules.

[mkikets99]

After playing around... I don't understand how, but i managed to fix it by just:

• reinstalling cypress
• open it
• generate new files
• rename cypress.config.ts to cypress.config.mjs

[mkikets99]

Or installing cypress in other folder (like in testing/ folder)

[amanape]

Setting "module": "esnext", in tsconfig.json fixed my issue.

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "module": "esnext",
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    "noEmit": true
  }
}

[asvrada]

This worked for me as well. But why?