Using @wdio/sync from a react typescript project

Question

I'm adding some browser tests to my react/typescript app.

Compiler options:

"compilerOptions": {
  "allowJs": true,
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true,
  "lib": ["es2017", "dom"],
  "module": "esnext",
  "moduleResolution": "node",
  "target": "es6"
}

I'm following the boilerplate example here: https://github.com/erwinheitzman/jest-webdriverio-standalone-boilerplate

Which has a statement in the test like (after some mods):

import { BrowserObject } from '@wdio/sync';
const **sync** = require('@wdio/sync').default; // Warnings here

test('synchronous WebdriverIO test', () => **sync**(() => {
  ...snip...
}));

I get a warning:

require statement not part of an import statement (no-var-requires)tslint(1)

How on earth do I use an import statement here?

import sync = require('...').default; // Doesn't work. Says Declaration or statement expected.ts(1128)
import sync from '...'; // Doesn't work. Says Cannot use namespace 'sync' as a value.ts(2708)

I'm so confused by this whole thing. From what I can tell sync means "use WebDriverIO namespace from wdio/sync". Is there a way to import that?!?

Answer 1

import * as sync from '@wdio/sync';

and

const sync = import("@wdio/sync");

both works for me.