Bug: Code generation fails when a component imports an asset (eg. svg file) or an ESM module

[cassus]

Given

import React from "react"
import SvgAsset from "./asset.svg"


export function ComponentWithAsset() {
    return <div>
        <img src={SvgAsset} />
    </div>
}

import { ComponentWithAsset } from '../components/ComponentWithAsset';

const { Given, When, Then } = createBdd(test);

Given('Mounted component with asset imported', async ({mount}) => {
  await mount(<ComponentWithAsset />);
});

When I generate the tests

Then

Command failed: node ../node_modules/playwright-bdd/dist/cli && npx playwright test
/Users/cassus/Dev/playwright-bdd/test/component-tests/components/asset.svg:1
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
^

SyntaxError: Unexpected token '<'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.i.<computed>.ut._extensions.<computed> [as .js] (/Users/cassus/Dev/playwright-bdd/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:1010)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/Users/cassus/Dev/playwright-bdd/test/component-tests/components/ComponentWithAsset.tsx:2:1)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module.f._compile (/Users/cassus/Dev/playwright-bdd/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:994)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.i.<computed>.ut._extensions.<computed> [as .tsx] (/Users/cassus/Dev/playwright-bdd/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:1010)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/Users/cassus/Dev/playwright-bdd/test/component-tests/steps-polyfill/steps.tsx:5:1)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module.f._compile (/Users/cassus/Dev/playwright-bdd/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:994)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.i.<computed>.ut._extensions.<computed> [as .tsx] (/Users/cassus/Dev/playwright-bdd/node_modules/@playwright/test/lib/utilsBundleImpl.js:16:1010)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at tryRequire (/Users/cassus/Dev/playwright-bdd/node_modules/@cucumber/cucumber/src/try_require.ts:9:12)
    at /Users/cassus/Dev/playwright-bdd/node_modules/@cucumber/cucumber/src/api/support.ts:30:40
    at Array.map (<anonymous>)
    at getSupportCodeLibrary (/Users/cassus/Dev/playwright-bdd/node_modules/@cucumber/cucumber/src/api/support.ts:30:16)
    at loadSupport (/Users/cassus/Dev/playwright-bdd/node_modules/@cucumber/cucumber/src/api/load_support.ts:30:37)
    at TestFilesGenerator.loadSteps (/Users/cassus/Dev/playwright-bdd/test/node_modules/playwright-bdd/src/gen/index.ts:81:31)
    at async Promise.all (index 1)
    at /Users/cassus/Dev/playwright-bdd/test/node_modules/playwright-bdd/src/gen/index.ts:43:7
    at withExitHandler (/Users/cassus/Dev/playwright-bdd/test/node_modules/playwright-bdd/src/utils/exit.ts:30:12)
    at TestFilesGenerator.generate (/Users/cassus/Dev/playwright-bdd/test/node_modules/playwright-bdd/src/gen/index.ts:41:5)
    at async Promise.all (index 0)
    at Command.<anonymous> (/Users/cassus/Dev/playwright-bdd/test/node_modules/playwright-bdd/src/cli/commands/test.ts:29:5)

But I expect Code generation to work as it works when there is no asset import in the component test

Isolated demo I extended test/component-tests with this case, see my branch at https://github.com/cassus/playwright-bdd/tree/cassus/comp-test-asset

Environment

Playwright-bdd environment info:
platform: darwin
node: v20.10.0
playwright-bdd: v5.6.0
@playwright/test: v1.36.2
@cucumber/cucumber: v9.6.0

Additional thoughts This issue reminds me of the errors I get when I accidentally import a component that uses assets in my e2e playwright tests. It seems like playwright-ct test runner parses the code in a different way that avoids errors like this.

[cassus]

Related:

• https://github.com/microsoft/playwright/issues/22657

[cassus]

Possibly related error during code generation when importing an ESM module from a component. When running playwright component tests this ESM module imports and works fine.

Loading features from: src/**/*.feature
Loading steps from: src/**/*steps.{common,comp}.{ts,tsx}
/Users/cassus/Dev/org-mat-viz/node_modules/@cucumber/cucumber/lib/try_require.js:15
            throw Error(`Cucumber expected a CommonJS module at '${path}' but found an ES module.
                  ^

Error: Cucumber expected a CommonJS module at '/Users/cassus/Dev/org-mat-viz/src/features/participate/e2e/ConditionalQuestions.steps.comp.tsx' but found an ES module.
      Either change the file to CommonJS syntax or use the --import directive instead of --require.
      
      Original error message: require() of ES Module /Users/cassus/Dev/org-mat-viz/node_modules/react-markdown/index.js from /Users/cassus/Dev/org-mat-viz/src/lib/ReactMarkdown/InlineMarkdown.tsx not supported.
Instead change the require of index.js in /Users/cassus/Dev/org-mat-viz/src/lib/ReactMarkdown/InlineMarkdown.tsx to a dynamic import() which is available in all CommonJS modules.
    at tryRequire (/Users/cassus/Dev/org-mat-viz/node_modules/@cucumber/cucumber/src/try_require.ts:12:13)
    at /Users/cassus/Dev/org-mat-viz/node_modules/@cucumber/cucumber/src/api/support.ts:27:40
    at Array.map (<anonymous>)
    at getSupportCodeLibrary (/Users/cassus/Dev/org-mat-viz/node_modules/@cucumber/cucumber/src/api/support.ts:27:16)
    at loadSupport (/Users/cassus/Dev/org-mat-viz/node_modules/@cucumber/cucumber/src/api/load_support.ts:30:37)
    at TestFilesGenerator.loadSteps (/Users/cassus/Dev/org-mat-viz/node_modules/playwright-bdd/src/gen/index.ts:81:31)
    at async Promise.all (index 1)
    at /Users/cassus/Dev/org-mat-viz/node_modules/playwright-bdd/src/gen/index.ts:43:7
    at withExitHandler (/Users/cassus/Dev/org-mat-viz/node_modules/playwright-bdd/src/utils/exit.ts:30:12)
    at TestFilesGenerator.generate (/Users/cassus/Dev/org-mat-viz/node_modules/playwright-bdd/src/gen/index.ts:41:5)
    at async Promise.all (index 0)
    at Command.<anonymous> (/Users/cassus/Dev/org-mat-viz/node_modules/playwright-bdd/src/cli/commands/test.ts:29:5)