TypeError: `Cannot read property '_context' of undefined` when using reach/menu-button in certain environments

[NicolaiF]

🐛 Bug report

Current Behavior

I've made a wrapper for the MenuButton-component, and trying to use it in my Gatsby-project, and I get this error message.

Here's the the component:

And the component in use

I've not been able to reproduce it yet, but will update if I find a way to do so. This error has also appeared in other users' environments, where gatsby was not used.

The reason I mention my wrapper-component, is that the problem dissapears (for me, not the other user) if I'm using the reach-components directly instead

Additional context

Here is a screenshot of my error

Your environment

Software	Name(s)	Version
Reach Package	menu-button	0.10.5
React		^16.12.0
Browser	Chrome	Version 83.0.4103.97
Node		v12.13.0
npm/yarn	yarn	1.21.1
Operating System	Linux/Ubuntu	18.04.4

My package.json

{
  "name": ***
  "private": true,
  "description": ***
  "version": "0.1.0",
  "dependencies": {
    "@artsy/fresnel": "^1.1.0",
    "@reach/menu-button": "^0.10.5",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/image-url": "^0.140.18",
    "@types/aos": "^3.0.3",
    "@types/react-html-parser": "^2.0.1",
    "aos": "^2.3.4",
    "framer-motion": "^1.10.3",
    "gatsby": "^2.20.12",
    "gatsby-image": "^2.3.1",
    "gatsby-plugin-google-analytics": "^2.3.6",
    "gatsby-plugin-layout": "^1.3.4",
    "gatsby-plugin-manifest": "^2.3.3",
    "gatsby-plugin-offline": "^3.1.2",
    "gatsby-plugin-react-helmet": "^3.2.1",
    "gatsby-plugin-sass": "^2.2.1",
    "gatsby-plugin-sharp": "^2.5.3",
    "gatsby-plugin-typescript": "^2.3.1",
    "gatsby-source-filesystem": "^2.2.2",
    "gatsby-source-sanity": "^5.0.6",
    "gatsby-transformer-sharp": "^2.4.3",
    "html-react-parser": "^0.13.0",
    "node-sass": "^4.13.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-html-parser": "^2.0.2",
    "react-intl": "^4.6.5"
  },
  "devDependencies": {
    "@types/node": "^13.11.1",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/react-helmet": "^5.0.15",
    "prettier": "^1.19.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "yarn run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

Dependencies for the other user with the same error

  "dependencies": {
    "axios": "^0.19.0",
    "classnames": "^2.2.5",
    "date-fns": "^2.9.0",
    "draft-convert": "^2.0.1",
    "draft-js": "^0.11.5",
    "formik": "^2.1.4",
    "graphql-request": "^1.6.0",
    "immer": "^1.12.1",
    "js-cookie": "^2.2.1",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.15",
    "markdown-draft-js": "^2.0.0",
    "moment": "^2.24.0",
    "papaparse": "5.2.0",
    "prop-types": "^15.7.2",
    "ramda": "^0.26.1",
    "raven-js": "^3.27.2",
    "react": "^16.13.1",
    "react-color": "^2.17.3",
    "react-dom": "^16.13.1",
    "react-dropzone": "^4.2.3",
    "react-helmet": "^6.1.0",
    "react-intl": "^4.6.10",
    "react-intl-redux": "^2.2.0",
    "react-modal": "^3.11.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-select": "^3.0.0",
    "react-to-print": "^2.5.1",
    "react-tooltip": "^3.11.5",
    "redux": "^4.0.5",
    "redux-raven-middleware": "^1.2.0",
    "redux-thunk": "^2.2.0",
    "showdown": "^1.9.1",
    "swr": "^0.2.0",
    "uuid": "^3.1.0",
    "yup": "^0.27.0"
  },
  "devDependencies": {
    "@cypress/code-coverage": "^3.8.1",
    "@cypress/instrument-cra": "^1.1.1",
    "@sheerun/mutationobserver-shim": "^0.3.3",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@types/jest": "^25.1.2",
    "@types/jsonwebtoken": "^8.5.0",
    "@types/node": "^14.0.13",
    "@types/react": "^16.9.38",
    "@types/react-dom": "^16.9.8",
    "@types/react-helmet": "^6.0.0",
    "@types/react-modal": "^3.10.5",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.5",
    "@types/redux-mock-store": "^1.0.2",
    "bunyan": "^1.8.12",
    "chalk": "^4.1.0",
    "chokidar": "^3.4.0",
    "concurrently": "^5.2.0",
    "core-js": "^3.6.5",
    "cors": "^2.8.5",
    "cross-env": "7.0.2",
    "cypress": "^4.6.0",
    "dotenv": "^8.2.0",
    "eslint-plugin-jest-dom": "^2.1.0",
    "eslint-plugin-testing-library": "^3.1.3",
    "full-icu": "^1.3.1",
    "glob": "^7.1.4",
    "husky": "^4.2.5",
    "jest-sonar-reporter": "^2.0.0",
    "junk": "^3.1.0",
    "lerna": "^3.22.1",
    "mkdirp": "^1.0.4",
    "nodemon": "^2.0.4",
    "normalize.css": "8.0.1",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.5",
    "pretty-quick": "^2.0.1",
    "react-app-polyfill": "^1.0.6",
    "react-scripts": "^3.4.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.4",
    "rollup-plugin-sass": "^1.2.2",
    "start-server-and-test": "1.11.0",
    "ts-jest": "^26.1.0",
    "tsdx": "^0.13.2",
    "typescript": "^3.9.5"
  },

[chaance]

Based on the error message, it looks like your app is using an older version of @reach/menu-button for whatever reason. Specifically noted on line 83 where it's calling useDescendants. In 0.10.5, that should be useDescendantsInit. https://unpkg.com/browse/@reach/menu-button@0.10.5/dist/menu-button.esm.js

Can you double check your yarn.lock/package-lock file for the correct version here? Might be worth nuking node_modules and reinstalling as well.

[NicolaiF]

Wow, that actually seemed to do the trick. Node_modules had some weird inconsistencies in versioning of @reach-packages, so I nuked, and for safety added a resolution for both descendants and menu-button for version 0.10.5, and reinstalled node_modules.

Thanks a bunch! This issue can be closed now