lighthouse Playwright- Instead change the require of index.js, to a dynamic import() which is available in all CommonJS modules

[bachhavdipak]

0

I am trying to use lighthouse with my playwright cucumber project but getting below error::

.F--.

Failures:

1. Scenario: Evaluate the performance of the homepage # src\test\features\ecomm\lighthouse.feature:4
   √ Before # src\hooks\hooks.ts:19
   × Given I am on the homepage # src\test\steps\ecomm\lighthouse.ts:34
   Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Playwright\node_modules\playwright-lighthouse\index.js from C:\Playwright\src\pages\example\exampleHomePage.ts not supported.
   Instead change the require of index.js in C:\Playwright\src\pages\example\exampleHomePage.ts to a dynamic import() which is available in all CommonJS modules.
   at require.extensions. [as .js] (C:Playwright\node_modules\ts-node\dist\index.js:851:20)
   at C:Playwright\src\pages\example\exampleHomePage.ts:132:94
   • When I run Lighthouse test # src\test\steps\ecomm\lighthouse.ts:39
   • Then Lighthouse should generate a performance results # src\test\steps\ecomm\lighthouse.ts:43

Feature: Lighthouse

  @lighthouse @ui
  Scenario: Evaluate the performance of the homepage
    Given I am on the homepage
    When I run Lighthouse test
    Then Lighthouse should generate a performance results

StepDef file :

import { LoggerManager, fixture } from "../../../hooks/pageFixture";
import { Given, When, Then } from "@cucumber/cucumber";

import exampleHomePage from "../../../pages/example/exampleHomePage";

let examplePage: exampleHomePage;

Given(`I am on the homepage`, async () => {


  examplePage = new exampleHomePage(fixture.page)

  const response = await examplePage.navigateToHomePage1();

});
 
When(`I run Lighthouse test`, async function () {
    // [When] Describes the action or event that triggers the scenario.
});

Then(`Lighthouse should generate a performance results`, async function () {
    // [Then] Describes the expected outcome or result of the scenario.
});

ExampleHomePage:

import { Page } from "@playwright/test";    


export default class ExampleHomePage {

    private base: baseObjects;
    private assert: pageAssertion;
    private testDataManager = new TestDataManager();

    constructor(private page: Page) {
        this.base = new baseObjects(page);
        this.assert = new pageAssertion(page);
    }

    private Elements = {

    }

    async goto(url: string) {
    console.log("~~~~~~~ BASEURL  ~~~~~~~~ :: ", url)
    await this.page.goto(url, {
      waitUntil: "load"
    });
  }
     async navigateToHomePage1() {
        // Importing 'playwright-lighthouse' using dynamic import
        const { playAudit } = await import('playwright-lighthouse');
        
        // Assuming this.base.navigateToHome1 is defined elsewhere in your code
        this.base.navigateToHome1('https://www.google.co.uk/');
    
        // Invoking playAudit function
        await playAudit({
            page: this.page,
            port: 9222,
            thresholds: {
                performance: 50,
                accessibility: 50,
                'best-practices': 50,
                seo: 50,
                pwa: 50,
            },
            reports: {
                formats: {
                    html: true,
                },
                name: `lighthouse-${new Date().toISOString()}`,
                directory: `${process.cwd()}/lighthouse`,
            },
        });
    }
}

[rasrafat]

I am using the @playwright/test package as well with playwright-lighthouse and getting the same type of error:

Error: require() of ES Module <repo path>/node_modules/playwright-lighthouse/index.js from <repo path>/packages/integration-tests/src/tests/audit.spec.ts not supported.
Instead change the require of index.js in <repo path>/packages/integration-tests/src/tests/pharmacy/audit.spec.ts to a dynamic import() which is available in all CommonJS modules

I am importing the playwright-lighthouse package like this:
import { playAudit } from 'playwright-lighthouse';

And this is my tsconfig.json file:

{
	"compilerOptions": {
		"target": "ES2020",
		"useDefineForClassFields": true,
		"module": "ESNext",
		"esModuleInterop": true,
		"lib": ["ES2020", "DOM", "DOM.Iterable"],
		"skipLibCheck": true,

		"moduleResolution": "bundler",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"baseUrl": "./src",
		"noEmit": true,

		"strict": false,
		"noImplicitAny": false,
		"noUnusedLocals": true,
		"noUnusedParameters": true,
		"noFallthroughCasesInSwitch": true,

		"paths": {
			"~/*": ["*"],
		}
	},
	"include": ["src"]
}

[rasrafat]

As suggested on the stackoverflow link provided on #45, adding:

"type": "module",

to my package.json solved the issue.

[abhishekjha7798]

What if someone does not want to add "type": "module" in their package.json because project is configured with commonjs? How can we use playwright-lighthouse if package type is not a module?

[DerFersy]

Same issue. Suggestion with type in package.json not working

[alphonse92]

I faced this issue, but I resolved it. I tried every suggestion on the web and no one is working. As far as the only solution I found is upgrading playwright and playwright/test to the latest.

This is the solution: I'm using the version 1.46.0, then load the module async

It is not an issue with this library, it is an issue with playwright and its module system. Some of their modules does not support common js

To the author of this module: please add to the readme the note of this versions and the way to load it

[kalicfa]

@alphonse92's response worked for me!

[JangoCG]

What helped for me was to create a helper like this

const dynamicImport = async (packageName: string) =>
  new Function(`return import('${packageName}')`)();

export default dynamicImport;

which I then used like so:
const { playAudit } = await dynamicImport('playwright-lighthouse');