Skip to content

Does not work when package is in ESM mode #79

Open
@parkuman

Description

@parkuman

Before opening, please confirm:

  • I have searched for duplicate or closed issues and discussions.
  • I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
  • I acknowledge that I will attach a full debug log, otherwise the issue will be closed with no response.

Environment information

# Put output below this line

  System:
    OS: macOS 15.0
    CPU: (8) arm64 Apple M3
    Memory: 85.33 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.10.0 - ~/.nvm/versions/node/v22.10.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.10.0/bin/npm
    pnpm: 9.3.0 - ~/Library/pnpm/pnpm
    bun: 1.0.25 - ~/.bun/bin/bun
  Browsers:
    Chrome: 130.0.6723.117
    Safari: 18.0
  npmPackages:
    @cypress/angular:  0.0.0-development
    @cypress/mount-utils:  0.0.0-development
    @cypress/react:  0.0.0-development
    @cypress/react18:  0.0.0-development
    @cypress/svelte:  0.0.0-development
    @cypress/vue:  0.0.0-development
    @cypress/vue2:  0.0.0-development
    @types/node: 20.3.1 => 20.3.1 (22.9.0, 14.18.63)
    cypress: 12.17.2 => 12.17.2
    cypress-debugger: ^1.0.9 => 1.0.9
    typescript: ^5.6.3 => 5.6.3
  npmGlobalPackages:
    corepack: 0.29.4
    npm: 10.9.0

Describe the bug

When trying to use the package running Cypress in ESM mode (i.e. "type": "module" is set in package.json) there is an error with the Cypress config, no tests can ever run. Reproducible example here: https://github.com/parkuman/cypress-debugger-broken-esm

❯ npm run test

> [email protected] test
> cypress run --browser chrome


DevTools listening on ws://127.0.0.1:56315/devtools/browser/2f3370c7-4baf-4777-9fd0-1919127de6aa
Your configFile is invalid: /Users/parker/code/cypress-debugger-example/cypress.config.ts

It threw an error when required, check the stack trace below:

file:///Users/parker/code/cypress-debugger-example/node_modules/@currents/cypress-debugger-plugin/index.mjs:1
import{ensureBrowserFlags as I,install as G}from"@neuralegion/cypress-har-generator";import a from"path";import S from"chrome-remote-interface";import x from"debug";var l="--remote-debugging-port",T=["chromium"];var o=x("cypress-debugger");o.log=console.log.bind(console);var s,p,g=!1,u={logEntry:[],runtimeConsoleApiCalled:[]};function b(e){return T.includes(e==null?void 0:e.family)}function v(e){let t=e.find(r=>r.slice(0,l.length)===l);return t?Number(t.split("=")[1]):void 0}function F(){let e=process.env.ELECTRON_EXTRA_LAUNCH_ARGS;if(!(e!=null&&e.includes(l)))throw new Error(`Missing ${l} command line switch for Electron browser`);return e.split(" ")}function L(e,t){e.name==="electron"&&(t=F());let r=v(t);return r||(r=4e4+Math.round(Math.random()*25e3),o("Remote Debugging Port not set, using a random port: %d",r),t.push(`${l}=${r}`)),r}async function M(){o("Attaching cdp handlers"),s&&(s.Log.enable(),s.Log.entryAdded(e=>{u.logEntry.push(e.entry)}),s.Runtime.enable(),s.Runtime.consoleAPICalled(e=>{u.runtimeConsoleApiCalled.push(e)}))}async function B(){let r=0,n=async()=>{try{s=await S({port:p}),o("Connected to Chrome DevTools Protocol"),s.on("disconnect",()=>{o("Chrome DevTools Protocol disconnected"),g=!1})}catch(i){if(r+=1,r===5)throw new Error(`Failed to connect to Chrome DevTools Protocol after ${100*r}`);r<5&&(o("Failed to connect to Chrome DevTools Protocol, attempt: %d",r),o("Reconnecting..."),await new Promise(m=>setTimeout(m,100)),await n())}};await n()}function E(e,t){let r=t.args||t;return b(e)?(p=L(e,r),t):o("Warning: An unsupported browser family was used, output will not be logged to console: %s",e.family)}async function P(){if(!p)throw new Error("Remote Debugging Port not set");s&&g&&(o("Closing the current cdp connection"),await s.close()),o("Attempting to connect to Chrome DevTools Protocol"),await B(),g=!0,await M()}function h(){return u}function w(){u={logEntry:[],runtimeConsoleApiCalled:[]}}import c from"fs";var f=e=>{c.existsSync(e)||c.mkdirSync(e,{recursive:!0})},O=(e,t)=>{c.writeFileSync(e,t)},D=e=>c.readFileSync(e),N=e=>{c.unlinkSync(e)},_=e=>{c.existsSync(e)&&c.rmdirSync(e,{recursive:!0})};var d=(e,t="-")=>e.replace(/[/?<>\\:*|%"]/g,t);var y="dump_har",$=(e,t)=>{f(t);let r=a.join(t,d(e.meta.spec));f(r);let n=`${e.meta.test.join(" -- ")} (${e.meta.state})${e.meta.retryAttempt>0?` (attempt ${e.meta.retryAttempt+1})`:""}`,i=a.join(r,`${d(n)}.json`);return O(i,JSON.stringify(e,null,2)),i},H=e=>{try{let t=a.join(y,e),r=D(t),n=JSON.parse(r.toString("utf-8"));return N(t),n}catch(t){return null}};function U(e,t,r){return r!=null&&r.failedTestsOnly&&(t.env.__cypress_debugger_failedTestsOnly=!0),e("task",{dumpEvents(n){let i=H(n.harFilename),m=h();w();let C={id:n.id,cy:n.cy,rr:n.rr,meta:n.meta,har:i,browserLogs:m,pluginMeta:r==null?void 0:r.meta},A=r!=null&&r.targetDirectory&&a.resolve(r.targetDirectory)!==a.resolve(y)?r.targetDirectory:"dump",R=$(C,A);return r&&r.callback&&r.callback(R,C),null},cleanup(){return _(y),null}}),G(e),e("before:browser:launch",(n,i)=>(I(n,i),E(n,i),i)),e("before:spec",async()=>{await P()}),t}var k=U;export{k as installPlugin};
                               ^^^^^^^
SyntaxError: Named export 'install' not found. The requested module '@neuralegion/cypress-har-generator' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@neuralegion/cypress-har-generator';
const {ensureBrowserFlags: I,install: G}from"@neuralegion/cypress-har-generator";import a from"path";import S from"chrome-remote-interface";import x from"debug";var l="--remote-debugging-port",T=["chromium"];var o=x("cypress-debugger");o.log=console.log.bind(console);var s,p,g=!1,u={logEntry:[],runtimeConsoleApiCalled:[]};function b(e){return T.includes(e==null?void 0:e.family)}function v(e){let t=e.find(r=>r.slice(0,l.length)===l);return t?Number(t.split("=")[1]):void 0}function F(){let e=process.env.ELECTRON_EXTRA_LAUNCH_ARGS;if(!(e!=null&&e.includes(l)))throw new Error(`Missing ${l} command line switch for Electron browser`);return e.split(" ")}function L(e,t){e.name==="electron"&&(t=F());let r=v(t);return r||(r=4e4+Math.round(Math.random()*25e3),o("Remote Debugging Port not set, using a random port: %d",r),t.push(`${l}=${r}`)),r}async function M(){o("Attaching cdp handlers"),s&&(s.Log.enable(),s.Log.entryAdded(e=>{u.logEntry.push(e.entry)}),s.Runtime.enable(),s.Runtime.consoleAPICalled(e=>{u.runtimeConsoleApiCalled.push(e)}))}async function B(){let r=0,n=async()=>{try{s=await S({port:p}),o("Connected to Chrome DevTools Protocol"),s.on("disconnect",()=>{o("Chrome DevTools Protocol disconnected"),g=!1})}catch(i){if(r+=1,r===5)throw new Error(`Failed to connect to Chrome DevTools Protocol after ${100*r}`);r<5&&(o("Failed to connect to Chrome DevTools Protocol, attempt: %d",r),o("Reconnecting..."),await new Promise(m=>setTimeout(m,100)),await n())}};await n()}function E(e,t){let r=t.args||t;return b(e)?(p=L(e,r),t):o("Warning: An unsupported browser family was used, output will not be logged to console: %s",e.family)}async function P(){if(!p)throw new Error("Remote Debugging Port not set");s&&g&&(o("Closing the current cdp connection"),await s.close()),o("Attempting to connect to Chrome DevTools Protocol"),await B(),g=!0,await M()}function h(){return u}function w(){u={logEntry:[],runtimeConsoleApiCalled:[]}}import c from"fs";var f=e=>{c.existsSync(e)||c.mkdirSync(e,{recursive:!0})},O=(e,t)=>{c.writeFileSync(e,t)},D=e=>c.readFileSync(e),N=e=>{c.unlinkSync(e)},_=e=>{c.existsSync(e)&&c.rmdirSync(e,{recursive:!0})};var d=(e,t="-")=>e.replace(/[/?<>\\:*|%"]/g,t);var y="dump_har",$=(e,t)=>{f(t);let r=a.join(t,d(e.meta.spec));f(r);let n=`${e.meta.test.join(" -- ")} (${e.meta.state})${e.meta.retryAttempt>0?` (attempt ${e.meta.retryAttempt+1})`:""}`,i=a.join(r,`${d(n)}.json`);return O(i,JSON.stringify(e,null,2)),i},H=e=>{try{let t=a.join(y,e),r=D(t),n=JSON.parse(r.toString("utf-8"));return N(t),n}catch(t){return null}};function U(e,t,r){return r!=null&&r.failedTestsOnly&&(t.env.__cypress_debugger_failedTestsOnly=!0),e("task",{dumpEvents(n){let i=H(n.harFilename),m=h();w();let C={id:n.id,cy:n.cy,rr:n.rr,meta:n.meta,har:i,browserLogs:m,pluginMeta:r==null?void 0:r.meta},A=r!=null&&r.targetDirectory&&a.resolve(r.targetDirectory)!==a.resolve(y)?r.targetDirectory:"dump",R=$(C,A);return r&&r.callback&&r.callback(R,C),null},cleanup(){return _(y),null}}),G(e),e("before:browser:launch",(n,i)=>(I(n,i),E(n,i),i)),e("before:spec",async()=>{await P()}),t}var k=U;export{k: installPlugin} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:177:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:260:5)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26)
    at async loadFile (/Users/parker/Library/Caches/Cypress/12.17.2/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:106:14)
    at async EventEmitter.<anonymous> (/Users/parker/Library/Caches/Cypress/12.17.2/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:116:32)

Expected behavior

Cypress starts and the tests run.

Command and Setup

See this reproducible example:[](https://github.com/parkuman/cypress-debugger-broken-esm)

Command (share the exact cypress or cypress-cloud command you're running)

# Put output below this line
cypress run --browser chrome

Setup files cypress.config.j|ts|json

# Put output below this line
import { defineConfig } from "cypress";
import { debuggerPlugin } from "cypress-debugger";

export default defineConfig({
  e2e: {
    excludeSpecPattern: "*.js",
    specPattern: "./cypress/integration/*.cy.ts",
    fixturesFolder: "./cypress/fixtures",
    video: true,
    videoUploadOnPasses: false,
    videoCompression: false,
    viewportWidth: 1920,
    viewportHeight: 1080,
    setupNodeEvents(on, config) {
      debuggerPlugin(on, config);
      return config;
    },
  },
});

Full log and debug output

# Put your logs below this line
the logs are too long

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions