Cypress-cucumber-preprocessor: SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

[ludmilanesvitiy]

Operating System: Linux
Cypress Version: latest
Browser Version: latest
BUG/Question

Current behavior:

I'm trying to create e2e tests with Cypress + Cucumber + Typescript + cypress/webpack-preprocessor
When step-definition file don't have imports/exports - everything works well
But when I'm trying to use PageObjects in TS, using export-import statement, then I got an error like 'import' and 'export' may appear only with 'sourceType: module'

I don't have the possibility to change imports and exports to require and module.export because in my current project I have a lot of PO's and I want to save 2 approaches in tests: default approach and BDD approach

Desired behavior:

Possibilities to use import and export

How to reproduce:

In this PR you can see how to reproduce the issue https://github.com/ludmilanesvitiy/cypress-cucumber-example/pull/1
In the main repository all works well. https://github.com/ludmilanesvitiy/cypress-cucumber-example

[lgandecki]

I believe this work when you configure the typescript for .feature files, as here:
https://github.com/TheBrainFamily/cypress-cucumber-preprocessor#typescript
The way your code works - the fact that you use typescript is ignored

[ludmilanesvitiy]

@lgandecki Thank you for the reply. Yes, in my case looks like TS just ignored, but in your example for compiling is used browserify-preprocessor. But I need webpack-preprocessor. Any ideas how to solve? And what could be wrong here https://github.com/ludmilanesvitiy/cypress-cucumber-example/blob/master/cypress/plugins/index.js?

[drewloomer]

@ludmilanesvitiy Have you found a fix for this? I'm seeing the same error using a similar setup to what you have in your repo.

[ludmilanesvitiy]

@drewloomer No, I don't have a fix for this. Maybe @lgandecki could advice) According to his comments in #114 "I (and most people) used typescript with import/export." - he should know the secrets)

[mkusher]

@drewloomer @ludmilanesvitiy take a look on #115, it should solve your issue

[lgandecki]

Guys, please confirm and close the issue or tell us if you still have problems.

[alveshelio]

Hi,

I'm still having the same issue.

This is the error message I'm getting

/my-project/test/cypress/integration/home-page-filters.spec.ts:3
import { When, Then } from "cypress-cucumber-preprocessor/steps";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

in plugins/index.ts I have

const webpack = require("@cypress/webpack-preprocessor")
const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = on => {
  const options = {
    webpackOptions: require("../webpack.config.js")
  }
  on('file:preprocessor', (file) => {
    if (file.filePath.match(/\.ts$/)) {
      return webpack(options)(file)
    } else {
      return cucumber()(file)
    }
  })
}

This is my webpack.config.js file

module.exports = {
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [{
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'awesome-typescript-loader'
        }]
      },
      {
        test: /\.feature$/,
        use: [{
          loader: "cypress-cucumber-preprocessor/loader"
        }]
      }
    ],
  },
}

My cypress.json file

{
  "ignoreTestFiles": "*.feature"
}

This is my feature file home-page-filters.feature

Feature: Filter content on home page

 I want to filter the content of the home page when I check a filter

  Scenario: Filter content on home page
    Given I open Home page
    Then I check "Filter"
    Then I should only get content of type "Filter"

And this is my home-page-filters.spec.ts file

/// <reference types="cypress" />

import { When, Then } from "cypress-cucumber-preprocessor/steps";

const url = "http://localhost:3000";

When(/^I visite Home page?/, () => {
  cy.visit(url)
});

Then('I check Filter ', () => {
  console.log("filter will be checked")
})

Any help would be appreciated.

Thank you

[ludmilanesvitiy]

@lgandecki I've tried recommendations from #115 but have same problems, for quick reproducing I've added this commit: https://github.com/ludmilanesvitiy/cypress-cucumber-example/pull/1/commits/924b98c3407534428912c2d588bc91fbd453fe77

[mkusher]

@alveshelio
you need to pass everything to webpack, so instead of

    if (file.filePath.match(/\.ts$/)) {
      return webpack(options)(file)
    } else {
      return cucumber()(file)
    }

use:

      return webpack(options)(file)

[mkusher]

@ludmilanesvitiy https://github.com/ludmilanesvitiy/cypress-cucumber-example/commit/924b98c3407534428912c2d588bc91fbd453fe77#diff-4bcea4966f5e62ded90298c2b0907445R22
same as above: pass everything to webpack, not only js/jsx

[lgandecki]

We now have an example for typescript working with webpack:
https://github.com/TheBrainFamily/cypress-cucumber-webpack-typescript-example/

and without it:

https://github.com/TheBrainFamily/cypress-cucumber-typescript-example/

I'm closing this thread for now, if you have a specific issue, after veryfing that the examples work, and that your configuration is in line with them, or if you need to somehow configure things differently - please create a new one and I will be glad to take a look.