How to use custom Playwright Test Page fixture from separate repository with Typescript?

Question

I am trying to create framework on top of playwright where custom fixtures and other methods can be there. All my tests related project can use framework repository.

With that, I maintain a repository @test/framework where I've defined custom Playwright Test fixture which is overriding existing page fixture to navigate to "https://google.com" before every test. I'm encountering a type error when I try to import and use these fixture in my test cases in a separate repository.

In @test/framework repository, within fixtures.ts, I have:

import { test as base } from '@playwright/test';

export const test = base.extend({
  page: async ({ page }, use) => {
    await page.goto("https://google.com");
    await use(page);
  }
});

in another repository, I install my framework project with npm install @test/framework and using in google.spec.ts as

import { test } from '@test/framework';

test('Google', async ({page}) => {
  console.log(await page.title()); // Google
})

now, running npx playwright test gives error as First argument must use the object destructuring pattern: _a

having the same fixture in same test projects rather than separate repository is working fine.

Repository to reproduce the issue framework repo = https://github.com/Ankit3794/playwright-test-framework test repo = https://github.com/Ankit3794/playwright-tests

Clone test repo and run npx playwright test