Why can I not use 'import' in my wdio.conf.js file? I am trying to use HtmlReporter for WebDriverIO

Question

I am trying to configure and use HTML Reporter for WebDriverIO as per the instructions here: https://webdriver.io/docs/rpii-wdio-html-reporter.html

It says that I need to add an import statement in my wdio.conf.js file like this:

// wdio.conf.js
import { ReportAggregator, HtmlReporter} from '@rpii/wdio-html-reporter' ;
module.exports = {

However, when I do that and try to run my tests I get the following error:

import { ReportAggregator, HtmlReporter} from '@rpii/wdio-html-reporter' ; ^

SyntaxError: Unexpected token {

It won't let me use any import statements here at all.

Does anybody know why not?

Here is my full wdio.conf.js content:

const config = require('./Lib/config')
// wdio.conf.js
import { ReportAggregator, HtmlReporter} from '@rpii/wdio-html-reporter' ;

exports.config = {

    runner: 'local',
   
    specs: [
        My tests here
    ],
  
    exclude: [

    ],
    
    maxInstances: 10,
    
    capabilities: [{
        
        maxInstances: config.maxInstance,
        //
        browserName: 'chrome',
        
    }],
    
    logLevel: config.logLevel,
  
    bail: config.bail,
   
    baseUrl: 'http://localhost',
   
    waitforTimeout: 15000,
    
    connectionRetryTimeout: 120000,
 
    connectionRetryCount: 3,
    
    services: [   'chromedriver'
      
    ],
    
   
    framework: 'mocha',
  
    reporters: ['spec']
    [HtmlReporter, {
        debug: true,
        outputDir: './reports/html-reports/',
        filename: 'report.html',
        reportTitle: 'Test Report Title',
        
        //to show the report in a browser when done       showInBrowser: true,

   
        useOnAfterCommandForScreenshot: false,

        
        LOG: log4j.getLogger("default")
    }
    ],
    
    mochaOpts: {
        // Babel setup
        require: ['@babel/register'],
        ui: 'bdd',
        timeout: 60000
    },
    
}

Answer 1

instead of using

import { ReportAggregator, HtmlReporter} from '@rpii/wdio-html-reporter' ;

try using

const {ReportAggregator, HtmlReporter} = require('@rpii/wdio-html-reporter');