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
    },
    
}

Does this help? https://stackoverflow.com/questions/39436322/node-js-syntaxerror-unexpected-token-import — Raju, Jul 24 '20 at 20:22

score 2 · Accepted Answer · answered Aug 02 '20 at 15:12

2

instead of using

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

try using

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

answered Aug 02 '20 at 15:12

Kaushal Rupani

176
2

score 1 · Answer 2 · answered Jul 25 '20 at 17:27

1

Try adding require('@babel/register'); at the top of the file.

answered Jul 25 '20 at 17:27

Punit Gupta

3,808
1
18
22

Thanks I tried that and it didn't make any difference – Matt Jul 26 '20 at 12:21
Hi @Matt, would you be able to put some sample code in github or somewhere where i can look at? – Raju Jul 26 '20 at 12:44

score 0 · Answer 3 · answered Dec 10 '20 at 21:17

This is ES6 import syntax so you need to compile your config with Babel first or use ES5 import with require. Also you've got a typo in your config, reporters should be an array and inside that array you can set a reporter with a string (with default options) or an array with a name of reporter and an option object like that:

reporters: [ 'spec', [HtmlReporter, { outputDir: './reports/html-reports/', ... } ] ]

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

3 Answers3