Dependency conflict with outdated "core-js" for "@mdx-js/tag" package

[arcticicestudio]

First things first: Thanks for your great work, I love MDX and migrated all my projects to it. Finally writing Markdown and adding dynamic/non-specification via React elements to it is what I've always wanted to create content 😄

I working on one of my favorite projects again after a long time and started with updating from the Gatsby v2 Beta to the stable v2 release. This also included all the other outdated dependencies one-by-one for easier debugging when an error occurs and unfortunately it then failed with the following:

Error: Cannot find module 'core-js/modules/es6.array.filter'

I've debugged and burrowed down the dependency tree and came to the decision that the error must be caused by the @mdx-js/tag package.

As you can see on the screenshot the @mdx-js/tag package depends on create-react-context@^0.2.2 which resolves to [email protected]. The package in turn depends on an outdated 0.x.x version of fbjs (^0.8.0, latest stable version is 1.0.0) which resolves to [email protected].

Now the fbjs package finally depends on the core-js package which module has not been found causing the error to be thrown. This outdated version of fbjs (0.8.17) depends on the outdated package core-js@^1.0.0, but the latest version is a new major release of 2.5.7. This latest version is also used by other dependencies as you can see on the screenshot including the latest Gatsby version (via the latest Babel v7 @babel/polyfill).

The problem can now be nailed down to the fact that [email protected] does not provide the Array.filter polyfill. The first version providing it is [email protected].

Here is a example Codesandbox which reproduces the problem. Note that it can not be run within the browser because of Gatsby. Just copy/download/fork/clone it and run it locally via npm run dev.

I solved the problem with an workaround by just adding @babel/polyfill (or core-js directly) to devDependencies in my project. This resolves the correct required version of core-js to fix the error.

I currently don't know how to solve the problem here for the @mdx-js/tag package. Adding @babel/polyfill or core-js as (peer) dependency might now be a good idea, but removing create-react-context might be a better solution.

Is it a problem to increase the required React version to 16.3+ to use the native Context API implementation instead of using a polyfill package? This might be the best solution, but this would be a breaking change =/

[silvenon]

Wow, thanks for doing all that work to pin down the problem! I vote for locking React to v16.3+ and using the native Context API. @timneutkens?

[silvenon]

Actually, let me take a few steps back. @arcticicestudio could you explain where you see that error? I tried running your demo both in development and production and I don't see it, the title is showing normally.

[arcticicestudio]

@silvenon Thanks for your feedback 👍

I've tested it again by downloading my demo codesandbox and running npm run dev. I also deleted my ~/.npm folder to avoid possible cache problems, but the error still occurs.

Here are some of my specs:

OS: Arch Linux
Kernel: 4.18.7-arch1-1-ARCH
NodeJS: v10.10.0
npm: 6.4.1

Output of running npm install

Error when running npm run dev

[silvenon]

Thanks! I managed to reproduce the error with npm, but with Yarn everything works fine. 🤔

It seems like this might be an edge case with npm (gatsbyjs/gatsby#7862), which is why I'm not inclined to add any workarounds in this package until we can prove that the error is legitimate, i.e. that npm is resolving these dependencies correctly.

In the meantime, npm install core-js should fix your error. 😉

I'm closing this, but I'm open for further discussion if you know that the error isn't npm's fault and wish to investigate this deeper. ⭐️

[arcticicestudio]

I think the problem can be led back to the Babel 7 changes for the @babel/polyfill package. Thanks for your help 👍 , I'll track the referenced issue (have searched through Gatsby issue, but haven't found this one -.-).