[🐛 Bug]: Import giving error ERROR @wdio/runner: Error: Cannot find package with paths defined in tsconfig.json

[aaggarwal-sumo]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

8.14.4

Node.js Version

20.5.0

Mode

WDIO Testrunner

Which capabilities are you using?

capabilities: {
[0-0]     alwaysMatch: {
[0-0]       browserName: 'chrome',
[0-0]       browserVersion: '112.0',
[0-0]       proxy: [Object],
[0-0]       'goog:chromeOptions': [Object],
[0-0]       'goog:loggingPrefs': [Object],
[0-0]       'selenoid:options': [Object]
[0-0]     },
[0-0]     firstMatch: [ {} ]
[0-0]   },
[0-0]   desiredCapabilities: {
[0-0]     browserName: 'chrome',
[0-0]     browserVersion: '112.0',
[0-0]     proxy: {
[0-0]       proxyType: 'manual',
[0-0]       httpProxy: 'localhost:39500',
[0-0]       sslProxy: 'localhost:39500'
[0-0]     },
[0-0]     'goog:chromeOptions': { prefs: [Object] },
[0-0]     'goog:loggingPrefs': { performance: 'ALL', browser: 'ALL', driver: 'ALL' },
[0-0]     'selenoid:options': {
[0-0]       name: 'stag:loginTests:chrome',
[0-0]       enableVNC: true,
[0-0]       enableVideo: true,
[0-0]       videoFrameRate: 24,
[0-0]       videoCodec: 'mpeg4',
[0-0]       perfLoggingPrefs: [Object],
[0-0]       extensions: [Array],
[0-0]       env: [Array],
[0-0]       sessionTimeout: '900s'
[0-0]     }
[0-0]   }
[0-0] }

What happened?

Import giving error ERROR @wdio/runner: Error: Cannot find package with paths defined in tsconfig.json

I have defined path in tsconfig.json as:

"paths": {

  "@Util/*": [
    "test/util/*"
  ]
}

Under Compiler options and I am using Import statement as:

import LoginUtil from '@Util/LoginUtil';

but getting error:

[2023-08-03T12:09:15.747Z] 2023-08-03T12:09:15.747Z ERROR @wdio/runner: Error: Cannot find package '@Util/LoginUtil' imported from //test/util/LogoutUtil.ts
[0-0] at packageResolve (/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:757:9)
[0-0] at moduleResolve (/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:798:18)
[0-0] at Object.defaultResolve (//node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:912:11)
[0-0] at /node_modules/ts-node/src/esm.ts:218:35
[0-0] at entrypointFallback (node_modules/ts-node/src/esm.ts:168:34)
[0-0] at /node_modules/ts-node/src/esm.ts:217:14
[0-0] at addShortCircuitFlag (node_modules/ts-node/src/esm.ts:409:21)
[0-0] at resolve (/node_modules/ts-node/src/esm.ts:197:12)
[0-0] at nextResolve (node:internal/modules/esm/hooks:733:28)
[0-0] at Hooks.resolve (node:internal/modules/esm/hooks:242:30)

I am using type: module in package.json and "module": "esnext", in tsconfig.json.

In case I use relative path as :

import LoginUtil from '../util/LoginUtil.ts'; then it works sucesfully.

What is your expected behavior?

Import statement should not throw any errors.

How to reproduce the bug.

Just try running basic test case where import of another package is required but specify the path of file from where we need to import with @PathValue/.

Relevant log output

There should be no errors reported when import is used as:

import LoginUtil from '@Util/LoginUtil';

Code of Conduct

• I agree to follow this project's Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues

[christian-bromann]

Can you provide a minimal reproducible example please?

[aaggarwal-sumo]

@christian-bromann As mentioned in the description in import statement if specified as :

• import LoginUtil from '@Util/LoginUtil'; -> doesn't work
• import LoginUtil from '../util/LoginUtil.ts'; ->. this works

even though @Util is defined in tsconfig.json file under compilerOptions

"paths": {

"@Util/": [
"test/util/"
]
}

[christian-bromann]

I understand the problem, I am still asking for a minimal reproducible example.

[aaggarwal-sumo]

@christian-bromann

Reproducible steps are:

• Clone the git repo: https://github.com/amiya-pattnaik/webdriverIO-with-jasmineBDD/tree/master
• Replace all attached files in the repo with cloned repo
• Files are: test/spec/yahoo-search-test.spec.ts , tsconfig.json, package.json
• Run commands: npm install @wdio/cli
  npm run test-sauce
• check logs in log folder: wdio-0-3.log

If in file (test/spec/yahoo-search-test.spec.ts) if we replace import statement as import yahooPage from '../pageobjects/yahoo-search.page.ts'; then this error is not seen.

WDIO_V8_JasimeBDD.zip

[christian-bromann]

Thanks for providing the reproducible example!

We greatly appreciate any contributions that help resolve the bug. While we understand that active contributors have their own priorities, we kindly request your assistance if you rely on this bug being fixed. We encourage you to take a look at our contribution guidelines or join our friendly Discord development server, where you can ask any questions you may have. Thank you for your support, and cheers!

[aaggarwal-sumo]

Hi @christian-bromann

Due to bandwidth issue we won't be able to pick this for fixing. Are there any plans to fix it from your side as we are currently blocked due to this issue.

[christian-bromann]

Are there any plans to fix it from your side as we are currently blocked due to this issue.

Unfortunately I can't give say when or if I ever can pick this up. I really recommend get involved into the project and support with bugfixes like this, especially when it blocks you.

[erwinheitzman]

I think we will have to wait till ts-node support this: TypeStrong/ts-node#1585

[MadSandwich]

I have a question does this problem should also be reproducible if I'm using a JS? Because actually I'm facing the same problem, when trying to use alises.

[erwinheitzman]

Using the tsconfig-paths documentation I was able to run the tests just fine by executing:

NODE_OPTIONS=' -r tsconfig-paths/register' wdio run ./wdio.conf.ts

[erwinheitzman]

@aaggarwal-sumo can you verify that this resolves the issue for you with the latest version?

[erwinheitzman]

Keep in mind that if you just switched from CJS to ESM and this suddenly fails that this is due to ESM requiring the extension in the path. So @Utils/foo becomes @Utils/foo.ts

[aaggarwal-sumo]

Can you help me How I can set this programatically?

Picked from wdio.conf.ts
export const config: Options.Testrunner = {
//
// ====================
// Runner Configuration
// ====================
//
//
// =====================
// ts-node Configurations
// =====================
//
// You can write tests using TypeScript to get autocompletion and type safety.
// You will need typescript and ts-node installed as devDependencies.
// WebdriverIO will automatically detect if these dependencies are installed
// and will compile your config and tests for you.
// If you need to configure how ts-node runs please use the
// environment variables for ts-node or use wdio config's autoCompileOpts section.

autoCompileOpts: {
    autoCompile: true,
    // see https://github.com/TypeStrong/ts-node#cli-and-programmatic-options
    // for all available options
    tsNodeOpts: {
        transpileOnly: true,
        project: 'tsconfig.json',
    },
    compilerOptions: {},
    // tsconfig-paths is only used if "tsConfigPathsOpts" are provided, if you
    // do please make sure "tsconfig-paths" is installed as dependency
    tsConfigPathsOpts: {
        baseUrl: '.',
        paths: {
            '@Reporter/*': ['customReporters/*'],
            '@PageObject/*': ['test/pageobjects/*'],
            '@Locators/*': ['test/locators/*'],
            '@Constants/*': ['test/constants/*'],
            '@Util/*': ['test/util/*'],
            '@EncryptedData/*': ['test/encryptedData/*'],
            '@TestData/*': ['test/testdata/*'],
            '@Component/*': ['test/pageobjects/components/*'],
            '@DialogBoxes/*': ['test/pageobjects/dialogboxes/*'],
        },
        moduleResolution: 'node',
        allowSyntheticDefaultImports: true,
        resolveJsonModule: true,
        esModuleInterop: true,
    },
},

.....
.....

}

and content of tsconfig.json is defined as:

{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"esModuleInterop": true,
"moduleResolution": "node",
"outDir": "dist",
"paths": {
"@Constants/": [
"test/constants/"
],
"@DialogBoxes/": [
"test/pageobjects/dialogboxes/"
],
"@EncryptedData/": [
"test/encryptedData/"
],
"@Locators/": [
"test/locators/"
],
"@Component/": [
"test/pageobjects/components/"
],
"@PageObject/": [
"test/pageobjects/"
],
"@Reporter/": [
"customReporters/"
],
"@TestData/": [
"test/testdata/"
],
"@Util/": [
"test/util/"
]
},
"resolveJsonModule": true,
"target": "es2022",
"module": "esnext",
"types": [
"node",
"webdriverio/async",
"@wdio/globals/types",
"@wdio/jasmine-framework",
"expect-webdriverio"
],
// "strict": true,
},
"exclude": [
"node_modules"
],
"include": [
"customReporters/",
"test/",
"wdio.conf.ts"
]
}

[erwinheitzman]

@aaggarwal-sumo what do you mean by that? you can simply add the NODE_OPTIONS in your script or set the variable before running the script like so:

NODE_OPTIONS=' -r tsconfig-paths/register'
npm run wdio

[erwinheitzman]

I have documented this here: #11445

[erwinheitzman]

FYI if you mean that you want to set this inside of a hook or somewhere else in your config file, this is not possible

[aaggarwal-sumo]

Didn't work.

[christian-bromann]

Didn't work.

Can you provide a minimal reproducible example please?

[aaggarwal-sumo]

Original description of issue already have reproducible example.

[christian-bromann]

Currently there is no chance for us to support tsconfig-paths duo to TypeStrong/ts-node#1585 which was the reason we had to remove support for it in the first place. If you know a workaround please let us know.