Question: Error when import getAvailableIcons from @grafana/ui in plugin-e2e

[vitPinchuk]

Faced a problem when using @grafana/plugin-e2e and iport in another file import { getAvailableIcons } from '@grafana/ui';

Error: require() of ES Module /home/vitali/work/volkovlabs/business-forms/node_modules/d3-interpolate/src/index.js from /home/vitali/work/volkovlabs/business-forms/node_modules/@grafana/data/dist/index.js not supported.
Instead change the require of /home/vitali/work/volkovlabs/business-forms/node_modules/d3-interpolate/src/index.js in /home/vitali/work/volkovlabs/business-forms/node_modules/@grafana/data/dist/index.js to a dynamic import() which is available in all CommonJS modules.

folders structure for example

├── src
│   ├── constants
│   │   ├── form-elements.ts
├── test
│   ├── panel.spec.ts

I have file form-elements.ts
Here is an example code

import { SelectableValue } from '@grafana/data';
import { getAvailableIcons } from '@grafana/ui';

export const enum FormElementType { 
....
}

/**
 * Icon Options
 */
export const ICON_OPTIONS = getAvailableIcons().map((name) => ({
......
}));

When I import FormElementType into my panel.spec.ts and use it in the test, after that when I run npx playwright test I get an error:
I'm faced with a problem with imports.
If I remove the import import { getAvailableIcons } from '@grafana/ui'; from form-elements.ts file, the test works properly.

Error: require() of ES Module /home/vitali/work/volkovlabs/business-forms/node_modules/d3-interpolate/src/index.js from /home/vitali/work/volkovlabs/business-forms/node_modules/@grafana/data/dist/index.js not supported.
Instead change the require of /home/vitali/work/volkovlabs/business-forms/node_modules/d3-interpolate/src/index.js in /home/vitali/work/volkovlabs/business-forms/node_modules/@grafana/data/dist/index.js to a dynamic import() which is available in all CommonJS modules.

import { test, expect } from '@grafana/plugin-e2e';
import { ModalHelper, PanelHelper } from './utils';
import { FormElementType } from '../src/constants/form-element';

 test.describe('Base', () => {
    test('DO smth', async ({ gotoDashboardPage, readProvisionedDashboard }) => {
    .... some code
/**
       * Example usage
       */
await elements.checkElementPresence('dateTime', FormElementType.DATETIME);

}
})

At this point, I can split files into separate files that contain types and constants. And avoid using files with import import { getAvailableIcons } from '@grafana/ui in e2e tests.

I am not sure if the problem at the moment is not related to the use of imports in '@grafana/plugin-e2e'
I would be grateful if you could check this issue and confirm the problem or recommend a possible solution other than splitting the functionality into different files

[sunker]

Thanks for reporting this issue @vitPinchuk!

This appears to be a known issue with Playwright. You may want to try any of the workarounds suggested in the linked issue. Not tested myself, but it may be worth exploring if Node 22's improved support for esm provides a solution to this problem.

Since this is not a bug in plugin-e2e but rather a problem with Playwright, I'll close this issue. Feel free to re-open if you feel the need to.

[vitPinchuk]

@sunker Thank you for your help.

I`ll check one of the workarounds