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

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.