lighthouse

can't import startFlow from lighthouse/lighthouse-core/fraggle-rock/api.js


I'm trying to test run the examples of lighthouse code with user flow here: https://web.dev/lighthouse-user-flows/ the code:

import fs from 'fs';
import open from 'open';
import puppeteer from 'puppeteer';
import {startFlow} from 'lighthouse/lighthouse-core/fraggle-rock/api.js';

async function captureReport() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();

  const flow = await startFlow(page, {name: 'Single Navigation'});
  await flow.navigate('https://web.dev/performance-scoring/');

  await browser.close();

  const report = await flow.generateReport();
  fs.writeFileSync('flow.report.html', report);
  open('flow.report.html', {wait: false});
}

captureReport();

I installed lighthouse as the post:

Default to ES modules.

echo '{"type": "module"}' > package.json

Init npm project without the wizard.

npm init -y

Dependencies for these examples.

npm install lighthouse puppeteer open

But when I run my code with command: ode official_example.js, I got below errors: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/xxxx/node_modules/lighthouse/lighthouse-core/fraggle-rock/api.js' imported from /Users/xxxxx/official_example.js at new NodeError (node:internal/errors:399:5) at finalizeResolution (node:internal/modules/esm/resolve:231:11) at moduleResolve (node:internal/modules/esm/resolve:850:10) at defaultResolve (node:internal/modules/esm/resolve:1058:11) at nextResolve (node:internal/modules/esm/hooks:654:28) at Hooks.resolve (node:internal/modules/esm/hooks:309:30) at ESMLoader.resolve (node:internal/modules/esm/loader:312:26) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:172:38) at ModuleWrap. (node:internal/modules/esm/module_job:76:40) at link (node:internal/modules/esm/module_job:75:36) { code: 'ERR_MODULE_NOT_FOUND' }

I check at the node_modules and can't find fraggle-rock folder:

Anyone can help me with this error? Thanks in advance.

Search on Google and ask Chatgpt but no luck.


Solution

  • Using lighthouse v11 (current latest release) you need to import as follows:

    import { startFlow } from 'lighthouse';
    

    It seems they renamed fraggle-rock to user-flow and changed the library structure in v10. See this issue for a bit more info: https://github.com/GoogleChrome/lighthouse/issues/14603. The web.dev article you linked seems to be outdated in this regard.

    You can find up-to-date documentation on the GitHub repo. For example, regarding user-flows: https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md