Cannot Use Import Statement Outside Module, Typescript, WebdriverIO

Question

Thanks in advance for the help.

This question appears to have been asked and answered elsewhere, but I believe I've tried all those solutions and have failed to make real progress.

I am trying to create a custom reporter for webdriverIO. However when all the imports are running I am getting the following error:

SyntaxError: Cannot use import statement outside a module

If I attempt to execute the import statement at the top of the wdio.conf file, I get the above error on the import WebdriverTestrailsReporter line. I can get around this by using a require, but instead encounter the same error when executing an import from my typescript class on import WDIOReporter from '@wdio/reporter' .

When I try to add "type": "module" to my package.json I get a new error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/XXXXX/WebstormProjects/integration_test_framework/wdio.conf.local.js require() of ES modules is not supported. require() of /Users/XXXXX/WebstormProjects/integration_test_framework/wdio.conf.local.js from /Users/XXXXX/WebstormProjects/integration_test_framework/node_modules/@wdio/config/build/lib/ConfigParser.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename wdio.conf.local.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/n1531435/WebstormProjects/integration_test_framework/package.json.

Using the cjs file extension gets me back to the import error I began with. I cannot change the requiring code as it exists within WDIO ConfigParser and not my project.

I've also played around quite a bit with the values in the tsconfig, including the target values (es2015, es2017), and nothing seems to work. Any ideas?

As I understand it, there are 4 relevant files in this set up. I have copied them below:

• wdio.conf.js
• tsconfig
• package.json and my custom Reporter for wdio

Relevant file snippets:

wdio.conf.js

//const WebdriverTestrailsReporter = require('./src/test/ui/WebdriverTestrailsReporter.js');
import WebdriverTestrailsReporter from './src/test/ui/WebdriverTestrailsReporter';

var isHeadless = process.env.HEADLESS === 'TRUE';
var useFirefox = process.env.USE_FIREFOX === 'TRUE';
var useChrome = process.env.USE_CHROME ? process.env.USE_CHROME === 'TRUE' : true;


exports.config = {
    reporters: ['spec', WebdriverTestrailsReporter]

package.json :

{
    "name": REDACTED
    "version": "1.1.0",
    "description": "",
    "main": "index.js",
    "bin": {
        REDACTED
    },
    "publishConfig": {
        "registry": "https://repo.forge.lmig.com/api/npm/npm-releases/"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@wdio/allure-reporter": "^6.4.7",
        "@wdio/cli": "^6.4.5",
        "@wdio/local-runner": "^6.4.5",
        "@wdio/mocha-framework": "^6.4.0",
        "@wdio/sauce-service": "^6.4.6",
        "@wdio/spec-reporter": "^6.4.7",
        "@wdio/sync": "^6.4.5",
        "chromedriver": "^90.0.0",
        "fibers": "^5.0.0",
        "geckodriver": "^1.20.0",
        "husky": "^4.3.0",
        "mocha": "^8.1.1",
        "prettier": "^2.2.0",
        "selenium-webdriver": "^4.0.0-alpha.7",
        "wdio-chromedriver-service": "^6.0.4",
        "wdio-geckodriver-service": "^1.1.1"
    },
    "dependencies": {
        "@types/chai": "^4.2.12",
        "@types/es6-promise": "^3.3.0",
        "@types/mocha": "^8.0.2",
        "@types/node": "^14.11.5",
        "async": "^3.2.0",
        "axios": "^0.20.0",
        "chai": "^4.2.0",
        "date-fns": "^2.16.1",
        "execa": "^4.1.0",
        "graphql": "^15.3.0",
        "graphql-request": "^3.2.0",
        "mocha": "^8.1.1",
        "sleep": "^6.3.0",
        "ts-node": "^9.0.0",
        "typescript": "^4.1.2",
        "typings": "^2.1.1"
    },
    "husky": {
        "hooks": {
            "pre-push": "npm run tsc && npm run prettier"
        }
    }
}

Reporter (first two lines, we never get past them)

import WDIOReporter from '@wdio/reporter'
import { TestRailConfig } from '../TestRailConfig';

tsconfig :

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "sourceMap": true,
        "skipLibCheck": true,
        "lib": ["es6"],
        "outDir": "lib",
        "types": ["node", "@wdio/sync", "@wdio/mocha-framework"]
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

Answer 1

if you use require then use everything in that format, else if you want to use import then add module type and replace all require to import.

If you want to use require in some files and import in some then rename the files into .cjs which has require instead of .js. Note you cannot mix the ES6 and common js formats together in a file. You should use either require or import in that file.

Best practice is to use E6 when using typescript,

Answer 2

Did you ever figure this out? I'm having the same issue