TypeError: webdriverio_1.default is not a function - Percy2 and WebdriverIO7 - webdriver-io

Question

I get this error using webdriverio v7 and latest Percy for visual testing:
[0-2] Error in "0: I can see page "Product Detail Page of the last product""
TypeError: webdriverio_1.default is not a function
at C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\src\step_definitions\visual\visual-steps.ts:7:45
at Browser.call (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\webdriverio\build\commands\browser\call.js:43:16)
at Browser.runCommandWithHooks (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\wrapCommand.js:105:34)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at Browser.runCommandWithHooks (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\wrapCommand.js:100:24)
at Browser.wrapCommandFn (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\wrapCommand.js:67:44)
at World.<anonymous> (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\src\step_definitions\visual\visual-steps.ts:7:13)
at World.executeSync (C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\index.js:38:22)
at C:\WORK\AutomationPlayground\domain-work\webdriverio-tutorial-demo\node_modules\#wdio\sync\build\index.js:69:68
It doesn't even get to percy, so there is no screenshot there.
All I do in the code is taking screenshot of the page:
import percySnapshot from '#percy/webdriverio';
import { Then } from '#cucumber/cucumber';
Then(/^I can see page "([^"]*)"$/, (name: string) => {
browser.waitForPageToLoad();
browser.call(() => percySnapshot(name));
});
This is my package.json file:
"devDependencies": {
"#cucumber/cucumber": "^7.1.0",
"#percy/cli": "^1.0.0-beta.48",
"#percy/webdriverio": "^2.0.0",
"#types/chai": "^4.2.16",
"#types/node": "^14.14.41",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"allure-commandline": "^2.13.8",
"app-root-path": "^3.0.0",
"chai": "^4.3.4",
"eslint": "^7.24.0",
"eslint-config-prettier": "^8.2.0",
"eslint-plugin-prettier": "^3.4.0",
"husky": "^6.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.2.1",
"ts-node": "^9.1.1",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.2.4",
"webdriverio": "^7.4.6"
},
"dependencies": {
"#wdio/allure-reporter": "^7.4.2",
"#wdio/cli": "^7.4.6",
"#wdio/cucumber-framework": "^7.4.6",
"#wdio/local-runner": "^7.4.6",
"#wdio/selenium-standalone-service": "^7.4.2",
"#wdio/spec-reporter": "^7.4.3",
"#wdio/sync": "^7.4.6"
}
Note:
This used to work prior upgrading to webdriverIO v7 and percy v2.
Anybody has an idea how to solve it?
Thanks!

Answer 1

Discussed here github
I needed to add in tsconfig.json file these options:
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,