Problem with Integration percy/webdriverio in project "Error: ReferenceError: require is not defined in ES module scope, you can use import instead"

[mishko-misha]

Environment (please complete the following information):

• Node.js version: v 20.11.1
• NPM version: 10.8.1
• Platform: Android
• Platform version: 13.0
• Emulator/Simulator/Real Device: Emulator from Browserstack
• TypeScript: 5.4.5

Describe the bug

1. npm install --save-dev @percy/cli @percy/webdriverio
2. Added require and await percySnapshot (see screen) in test
3. Run test

Actual result: I get failed with error "Error: ReferenceError: require is not defined in ES module scope, you can use import instead". (check Logs when I use require.txt)
Logs when I use require.txt

4. Replaced const percySnapshot = require('@percy/webdriverio'); to import percySnapshot from '@percy/webdriverio';

Actual result: I get failed (check Logs when I use import.txt)
Logs when I use import.txt

From Percy: 37950736_cli.json

FYI: I opened @percy/webdriverio and saw @percy/core The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("@percy/core")' call instead.

Additional context
Settings:

Could you give me advice how to fix my problem?

[christian-bromann]

Can you provide a minimal reproduction case?

[mishko-misha]

Can you provide a minimal reproduction case?

1. Clone project
2. Install necessary dependencies ( you can see screenshots above)
3. Created android config
4. Create page object class and test (you can see screenshots above)
5. Run test

Actual result: test works fine and I can check result in browserstack but get error Error: ReferenceError: require is not defined in ES module scope, you can use import instead (also described above)

[christian-bromann]

@mishko-misha can you share a GitHub project that has executed the steps so that maintainers only need to clone, install deps and run a command?

[mishko-misha]

@mishko-misha can you share a GitHub project that has executed the steps so that maintainers only need to clone, install deps and run a command?

yes, I can but without my access to browserstack, percy and app.apk. If you agree, I will send.

by the way: I get similar error from webdriverio/webdriverio#13773
FYI: I updated npm install @wdio/browserstack-service@latest

2024-12-27T12:24:13.932Z DEBUG @wdio/browserstack-service: Failed to fire api request due to TypeError: fetch failed - TypeError: fetch failed at node:internal/deps/undici/undici:12345:11 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at nodeRequest (c:/mobile-ts/node_modules/@wdio/browserstack-service/build/index.js:892:22) at uploadLogs (c:/mobile-ts/node_modules/@wdio/browserstack-service/build/index.js:1753:20) at BrowserstackLauncherService._uploadServiceLogs (c:/mobile-ts/node_modules/@wdio/browserstack-service/build/index.js:3297:22) at BrowserstackLauncherService.onComplete (c:/mobile-ts/node_modules/@wdio/browserstack-service/build/index.js:3168:7) at async file:///C:/mobile-ts/node_modules/@wdio/cli/build/index.js:1119:9 at async Promise.all (index 0) at async #runOnCompleteHook (file:///C:/mobile-ts/node_modules/@wdio/cli/build/index.js:2246:7) at async Launcher.run (file:///C:/mobile-ts/node_modules/@wdio/cli/build/index.js:2227:18) 2024-12-27T12:24:13.932Z DEBUG @wdio/cli:utils: Finished to run "onComplete" hook in 825ms

[christian-bromann]

yes, I can but without my access to browserstack, percy and app.apk. If you agree, I will send.

Ideally, reduce everything unnecessary to reproduce the problem. This error is not related to BrowserStack or which capabilities you are using. The simpler the reproduction case the better.

[mishko-misha]

@christian-bromann my project https://github.com/mishko-misha/Mobile-project/tree/main