New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cucumber-js + Playwright + Angular 13 modules - ES Module loading problem #1987
Comments
Did you properly configured typescript to emit CJS code? Do you think you could set-up a minimal reproducible example within a public repo? |
I think your Cucumber setup looks mostly fine, except this script: "all": "cucumber-js features/**/.feature", I don't think that will run anything, and you mean: "all": "cucumber-js features/**/*.feature", Although that's where we look by default anyway so you could just omit the argument entirely. I think your problem is with trying to mix CommonJS and ESM in your project. Your main project is CommonJS, per your TypeScript config, so it will compile down to That leaves you with the error loading code from In theory you could dynamic import your library e.g. const { Placeholder } = await import('e2e-api-playwright') This doesn't play easily with TypeScript though. |
Thank you @davidjgoss and @aurelien-reeves for the support. I will check further and let you know. |
It is working :) The weird esm error came from "cucumber-junit-formatter": "^0.2.2". CustomWorld.js looks like this: hooks.js looks like this: setDefaultTimeout(60000) const configChrome = { const configFirefox = { // launch the browser // close the browser // Create a new browser context and page per scenario // Cleanup after each scenario After(async function (scenario) { cucumber.js looks like this: I've pushed the changes in the https://github.com/testgitdl/cucumber-playwright-ang13 |
@testgitdl glad you got it working! I had a quick look at your project (thanks for posting), because you're setting some stuff globally it's difficult, but you might be able to add a TS declaration file that augments the global scope - whether IntelliSense would pick this up I don't know. Alternatively:
With that I'll close this issue since there are no ESM-related issues in play any more 👍 |
Hello @davidjgoss! Many thanks for the support!!! D:\Test\cucumber-playwright-master\node_modules\ts-node\dist-raw\node-esm-resolve-implementation.js:383 The working project is avail here: https://github.com/testgitdl/cucumber-playwright-ang13 Also one question, not related but maybe you can help... I am not able to make use of the paths defined in my tsconfig.json. So for example in the login.page.ts |
Your issue with 8.1.1 is that the binary file itself was renamed to fix issues with most ESM loaders. You should avoid pointing at the file itself and instead use the alias that npm creates:
That should do it.
Not sure on that one I'm afraid - sorry! |
@davidjgoss unfortunately then it is another error. Thx for the quick reply!!! D:\Test\Playwright_Tally\cucumber-playwright-master\node_modules.bin\cucumber-js:2 SyntaxError: missing ) after argument list |
@davidjgoss what also is strange is that in my imports I add the .js extension and if I try to remove it like stated in this post (https://stackoverflow.com/questions/63807613/running-node-with-loader-ts-node-esm-js-requires-imports-to-have-the-js-extensi) then I get an invalid module error. |
v8.1.2 has been released which re-adds the original |
@davidjgoss thank you! |
👓 What did you see?
I have setup a Angular 13 project that uses both cucumber-js and playwright. I use cucumber-js as the test runner. This project uses ES Modules as I have "type":"module" in my package.json.
When I try to run my tests with cucumber-js I get ES Module errors
✅ What did you expect to see?
Should be able to run my cucumber tests
📦 Which tool/library version are you using?
Tried also cucumber version 7.3.0 and 8.0.0-rc3. below my package.json
🔬 How could we reproduce it?
This is the way my project looks like
features
->playwright.feature
node_modules
reports
screenshots
src
->steps
---->playwright.steps.ts
->support
---->common-hooks.ts
---->config-chrome.ts
---->config-firefox.ts
---->config.ts
---->custom-world.ts
cucumber.js
tsconfig.json
package.json
e2e-api-playwright-1.0.0.tgz
tsconfig.json:
cucumber.js:
playwright.feature:
playwright.steps.ts:
Steps to reproduce the behavior:
require() of ES modules is not supported.
require() of D:\cucumber-playwright-master\src\steps\playwright.steps.ts from D:\cucumber-playwright-master\node_modules@cucumber\cucumber\lib\api\support.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from D:\cucumber-playwright-master\package.json.'
📚 Any additional context?
Details related to the e2e-api-playwright library:
e2e-api-playwright
->src
---->lib
-------->placeholder.ts
---->public_api.ts
ng-package.json
package.json
tsconfig.lib.json
placeholder.ts:
export class Placeholder {
public t: string;
constructor(private el: string) {
this.t = this.el;
}
public setText() {
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' + this.t);
}
}
public_api.ts:
export { Placeholder } from './lib/placeholder';
tsconfig.lib.json:
{
"compilerOptions": {
"outDir": "../out-tsc/lib",
"baseUrl": ".",
"declarationMap": true,
"target": "es2020",
"module": "es2020",
"moduleResolution": "node",
"declaration": true,
"sourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"types": [],
"lib": [
"dom",
"es2020"
]
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
The text was updated successfully, but these errors were encountered: