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:
echo '{"type": "module"}' > package.json
npm init -y
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.
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