@nx/cypress 23.0.0-beta.15 → 23.0.0-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/cypress",
-  "version": "23.0.0-beta.15",
+  "version": "23.0.0-beta.16",
   "private": false,
   "description": "The Nx Plugin for Cypress contains executors and generators allowing your workspace to use the powerful Cypress integration testing capabilities.",
   "repository": {
@@ -24,6 +24,45 @@
   "main": "./index.js",
   "type": "commonjs",
   "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json",
+    "./package": "./package.json",
+    "./generators.json": "./generators.json",
+    "./executors.json": "./executors.json",
+    "./migrations.json": "./migrations.json",
+    "./generators": "./generators.json",
+    "./executors": "./executors.json",
+    "./migrations": "./migrations.json",
+    "./plugin": {
+      "types": "./plugin.d.ts",
+      "default": "./plugin.js"
+    },
+    "./plugin.js": {
+      "types": "./plugin.d.ts",
+      "default": "./plugin.js"
+    },
+    "./plugins/*": {
+      "types": "./plugins/*.d.ts",
+      "default": "./plugins/*.js"
+    },
+    "./plugins/*.js": {
+      "types": "./plugins/*.d.ts",
+      "default": "./plugins/*.js"
+    },
+    "./src/*/schema.json": "./src/*/schema.json",
+    "./src/*": {
+      "types": "./src/*.d.ts",
+      "default": "./src/*.js"
+    },
+    "./src/*.js": {
+      "types": "./src/*.d.ts",
+      "default": "./src/*.js"
+    }
+  },
   "author": "Victor Savkin",
   "license": "MIT",
   "bugs": {
@@ -37,9 +76,9 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nx/devkit": "23.0.0-beta.15",
-    "@nx/eslint": "23.0.0-beta.15",
-    "@nx/js": "23.0.0-beta.15",
+    "@nx/devkit": "23.0.0-beta.16",
+    "@nx/eslint": "23.0.0-beta.16",
+    "@nx/js": "23.0.0-beta.16",
     "@phenomnomnominal/tsquery": "~6.2.0",
     "detect-port": "^2.1.0",
     "semver": "^7.6.3",
@@ -47,7 +86,7 @@
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "nx": "23.0.0-beta.15"
+    "nx": "23.0.0-beta.16"
   },
   "peerDependencies": {
     "cypress": ">= 13 < 16"

package/plugins/cypress-preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cypress-preset.d.ts","sourceRoot":"","sources":["../../../../packages/cypress/plugins/cypress-preset.ts"],"names":[],"mappings":"AAUA,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAYxC,UAAU,iBAAiB;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAC5B;AAID,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC;CAAG;AAEvD,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE;IAAE,WAAW,EAAE,WAAW,GAAG,KAAK,CAAA;CAAE,GAC7C,iBAAiB,CAwBnB;AA6CD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CACzB,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,yBAAyB,OAkEpC;AA0DD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;QAII;IACJ,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;OAEG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC;CACpC,CAAC"}
+{"version":3,"file":"cypress-preset.d.ts","sourceRoot":"","sources":["../../../../packages/cypress/plugins/cypress-preset.ts"],"names":[],"mappings":"AAWA,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAYxC,UAAU,iBAAiB;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAC5B;AAID,MAAM,WAAW,+BACf,SAAQ,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC;CAAG;AAEvD,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE;IAAE,WAAW,EAAE,WAAW,GAAG,KAAK,CAAA;CAAE,GAC7C,iBAAiB,CAiCnB;AA6CD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CACzB,YAAY,EAAE,MAAM,EACpB,OAAO,CAAC,EAAE,yBAAyB,OAkEpC;AA0DD,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;QAII;IACJ,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE3C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC;;OAEG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC;CACpC,CAAC"}

package/plugins/cypress-preset.js

@@ -10,6 +10,7 @@ const fs_1 = require("fs");
 const http_1 = require("http");
 const https_1 = require("https");
 const path_1 = require("path");
+const url_1 = require("url");
 const preprocessor_vite_1 = tslib_1.__importDefault(require("../src/plugins/preprocessor-vite"));
 const constants_1 = require("../src/utils/constants");
 const treeKill = require('tree-kill');
@@ -17,11 +18,20 @@ function nxBaseCypressPreset(pathToConfig, options) {
     // used to set babel settings for react CT.
     process.env.NX_CYPRESS_COMPONENT_TEST =
         options?.testingType === 'component' ? 'true' : 'false';
+    // ESM-shape configs pass `import.meta.url` (a `file://...` URL string) so
+    // the same expression works under both Node's native TS strip (ESM,
+    // import.meta.url defined) and Cypress's bundled tsx CJS loader, which
+    // exposes `import.meta.url` but not `import.meta.dirname`. CJS-shape
+    // configs still pass `__filename` directly. Normalize either form to a
+    // filesystem path before stat-checking.
+    const resolvedPath = pathToConfig?.startsWith('file://')
+        ? (0, url_1.fileURLToPath)(pathToConfig)
+        : pathToConfig;
     // prevent from placing path outside the root of the workspace
     // if they pass in a file or directory
-    const normalizedPath = (0, fs_1.lstatSync)(pathToConfig).isDirectory()
-        ? pathToConfig
-        : (0, path_1.dirname)(pathToConfig);
+    const normalizedPath = (0, fs_1.lstatSync)(resolvedPath).isDirectory()
+        ? resolvedPath
+        : (0, path_1.dirname)(resolvedPath);
     const projectPath = (0, path_1.relative)(devkit_1.workspaceRoot, normalizedPath);
     const offset = (0, path_1.relative)(normalizedPath, devkit_1.workspaceRoot);
     const isTsSolutionSetup = (0, internal_1.isUsingTsSolutionSetup)();

package/src/generators/base-setup/base-setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-setup.d.ts","sourceRoot":"","sources":["../../../../../../packages/cypress/src/generators/base-setup/base-setup.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,IAAI,EAOL,MAAM,YAAY,CAAC;AAKpB,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB;;;SAGK;IACL,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,sBAAsB,QAuGhC"}
+{"version":3,"file":"base-setup.d.ts","sourceRoot":"","sources":["../../../../../../packages/cypress/src/generators/base-setup/base-setup.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,IAAI,EAOL,MAAM,YAAY,CAAC;AAKpB,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB;;;SAGK;IACL,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,sBAAsB,QA+FhC"}

package/src/generators/base-setup/base-setup.js

@@ -35,16 +35,12 @@ function addBaseCypressSetup(tree, options) {
     (0, devkit_1.generateFiles)(tree, isUsingTsSolutionConfig
         ? (0, path_1.join)(__dirname, 'files/tsconfig/ts-solution')
         : (0, path_1.join)(__dirname, 'files/tsconfig/non-ts-solution'), projectConfig.root, templateVars);
+    const isEsm = (0, internal_1.isEsmProject)(tree, projectConfig.root);
     if (options.js) {
-        if (isEsmProject(tree, projectConfig.root)) {
-            (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files/config-js-esm'), projectConfig.root, templateVars);
-        }
-        else {
-            (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files/config-js-cjs'), projectConfig.root, templateVars);
-        }
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, isEsm ? 'files/config-js-esm' : 'files/config-js-cjs'), projectConfig.root, templateVars);
     }
     else {
-        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, 'files/config-ts'), projectConfig.root, templateVars);
+        (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, isEsm ? 'files/config-ts-esm' : 'files/config-ts-cjs'), projectConfig.root, templateVars);
     }
     if (opts.hasTsConfig) {
         (0, devkit_1.updateJson)(tree, (0, devkit_1.joinPathFragments)(projectConfig.root, 'tsconfig.json'), (json) => {
@@ -80,16 +76,6 @@ function normalizeOptions(tree, projectConfig, options) {
         hasTsConfig,
     };
 }
-function isEsmProject(tree, projectRoot) {
-    let packageJson;
-    if (tree.exists((0, devkit_1.joinPathFragments)(projectRoot, 'package.json'))) {
-        packageJson = (0, devkit_1.readJson)(tree, (0, devkit_1.joinPathFragments)(projectRoot, 'package.json'));
-    }
-    else {
-        packageJson = (0, devkit_1.readJson)(tree, 'package.json');
-    }
-    return packageJson.type === 'module';
-}
 function isEslintInstalled(tree) {
     const { dependencies, devDependencies } = (0, devkit_1.readJson)(tree, 'package.json');
     return !!(dependencies?.eslint || devDependencies?.eslint);

package/src/generators/base-setup/files/config-ts-cjs/cypress.config.ts__ext__

@@ -0,0 +1,3 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({});

package/src/generators/base-setup/files/config-ts-esm/__directory__/support/commands.ts__ext__

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+<% if (linter === 'eslint') { %>
+// eslint-disable-next-line @typescript-eslint/no-namespace<% } %>
+declare namespace Cypress {<% if (linter === 'eslint') { %>
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars<% } %>
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/src/utils/config.d.ts

@@ -4,11 +4,17 @@ import type { NxComponentTestingOptions, NxCypressE2EPresetOptions } from '../..
 export declare const CYPRESS_CONFIG_FILE_NAME_PATTERN = "cypress.config.{js,ts,mjs,cjs}";
 export declare function addDefaultE2EConfig(cyConfigContents: string, options: NxCypressE2EPresetOptions, baseUrl: string): Promise<string>;
 /**
- * Adds the nxComponentTestingPreset to the cypress config file
- * Make sure after calling this the correct import statement is addeda
- * to bring in the nxComponentTestingPreset function
+ * Adds the nxComponentTestingPreset to the cypress config file.
+ *
+ * Pass `presetImportPath` (e.g. `@nx/angular/plugins/component-testing`) to
+ * have the matching `import` (ESM) or `const { ... } = require(...)` (CJS)
+ * statement prepended automatically based on the detected module shape.
+ * Without it, the caller is responsible for prepending the import - but
+ * doing so unconditionally produces mixed-syntax files in CJS workspaces
+ * (an ESM `import` followed by a CJS `module.exports`), so prefer passing
+ * `presetImportPath`.
  **/
-export declare function addDefaultCTConfig(cyConfigContents: string, options?: NxComponentTestingOptions): Promise<string>;
+export declare function addDefaultCTConfig(cyConfigContents: string, options?: NxComponentTestingOptions, presetImportPath?: string): Promise<string>;
 /**
  * Adds the mount command for Cypress
  * Make sure after calling this the correct import statement is added

package/src/utils/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../packages/cypress/src/utils/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,IAAI,EAAE,MAAM,YAAY,CAAC;AAEhE,OAAO,KAAK,EAOV,uBAAuB,EAIxB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EACV,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAEtC,eAAO,MAAM,gCAAgC,mCACX,CAAC;AAMnC,wBAAsB,mBAAmB,CACvC,gBAAgB,EAAE,MAAM,EACxB,OAAO,EAAE,yBAAyB,EAClC,OAAO,EAAE,MAAM,mBAsDhB;AAED;;;;IAII;AACJ,wBAAsB,kBAAkB,CACtC,gBAAgB,EAAE,MAAM,EACxB,OAAO,GAAE,yBAA8B,mBA8CxC;AAED;;;;IAII;AACJ,wBAAsB,kBAAkB,CAAC,sBAAsB,EAAE,MAAM,mBAgCtE;AAED,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,MAAM,GAClB,MAAM,CASR;AAED,wBAAgB,0BAA0B,CACxC,qBAAqB,EAAE,MAAM,GAC5B,uBAAuB,GAAG,IAAI,CAqChC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../../packages/cypress/src/utils/config.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,IAAI,EAAE,MAAM,YAAY,CAAC;AAEhE,OAAO,KAAK,EAOV,uBAAuB,EAIxB,MAAM,YAAY,CAAC;AACpB,OAAO,KAAK,EACV,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAEtC,eAAO,MAAM,gCAAgC,mCACX,CAAC;AAMnC,wBAAsB,mBAAmB,CACvC,gBAAgB,EAAE,MAAM,EACxB,OAAO,EAAE,yBAAyB,EAClC,OAAO,EAAE,MAAM,mBAmEhB;AAED;;;;;;;;;;IAUI;AACJ,wBAAsB,kBAAkB,CACtC,gBAAgB,EAAE,MAAM,EACxB,OAAO,GAAE,yBAA8B,EACvC,gBAAgB,CAAC,EAAE,MAAM,mBAmE1B;AAED;;;;IAII;AACJ,wBAAsB,kBAAkB,CAAC,sBAAsB,EAAE,MAAM,mBAgCtE;AAED,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,MAAM,GAClB,MAAM,CASR;AAED,wBAAgB,0BAA0B,CACxC,qBAAqB,EAAE,MAAM,GAC5B,uBAAuB,GAAG,IAAI,CAqChC"}

package/src/utils/config.js

@@ -54,7 +54,17 @@ async function addDefaultE2EConfig(cyConfigContents, options, baseUrl) {
     const testingTypeConfig = tsquery.query(cyConfigContents, `${TS_QUERY_EXPORT_CONFIG_PREFIX} PropertyAssignment:has(Identifier[name="e2e"])`);
     let updatedConfigContents = cyConfigContents;
     if (testingTypeConfig.length === 0) {
-        const configValue = `nxE2EPreset(__filename, ${JSON.stringify(options, null, 2)
+        // ESM-shape configs use `import.meta.url` (a `file://...` URL string)
+        // because it's the most universally available `import.meta` field:
+        // Node's native TS strip exposes it in ESM scope, and Cypress's bundled
+        // tsx CJS loader provides it too (unlike `import.meta.dirname`, which
+        // older tsx versions don't shim). CJS-shape configs use `__filename`
+        // since `import.meta` isn't defined in plain CJS scope. The base
+        // template is selected to match the workspace's `type` field, so the
+        // shape detected here is consistent with how the file will actually be
+        // evaluated at runtime. `nxBaseCypressPreset` normalizes either form.
+        const pathToConfig = isCommonJS ? '__filename' : 'import.meta.url';
+        const configValue = `nxE2EPreset(${pathToConfig}, ${JSON.stringify(options, null, 2)
             .split('\n')
             .join('\n    ')})`;
         updatedConfigContents = tsquery.replace(cyConfigContents, `${TS_QUERY_EXPORT_CONFIG_PREFIX} ObjectLiteralExpression:first-child`, (node) => {
@@ -64,7 +74,7 @@ async function addDefaultE2EConfig(cyConfigContents, options, baseUrl) {
   ${node.properties.map((p) => p.getText()).join(',\n')},
   e2e: {
     ...${configValue}${baseUrlContents}
-  } 
+  }
 }`;
             }
             return `{
@@ -73,6 +83,9 @@ async function addDefaultE2EConfig(cyConfigContents, options, baseUrl) {
   }
 }`;
         });
+        // @nx/cypress's package exports cover both bare and `.js`-suffixed
+        // subpath forms, so emit the bare path - matches addDefaultCTConfig and
+        // keeps generated configs free of incidental `.js` noise.
         return isCommonJS
             ? `const { nxE2EPreset } = require('@nx/cypress/plugins/cypress-preset');
 ${updatedConfigContents}`
@@ -82,33 +95,44 @@ ${updatedConfigContents}`;
     return updatedConfigContents;
 }
 /**
- * Adds the nxComponentTestingPreset to the cypress config file
- * Make sure after calling this the correct import statement is addeda
- * to bring in the nxComponentTestingPreset function
+ * Adds the nxComponentTestingPreset to the cypress config file.
+ *
+ * Pass `presetImportPath` (e.g. `@nx/angular/plugins/component-testing`) to
+ * have the matching `import` (ESM) or `const { ... } = require(...)` (CJS)
+ * statement prepended automatically based on the detected module shape.
+ * Without it, the caller is responsible for prepending the import - but
+ * doing so unconditionally produces mixed-syntax files in CJS workspaces
+ * (an ESM `import` followed by a CJS `module.exports`), so prefer passing
+ * `presetImportPath`.
  **/
-async function addDefaultCTConfig(cyConfigContents, options = {}) {
+async function addDefaultCTConfig(cyConfigContents, options = {}, presetImportPath) {
     if (!cyConfigContents) {
         throw new Error('The passed in cypress config file is empty!');
     }
     const { tsquery } = await Promise.resolve().then(() => __importStar(require('@phenomnomnominal/tsquery')));
+    const isCommonJS = tsquery.query(cyConfigContents, TS_QUERY_COMMON_JS_EXPORT_SELECTOR).length >
+        0;
     const testingTypeConfig = tsquery.query(cyConfigContents, `${TS_QUERY_EXPORT_CONFIG_PREFIX} PropertyAssignment:has(Identifier[name="component"])`);
     let updatedConfigContents = cyConfigContents;
     if (testingTypeConfig.length === 0) {
-        let configValue = 'nxComponentTestingPreset(__filename)';
+        // See addDefaultE2EConfig for the rationale on __filename vs
+        // import.meta.url.
+        const pathToConfig = isCommonJS ? '__filename' : 'import.meta.url';
+        let configValue = `nxComponentTestingPreset(${pathToConfig})`;
         if (options) {
             if (options.bundler !== 'vite') {
                 // vite is the default bundler, so we don't need to set it
                 delete options.bundler;
             }
             if (Object.keys(options).length) {
-                configValue = `nxComponentTestingPreset(__filename, ${JSON.stringify(options)})`;
+                configValue = `nxComponentTestingPreset(${pathToConfig}, ${JSON.stringify(options)})`;
             }
         }
         updatedConfigContents = tsquery.replace(cyConfigContents, `${TS_QUERY_EXPORT_CONFIG_PREFIX} ObjectLiteralExpression:first-child`, (node) => {
             if (node.properties.length > 0) {
                 return `{
   ${node.properties.map((p) => p.getText()).join(',\n')},
-  component: ${configValue} 
+  component: ${configValue}
 }`;
             }
             return `{
@@ -116,6 +140,19 @@ async function addDefaultCTConfig(cyConfigContents, options = {}) {
 }`;
         });
     }
+    if (presetImportPath) {
+        // Use the path verbatim - callers pass the public exported subpath. Don't
+        // append `.js`: @nx/react and @nx/angular's package exports only declare
+        // the bare `./plugins/component-testing` subpath, so a `.js` suffix
+        // breaks strict ESM resolution with ERR_PACKAGE_PATH_NOT_EXPORTED.
+        // (addDefaultE2EConfig hard-codes `.js` because @nx/cypress has no
+        // exports map - it can get away with the suffix; subpath-exporting
+        // packages cannot.)
+        const prefix = isCommonJS
+            ? `const { nxComponentTestingPreset } = require('${presetImportPath}');\n`
+            : `import { nxComponentTestingPreset } from '${presetImportPath}';\n`;
+        return `${prefix}${updatedConfigContents}`;
+    }
     return updatedConfigContents;
 }
 /**