webdriverio-community/wdio-html-reporter

wdio-html-reporter is not working with WDIO version 8

Opened this issue · 6 comments

On 2022-12-01 version 8 of WebdriverIO was released.
One of the braking changes is Transition code base from CommonJS to ESM
It means all modules of wdio 8 are now fully ESM and use ESM exports.
wdio-html-reporter still uses require() imports, which causes problem as far as I understand.

Steps to reproduce:

  1. Create a fresh wdio v8 project, with all defaults.
    npm init wdio .
  2. Install latest html reporter
    npm i wdio-html-nice-reporter --save-dev
  3. Add reporter to wdio config.
    reporters: ['spec', 'html-nice']
  4. Import from 'wdio-html-nice-reporter'
    import {ReportAggregator} from 'wdio-html-nice-reporter';
  5. Run sample test
    npm run wdio

Fragment of wdio.conf.ts:

import type { Options } from '@wdio/types'
import {ReportAggregator} from 'wdio-html-nice-reporter';

export const config: Options.Testrunner = {

    runner: 'local',
    autoCompileOpts: {
        tsNodeOpts: {
            project: './tsconfig.json'
        }
    },
    
    specs: [
        './test/specs/**/*.ts'
    ],

    reporters: ['html-nice'],   

Result:

[0-0] 2022-12-30T13:17:04.411Z ERROR @wdio/local-runner: Failed launching test session: Error: Couldn't initialise "wdio-html-nice-reporter".
[0-0] Error [ERR_REQUIRE_ESM]: require() of ES Module <path_to_project>\node_modules\@wdio\reporter\build\index.js from <path_to_project>\node_modules\wdio-html-nice-reporter\lib\htmlReporter.js not supported.
[0-0] Instead change the require of index.js in <path_to_project>\node_modules\wdio-html-nice-reporter\lib\htmlReporter.js to a dynamic import() which is available in all CommonJS modules.
[0-0]     at require.extensions.<computed> [as .js] (<path_to_project>\node_modules\ts-node\dist\index.js:851:20)
[0-0]     at Object.<anonymous> (<path_to_project>\node_modules\wdio-html-nice-reporter\lib\htmlReporter.js:6:36)
[0-0]     at require.extensions.<computed> [as .js] (<path_to_project>\node_modules\ts-node\dist\index.js:851:20)
[0-0]     at Object.<anonymous> (<path_to_project>\node_modules\wdio-html-nice-reporter\lib\index.js:7:40)
[0-0]     at require.extensions.<computed> [as .js] (<path_to_project>\node_modules\ts-node\dist\index.js:851:20)
[0-0]     at safeImport (file:///<path_to_project>/node_modules/@wdio/utils/build/utils.js:210:15)
[0-0]     at async initialisePlugin (file:///<path_to_project>/node_modules/@wdio/utils/build/initialisePlugin.js:32:20)
[0-0]     at async BaseReporter.initReporters (file:///<path_to_project>/node_modules/@wdio/runner/build/reporter.js:23:27)
[0-0]     at async Runner.run (file:///<path_to_project>/node_modules/@wdio/runner/build/index.js:68:9)
[0-0] FAILED 

What happens as I understand:
Test project (which is ESM module) imports 'wdio-html-nice-reporter' (which is CommonJS), that is fine.
'wdio-html-nice-reporter' tries to import @wdio\reporter (which is ESM module) in CommonJS way (require() ).
This makes execution failed.

package.json:

{
  "name": "my-new-project",
  "type": "module",
  "devDependencies": {
    "@wdio/cli": "^8.0.15",
    "@wdio/local-runner": "^8.0.15",
    "@wdio/mocha-framework": "^8.0.14",
    "@wdio/spec-reporter": "^8.0.14",
    "i": "^0.3.7",
    "npm": "^9.2.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4",
    "wdio-html-nice-reporter": "^8.0.6",
    "wdio-wait-for": "^3.0.1"
  },
  "scripts": {
    "wdio": "wdio run ./wdio.conf.ts"
  }
}

node v19.2.0
npm v 9.2.0

Latest version of 'wdio-html-nice-reporter' 8.0.6 was released a month before wdio 8.
To support wdio v8, 'wdio-html-nice-reporter' also has to become fully ESM.

rpii commented
rpii commented

@rpii 8.1.0-beta2 fixed the issue
thanks

I still get the same error even with the beta release when I try to I import and create a new ReportAggregator

I still get the same error even with the beta release when I try to I import and create a new ReportAggregator

Can confirm I have the same issue, is there a workaround for this?

After upgrading the version I am facing the issue: https://github.com/rpii/wdio-html-reporter/issues/100. Anyone has any workaround?

StackTrace:

2023-08-03T08:36:21.912Z ERROR @wdio/config:ConfigParser: Failed loading configuration file: file:///Users/aaggarwal/Documents/Sumo-Repo/sumo-ui-test/UIE2ETests/wdio.conf.ts: ReportEvents is not a constructor
TypeError: ReportEvents is not a constructor
at file:///Users/aaggarwal/Documents/Sumo-Repo/sumo-ui-test/UIE2ETests/node_modules/wdio-html-nice-reporter/lib/htmlReporter.js:10:19
at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
at async CustomizedModuleLoader.import (node:internal/modules/esm/loader:228:24)
at async ConfigParser.addConfigFile (file:///Users/aaggarwal/Documents/Sumo-Repo/sumo-ui-test/UIE2ETests/node_modules/@wdio/config/build/lib/ConfigParser.js:85:36)
at async ConfigParser.initialize (file:///Users/aaggarwal/Documents/Sumo-Repo/sumo-ui-test/UIE2ETests/node_modules/@wdio/config/build/lib/ConfigParser.js:47:13)
at async Launcher.run (file:///Users/aaggarwal/Documents/Sumo-Repo/sumo-ui-test/UIE2ETests/node_modules/@wdio/cli/build/launcher.js:37:9)