Cypress: Flow Type Declarations & Annotations Cause Syntax Errors Starting in 3.1.0

[dcypherthis]

Current behavior:

After the 3.1.0 update, something changed with Cypress code bundling where flow-type annotations are no longer recognized and treated as unexpected tokens/syntax errors.

SyntaxError: /cypress/specs/dashboard/login.spec..js: Unexpected token (14:14)

  12 | 
  13 | const loginPage = new LoginPage();
> 14 | const username: string = randomEmail();
     |               ^
  15 | const password: string = randomPassword();
  16 | 
  17 | describe('Login', () => { while parsing file: 
/cypress/specs/dashboard/login.spec.js

Desired behavior:

While Flow was never officially supported, this is embedded deep into our codebase, and we would rather not remove all of our type annotations. IF there is another strategy for making sure that the code is bundled properly, I'm all ears, but as of right now we aren't able to upgrade.

@paulfalgout suggested this may stem from a bump to the https://github.com/cypress-io/cypress-browserify-preprocessor

Steps to reproduce:

Add a simple type declaration or annotation to a variable in any spec file. This works in 3.03 or below, but not in 3.1.0 +

Versions

Cypress 3.1.0, OSX 10.13.5, Node 8.11.1

[chrisbreiding]

Do you use the file:preprocessor event in your pluginsFile? If so, can you post that code?

[dcypherthis]

I do not, my plugins file is stock at the moment.

[dcypherthis]

I did find a workaround by pinning the @cypress/browserify-preprocessorversion to the previous version, then hijacking the default loading in my plugins/index.js

While this isn't a permanent solution, it will at least keep me running for now while able to try out other 3.1.0 features.

cypress/plugins/index.js
---

const browserify = require('@cypress/browserify-preprocessor');

module.exports = (on, config) => {
  const options = browserify.defaultOptions;
  on('file:preprocessor', browserify(options));
};

[JDWong-wag]

@dcypherthis I installed browerify and copied your steps but am still getting a syntax error on flow annotations. What version of browserify are you using?

[Strajk]

Confirming issue with 3.1.0, working well with 3.0.1

Our spec file imports file with import type { MMBKeys } from "./booking", causes:

[dcypherthis]

@JDWong-wag I have it set to "@cypress/browserify-preprocessor": "1.0.2", in my package.json

[philaw]

can also install preset-flow to fix the issue, I have this is my package.json

    "@babel/preset-flow": "^7.0.0",
    "@cypress/browserify-preprocessor": "^1.1.0",

and this in cypress/plugins/index.js:

const browserify = require('@cypress/browserify-preprocessor');

module.exports = (on, config) => {
  const options = browserify.defaultOptions;
  options.browserifyOptions.transform[1][1].presets.push('@babel/preset-flow');
  on('file:preprocessor', browserify(options));
};

[Strajk]

@chrisbreiding @dcypherthis @philaw thanks for helping!

We prefer Webpack, so here's our fix in cypress/plugins/index.js

const webpack = require("@cypress/webpack-preprocessor")
module.exports = (on, config) => {
  on("file:preprocessor", webpack())
}

[wagwes]

Can confirm @philaw's solution worked for me. Maintainers, if you'd like I can make a PR to the README with info to help people address this problem?

[chrisbreiding]

Honestly, the surprising thing to me is that Flow type annotations ever worked. Historically, the default presets were fairly conservative and recently we expanded on them, but never had any support for Flow built-in.

@philaw's solution is absolutely the right one. We don't plan to support Flow by default, so configuring it with the babel preset is the way to go.

@wagwes, I don't think it should be in the README. It would be great as a recipe if you'd like to submit a PR there instead. You can see there's already a TypeScript example, so a Flow example would fit right in.