Why must I import TS files as JS files in this case?

Question

I am helping out on a testing project using WebdriverIO. We are having immense difficulty with TS serrtings, as the TS transpiler seems to correctly resolve TS modules, but the resolution fails during runtime.

For example, if I have a module:

// config/config.ts
export const config = {};

And then a file:

// someTest.ts
import { config } from './config/config`;

Then TS will correctly display the types for config. However, when running the suite, I would get the message:

[0-2] 2023-04-18T09:07:54.651Z ERROR @wdio/runner: Error: Cannot find module '/Users/ronnyefronny/projects/wdio-demo/config/config' imported from /Users/ronnyefronny/projects/wdio-demo/test/step-definitions/VoiceflowStepDefs.ts

My tsconfig.json is:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "declaration": true,
    "module": "ESNext",
    "baseUrl": "./",
    "types": [
      "node",
      "@wdio/globals/types",
      "expect-webdriverio",
      "@wdio/cucumber-framework",
    ],
    "target": "ESNext",
    "esModuleInterop": true,
    "resolveJsonModule": true,
  }
}

And the rest of WDIO config is as recommended by their docs, and still nothing.

The thing that gets me, is that in their own example boilerplate repo, WDIO import TS modules as JS, and this confuses me to no end. I've been working with TS for a few years on both back- and front-end projects and have never needed to import TS modules as their transpiled JS counterparts.

That is, instead of

import { config } from './config/config';

The would do

import { config } from './config/config.js';

I would love to understand why this is happening, and more specifically, why I can't use regular TS imports in this case. What is the difference?

Does this answer your question? [Configure typescript to output imports with extensions, ex: \`from './file.js\`\`](https://stackoverflow.com/questions/67726319/configure-typescript-to-output-imports-with-extensions-ex-from-file-js) — jsejcksn, May 25 '23 at 13:50
Using ESM requires you to specify the full name of the file, including the extension. Since the compiled output has `.js` file extensions, you have to include that in the import path. — kelsny, May 25 '23 at 14:18

yashhy · Answer 1 · 2023-05-25T14:13:40.133

I got it resolved by adding allowImportingTsExtensions in tsconfig.json.

tsconfig.json now

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "esnext",
    "types": [
      "node",
      "@wdio/globals/types",
      "wdio-intercept-service",
      "@wdio/mocha-framework"
    ],
    "target": "es2022",
    "lib": ["esnext"],
    "allowImportingTsExtensions": true,  <---- This ignored the error
    "noEmit": true                       <---- Since "allowImportingTsExtensions" can only work along with "noEmit" I had to add this too
  },
  "include": ["e2e/**/*.ts"],
  "exclude": ["node_modules"]
}

p.s. Its so pretty that VS Code gave a hint but I didn't read it fully.

p.p.s

btw, VS code suggests to add allowImportingTsExtensions ONLY if you set your VS Code complier version to v5.0.4 Initially I had chosen v4.8.4 it didn't suggest me. This is because this option was introduced in TS v5.0

I had to update my typescript version and then it worked. thank you — Maor Ben, Jun 26 '23 at 16:55

Why must I import TS files as JS files in this case?

1 Answers1

Linked