cypress-cucumber-preprocessor: TypeScript tests fail with `ParseError: 'import' and 'export' may appear only with 'sourceType: module'`

Thanks, @sloosch & @lgandecki!

I confirm that the diffs above allow use of some TypeScript with cypress-cucumber-preprocessor. However, I notice that one can’t use TypeScript standard import or export statements. Any remedy for either of those shortcomings?

can you try using require instead of import?

@sloosch yeah, that sounds like a workable hack 😃 I might try it. Thanks for the input.

Btw, TypeScript works with 1.2.0! I’ve added instructions to the readme in 1.2.1

@KeithGillette These are the only changes You’d have to make in your repro to get your example to work:

diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
index a63eb04..bde8a9a 100644
--- a/cypress/plugins/index.js
+++ b/cypress/plugins/index.js
@@ -9,14 +9,13 @@
 // ***********************************************************
 
 const cucumber = require('cypress-cucumber-preprocessor').default;
-const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor');
+const browserify = require('@cypress/browserify-preprocessor');
 
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-  on('file:preprocessor', cypressTypeScriptPreprocessor);
-  // on('file:preprocessor', cucumber());
+module.exports = (on) => {
+  on('file:preprocessor', file => {
+      browserify.defaultOptions.browserifyOptions.plugin.push(['tsify'])
+      return cucumber(
+        browserify.defaultOptions
+      )(file);
+  });
 };
diff --git a/cypress/support/step_definitions/facebook.ts b/cypress/support/step_definitions/facebook.ts
index 6c7dbe5..7c01c24 100644
--- a/cypress/support/step_definitions/facebook.ts
+++ b/cypress/support/step_definitions/facebook.ts
@@ -1,4 +1,4 @@
-const {given} = require('cypress-cucumber-preprocessor');
+declare const given;
 
 const url = 'https://facebook.com';
 
diff --git a/package.json b/package.json
index 2a979be..bfc37e2 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "@bahmutov/add-typescript-to-cypress": "^2.0.0",
     "@types/node": "^10.3.4",
     "cypress": "^3.0.1",
-    "cypress-cucumber-preprocessor": "^1.0.0",
+    "cypress-cucumber-preprocessor": "^1.2.1",
+    "tsify": "^4.0.0",
     "typescript": "^2.9.2"
   }
 }

Hi @KeithGillette, we ran into the same problem during evaluation of cypress + gherkin due to this and #52, #51 and #44 (which can be overcome by using a beforeStep-Hook) i have created https://www.npmjs.com/package/gherkin-to-mocha which is a webpack loader which transforms gherkin files into a mocha test suite. By using https://github.com/cypress-io/cypress-webpack-preprocessor you can have feature files and typescript steps/hooks. In the end we have decided against cypress because there is no support for Firefox and IE… anyway you may find the loader useful for your project.

Thanks, I will take a look Friday/Saturday 😃