cached module - create-react-context is breaking CMS

Description

My current website is built with Gatsby and Netlify-CMS. Netlify CMS is internally using https://github.com/davidtheclark/react-aria-menubutton/ which in turn uses create-react-context.

When i try to access the CMS admin it breaks with this error:

ManagerContext.js:5 Uncaught TypeError: createReactContext is not a function
    at Object../node_modules/react-aria-menubutton/dist/ManagerContext.js (ManagerContext.js:5)
    at __webpack_require__ (bootstrap:725)
    at fn (bootstrap:100)
    at Object../node_modules/react-aria-menubutton/dist/Wrapper.js (Wrapper.js:12)
    at __webpack_require__ (bootstrap:725)
    at fn (bootstrap:100)
    at Object../node_modules/react-aria-menubutton/dist/index.js (index.js:6)
    at __webpack_require__ (bootstrap:725)
    at fn (bootstrap:100)
    at Object../node_modules/netlify-cms-ui-default/dist/esm/Dropdown.js (Dropdown.js:22)

At first i thought it was an issue with react-aria-menubutton but as it turns out whats happening is that when I start the app (gatsby develop) a file is added to the cache folder:

.cache/create-react-context.js

import React from "react"

export default React.createContext

This causes the error above as react-aria-menubutton doesnt add .default to the require.

Steps to reproduce

unfortunately my site is in a private repo so cant share it here

Expected result

I haven’t been able to find information on how this mechanism works or how to disable it, If this is a Gatsby issue I would expect it not to create a cache module that overrides an existing node module in the app that uses it

Actual result

cached module is taking precedence over an existing node module

Environment

System: OS: macOS 10.15.4 CPU: (12) x64 Intel® Core™ i7-8850H CPU @ 2.60GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node Yarn: 1.19.1 - ~/.yarn/bin/yarn npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Firefox: 75.0 Safari: 13.1 npmPackages: gatsby: ^2.20.30 => 2.20.30 gatsby-cli: ^2.11.16 => 2.11.16 gatsby-image: ^2.2.43 => 2.3.1 gatsby-plugin-flow: ^1.1.2 => 1.2.1 gatsby-plugin-google-tagmanager: ^2.1.3 => 2.2.1 gatsby-plugin-html-attributes: ^1.0.5 => 1.0.5 gatsby-plugin-netlify: ^2.2.0 => 2.2.1 gatsby-plugin-netlify-cache: ^1.2.0 => 1.2.0 gatsby-plugin-netlify-cms: ^4.2.0 => 4.2.1 gatsby-plugin-offline: ^3.1.0 => 3.1.2 gatsby-plugin-preload-fonts: ^1.0.36 => 1.1.1 gatsby-plugin-react-helmet: ^3.0.4 => 3.2.1 gatsby-plugin-remote-images: ^1.0.7 => 1.0.7 gatsby-plugin-sharp: ^2.4.13 => 2.5.3 gatsby-plugin-sitemap: ^2.2.3 => 2.3.1 gatsby-plugin-styled-components: ^3.1.0 => 3.2.1 gatsby-remark-copy-linked-files: ^2.0.7 => 2.2.1 gatsby-remark-images: ^3.1.25 => 3.2.1 gatsby-remark-relative-images: ^0.2.1 => 0.2.3 gatsby-source-filesystem: ^2.1.55 => 2.2.2 gatsby-transformer-remark: ^2.6.59 => 2.7.1 gatsby-transformer-sharp: ^2.3.19 => 2.4.2

[pieh]

The file added to .cache comes from https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/create-react-context.js so this is what Gatsby does. It was originally added in https://github.com/gatsbyjs/gatsby/pull/7214

I will try to create small reproduction for (just simple site trying to use react-aria-menubutton and see from there if there is a way we can fix it (either in Gatsby or maybe in the react-aria-menubutton - it’s not yet clear to me if this is a problem with out compat code or with the usage (likely way it is imported) of react-create-context in react-aria-menubutton component)

[yoavniran]

this is awesome, thanks @pieh works like a charm now!