如何配置Babel编译ES6 Import？WDIO中Chai加载失败求助

错误原因 #

Chai当前版本已转为纯ES模块，无法通过CommonJS的require()直接引入，而你的wdio.conf.js采用CommonJS格式，且@babel/register的配置未正确处理跨模块格式的加载逻辑，导致报错。

解决方案 #

方案1：将配置文件转为ES模块格式（推荐） #

这是最稳妥的方式，适配ES模块依赖：

1. 把wdio.conf.js重命名为wdio.conf.mjs
2. 修改文件内容为ES模块语法：

import '@babel/register'({
    rootMode: "upward",
    extensions: ['.js', '.mjs']
});

import chai from 'chai';

export default {
    runner: 'local',
    // 保留原有的其他配置内容
}

3. （可选）若需要，可将babel.config.js也转为ES模块格式：

export default {
    presets: [
        ['@babel/preset-env', {
            targets: {
                node: '20'
            }
        }]
    ]
}

方案2：在CommonJS配置中使用动态import #

若不想修改配置文件格式，可通过异步动态import加载Chai：

require('@babel/register')({
    rootMode: "upward",
    extensions: ['.js', '.mjs']
});

let chai;
(async () => {
    chai = await import('chai');
    // 若需在配置中使用Chai，相关逻辑需放在此异步回调内
})();

exports.config = {
    runner: 'local',
    // 保留原有的其他配置内容
}

注意：此方式为异步加载，若配置中需立即使用Chai，可能会出现未初始化的问题，需谨慎使用。

方案3：强制Babel将ES模块转为CommonJS #

修改babel.config.js，强制把ES模块转译为CommonJS：

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                node: '20'
            },
            modules: 'commonjs' // 开启ES模块转CommonJS
        }]
    ]
}

同时更新@babel/register的配置，支持更多文件扩展名：

require('@babel/register')({
    rootMode: "upward",
    extensions: ['.js', '.mjs', '.cjs']
});

const chai = require('chai');

exports.config = {
    runner: 'local',
    // 保留原有的其他配置内容
}

内容的提问来源于stack exchange，提问作者Duy Phạm