Yup members nondeterministically undefined

Describe the bug Sometimes we get Airbrake reports from production of errors with Yup functions being undefined, in contexts where the code certainly works when we try to use it, in dev or in production.

Some example snippets:

import { string } from 'yup'
...
const passwordValidations = string().min(8).max(72)

We will sometimes see this error: Cannot read property 'constructor' of undefined

Or perhaps:

import { string, object } from 'yup'
...
const schema = object({
  firstName: string(),
  lastName: string()
})

with the error: undefined is not a function

This can happen just about anywhere we try to use yup. One of our developers believes it may only happen at invocations at the top level scope of each document, i.e. it may only happen when the page initializes and not later, when yup is called from inside a function. This, plus the nondeterministic nature of the bug and our near-total inability to reproduce, may suggest a race condition of some kind.

To Reproduce We have never been able to reproduce this bug locally. We only know it exists from Airbrake reports. It is highly nondeterministic. The code otherwise works completely as expected. Yup is the only dependency we have seen exhibit this behavior.

Expected behavior We expect the calls to work deterministically in all cases, not have a probabilistic chance of failing due to what appear to be failed imports.

Platform (please complete the following information):

• Browser: We’ve seen this in all the major browsers
• Version: Both recent versions and older versions

[skh-]

I am seeing this error as well intermittently without being able to reproduce. We use Yup for dozens of validations on the site and this particular Search component is the only one where the error seems to occur (and it’s at a very low rate).

Below is a stack trace from Rollbar:

TypeError: undefined is not a function
1
File "../node_modules/toposort/index.js" line 54 col 22 in toposort
outgoing = Array.from(outgoing);
2
File "../node_modules/toposort/index.js" line 29 col 22 in toposort
if (!visited[i]) visit(nodes[i], i, new Set());
3
File "../node_modules/yup/lib/util/sortFields.js" line 42 col 28 in sortFields
return _toposort.default.array(nodes, edges).reverse();
4
File "../node_modules/yup/lib/object.js" line 244 col 35 in shape
next._nodes = (0, _sortFields.default)(fields, next._excludedEdges);
5
File "App/components/search/index.tsx" line 39 col 29 in Search
const validate = object().shape({
6
File "../node_modules/react-dom/cjs/react-dom.production.min.js" line 3549 col 7 in oa
b = c(d, e);
7
File "../node_modules/react-dom/cjs/react-dom.production.min.js" line 6488 col 11 in eu
e = wh(null, b, d, a, e, c);
8
File "../node_modules/react-dom/cjs/react-dom.production.min.js" line 5530 col 11 in _u
var b = Vj(a.alternate, a, W);
9
File "../node_modules/react-dom/cjs/react-dom.production.min.js" line 5519 col 9 in vu
V = Uj(V);
10
File "../node_modules/react-dom/cjs/react-dom.production.min.js" line 5251 col 11 in su
Mj();

Here is the validation function the trace mentions, which is passed to a Formik validationSchema prop in a react project.

  const validate = object().shape({
    query: string()
      .trim()
      .required(),
  });

[eatoncw]

@skh @CaptainLexington - were you able to find a solution for this? We’re getting a very similar stack trace on Rollbar too.