执行npm start报错TypeError: concurrently(...).then is not a function求助

错误详情 #

执行npm start时触发如下错误：

D:\Full-Stack-Development-Capstone\Frontend\sb-clean-blog-angular-1.2.0\scripts\start.js:14
}).then(success, failure);
   ^

TypeError: concurrently(...).then is not a function
    at Object.<anonymous> (D:\Full-Stack-Development-Capstone\Frontend\sb-clean-blog-angular-1.2.0\scripts\start.js:14:4)
    at Module._compile (node:internal/modules/cjs/loader:1112:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Module._load (node:internal/modules/cjs/loader:834:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

Node.js v18.4.0

对应的脚本代码：

const concurrently = require('concurrently');
const port = process.env.PORT || 4200;

concurrently([
    { command: 'node scripts/pug-watch.js', name: 'PUG_WATCH', prefixColor: 'bgGreen.bold' },
    { 
        command: `npm run ng -- serve --port ${port} --open`,
        name: 'NG_SERVE', 
        prefixColor: 'bgBlue.bold',
    }
], {
    prefix: 'name',
    killOthers: ['failure', 'success'],
}).then(success, failure);

function success() {
    console.log('Success');    
}

function failure() {
    console.log('Failure');
}

问题原因 #

你当前安装的concurrently是v7及以上版本，该版本API已变更，不再直接返回Promise，而是返回包含result属性（Promise类型）的对象或EventEmitter实例，直接调用.then()会触发类型错误。

解决方案 #

方案1：降级concurrently到兼容版本 #

安装v6.x版本（该版本仍返回Promise）：

1. 卸载当前版本：

npm uninstall concurrently

2. 安装指定版本：

npm install concurrently@6 --save-dev

3. 重新执行npm start即可。

方案2：修改脚本适配新版本API #

修改start.js的调用逻辑，获取内部Promise对象：

const concurrently = require('concurrently');
const port = process.env.PORT || 4200;

// 获取result属性（Promise类型）
const { result } = concurrently([
    { command: 'node scripts/pug-watch.js', name: 'PUG_WATCH', prefixColor: 'bgGreen.bold' },
    { 
        command: `npm run ng -- serve --port ${port} --open`,
        name: 'NG_SERVE', 
        prefixColor: 'bgBlue.bold',
    }
], {
    prefix: 'name',
    killOthers: ['failure', 'success'],
});

// 对result调用then方法
result.then(success, failure);

function success() {
    console.log('Success');    
}

function failure() {
    console.log('Failure');
}

或者改用事件监听方式：

const concurrently = require('concurrently');
const port = process.env.PORT || 4200;

const processes = concurrently([
    { command: 'node scripts/pug-watch.js', name: 'PUG_WATCH', prefixColor: 'bgGreen.bold' },
    { 
        command: `npm run ng -- serve --port ${port} --open`,
        name: 'NG_SERVE', 
        prefixColor: 'bgBlue.bold',
    }
], {
    prefix: 'name',
    killOthers: ['failure', 'success'],
});

// 监听成功/失败事件
processes.on('success', success);
processes.on('failure', failure);

function success() {
    console.log('Success');    
}

function failure() {
    console.log('Failure');
}

内容的提问来源于stack exchange，提问作者NMT