Error using ESM imports with Typescript

[mukulgupta21]

Current behavior

My typescript project ("type":"module") is organised as follows:

app
  - src
    - utils
      - util.ts
    - other-code
  - cypress
    - e2e
      - spec.cy.ts
  package.json

I'm trying to import util.ts from spec.cy.ts using

import { utilA } from "../../src/utils/util.js";

which is the correct typescript compliant syntax for importing ESM modules.

On running spec.cy.ts, I encounter

Error: Webpack Compilation Error
Module not found: Error: Can't resolve '../../src/utils/util.js'

This issue is very similar to #26827 which should supposedly have been fixed after cypress upgraded to webpack v5. However, I'm using the cypress 13.6.3 and still facing the issue.

Desired behavior

Cypress should support TypeScript-style fully-qualified ESM imports where one can import a .ts file by using a .js extension. In the context of this particular example, import { utilA } from "../../src/utils/util.js"; should automatically import from "../../src/utils/util.ts"`. Note that it is not about changing the extension of the imported file but recursively importing across the dependency chain.

Test code to reproduce

Here is a repo which reproduces the issue: https://github.com/mukulgupta21/cypress-ts-issue

Cypress Version

13.6.3

Node version

18.15.0

Operating System

macOS Venture, 13.3.1

Debug Logs

No response

Other

In the linked issue, it was advised to use @cypress/webpack-preprocessor and extensionAlias.

I tried using that (as below) and was able to get it to work but it required installing webpack, ts-loader, @babel/core, @babel/preset-env as devDependencies to my original package which shouldn't have been required had cypress provide built-in support.

    setupNodeEvents(on, config) {
      let options = webpackPreprocessor.defaultOptions;
      const customOptions = {
        webpackOptions: {
          resolve: {
            extensionAlias: {
              '.js': ['.ts', '.js'],
            }
          }
        }
      };
      options.webpackOptions = {
        ...options.webpackOptions,
        ...customOptions.webpackOptions,
      }
      options.webpackOptions.module?.rules?.push({
          // every time webpack sees a TS file (except for node_modules)
          // webpack will use "ts-loader" to transpile it to JavaScript
          test: /\.ts$/,
          exclude: [/node_modules/],
          use: [
            {
              loader: 'ts-loader',
              options: {
                // skip typechecking for speed
                transpileOnly: true,
              },
            },
          ],
        });
      on('file:preprocessor', webpackPreprocessor(options));
    }

[ernestostifano]

Having same issue here