Cypress: `util.inherits is not a function` error thrown when `babel-plugin-react-intl` included in project

[fracmak]

After upgrading to Cypress 5, a bunch of my projects failed to run with the following error

The following error originated from your test code, not from Cypress.

  > util.inherits is not a function

Though some seemed to be just fine. I was able to boil the problem down to a specific combination of babel plugin and library. It seems that this specific babel plugin interferes with cypress's ability to bundle the correct polyfills that the library needs to function, even though the babel plugin is not being used or referenced in the project.

To illustrate the problem, I've created a repository that showcases the problem

https://github.com/fracmak/cypress5-jwt

I also took some screenshots of the webpack build to try and highlight what's going on

Working build (notice the inherits package living inside the /Library/Caches/Cypress):

Failing build (notice the inherits package living inside the project node_modules):

What seems to happen is when that plugin is installed, Cypress starts utilizing the various local node_module libraries instead of the bundled node_modules libraries that come with the cypress binary.

This broke in Cypress 5, reverting back to 4 works just fine

Current behavior:

Cypress fails with util.inherits is not a function

Desired behavior:

No failure

Test code to reproduce

https://github.com/fracmak/cypress5-jwt

Versions

Cypress 5, MacOS/Linux, Chrome 84

[jennifer-shehane]

I can recreate the error as described. This seems to be a regression in 5.0.0.

Repro

spec.js

import jwt from 'jsonwebtoken';

describe('Failure', () => {
  it('This should not fail', () => {
    expect(() => jwt.sign({}, 'secret')).to.not.throw();
  });
});

package.json

{
  "devDependencies": {
    "babel-plugin-react-intl": "^8.1.7",
    "cypress": "^5.0.0",
    "jsonwebtoken": "^8.5.1"
  }
}

4.12.1

Same result if we remove the babel-plugin-react-intl from the project in 5.0.0.

5.0.0

[chrisbreiding]

I wasn't able to reproduce this with @jennifer-shehane's code, but was with @fracmak's repo. I found the difference was that the repo has a tsconfig.json in the cypress directory. Removing that fixed the issue. I think it has to do with the "baseUrl": "../node_modules" part.

The reason removing babel-plugin-react-intl fixes the issue is that it brings typescript along with it as a dependency, which triggers Cypress's typescript support and loads the tsconfig.json. Without typescript existing in node_modules, the tsconfig.json doesn't get loaded. This is also why it changed between 4.x and 5.0. We didn't used to load the tsconfig.json.

As for a fix, I'm not sure at this point. Setting "baseUrl": "../node_modules" seems kind of odd to me, so I'm curious about the reason for that. I'm no TypeScript expert, so I'm not sure why that causes this exact issue either.

[fracmak]

Removing the baseUrl does fix the problem for me, and things still run, so that's probably the solution to this for me at least

[fracmak]

Btw, I originally got the baseUrl setting from the cypress docs: https://docs.cypress.io/guides/tooling/typescript-support.html#Configure-tsconfig-json

[chrisbreiding]

Btw, I originally got the baseUrl setting from the cypress docs: docs.cypress.io/guides/tooling/typescript-support.html#Configure-tsconfig-json

Oh 😅 I guess we should remove that part. Thanks for pointing that out.

[Nasicus]

Removing baseUrl from tsconfig.json also fixed the error for me!
Thank yo so much!

For me it originated fromw jws and this is a dependency of jsonwebtoken which I have included.

Btw: Maybe you should update the migration guide and mention this there?
https://docs.cypress.io/guides/references/migration-guide.html

[Romanchuk]

@Nasicus @fracmak Omg! Thanks, i spent two days to figure it out!