Mac Monterey环境下Node运行Lighthouse时chrome-launcher启动失败

问题背景 #

在Mac Monterey开发环境中使用Node运行Lighthouse，TypeScript编译正常，但chrome-launcher无法启动。Chrome路径为/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome，执行which google-chrome返回not found。

代码示例 #

import ChromeLauncher from "chrome-launcher";

const chromeOptions = {
  chromeFlags: ["--headless", "--disable-gpu"],
};

async function launchChrome() {
  try {
    const chrome = await ChromeLauncher.launch(chromeOptions);
    console.log("chrome running!");
    return chrome;
  } catch (e) {
    console.log("**** Chrome failed to launch", e);
    debugger; // 总是进入这里
    throw e;
  }
}

报错信息 #

**** Chrome failed to launch TypeError: Cannot read properties of undefined (reading 'launch')
at launchChrome (webpack-internal:///(api)/./src/server/reporting/lighthouseRunner.ts:35:84)

已尝试但未解决的方案 #

• 设置环境变量CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google\ Chrome"
• 移除并重新安装chrome-launcher（版本^0.15.1），删除node_modules后重装所有依赖
• 为Google\ Chrome创建指向google-chrome的符号链接，但终端无法运行
• 复制Google\ Chrome为google-chrome，现在可在终端启动（有警告）但chrome-launcher仍无法启动

终端启动google-chrome的警告信息 #

$ google-chrome
[41560:259:0321/104228.826676:ERROR:keychain_password_mac.mm(103)] Keychain lookup failed: Error Domain=NSOSStatusErrorDomain Code=-25293 "errKCAuthFailed / errSecAuthFailed:  / Authorization/Authentication failed." (-25293)
Opening in existing browser session.
objc[41574]: Class WebSwapCGLLayer is implemented in both /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x224b7db50) and /Applications/Google Chrome.app/Contents/Frameworks/Google Chrome Framework.framework/Versions/111.0.5563.64/Libraries/libGLESv2.dylib (0x10db57c28). One of the two will be used. Which one is undefined."

解决方案 #

1. 修正chrome-launcher的导入方式 #

报错表明导入的ChromeLauncher对象不存在launch方法，是导出方式不匹配导致的。可以改用以下两种导入方式：

// 方式1：导入整个模块
import * as ChromeLauncher from "chrome-launcher";

// 方式2：直接导入launch方法
import { launch } from "chrome-launcher";
// 调用时直接用launch(chromeOptions)

2. 显式指定Chrome路径 #

在配置中直接添加chromePath参数，跳过环境变量的配置环节，注意路径无需转义空格：

const chromeOptions = {
  chromeFlags: ["--headless", "--disable-gpu"],
  chromePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
};

3. 检查webpack配置（若使用） #

如果项目通过webpack打包，需避免chrome-launcher被tree-shaking误删，可在webpack配置中添加externals：

module.exports = {
  externals: {
    "chrome-launcher": "commonjs chrome-launcher"
  }
};

4. 验证Chrome可执行权限 #

确保Chrome执行文件有运行权限，执行以下命令：

chmod +x "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

5. 尝试Chrome Canary（可选） #

若上述方法无效，可安装Chrome Canary，chrome-launcher通常能自动检测到它，也可显式指定路径：

chromePath: "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary"

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