gatsby: [gatsby] core-js@3 incompatibility: Compile error, dependency not found

Ok sorry for the late response but this came up again, this should fix your issue:

In gatsby-node.js

const path = require('path');

exports.onCreateWebpackConfig = ({ actions, getConfig, stage }) => {
  const config = getConfig();

  const coreJs2config = config.resolve.alias['core-js'];
  delete config.resolve.alias['core-js']
  config.resolve.alias[`core-js/modules`] = `${coreJs2config}/modules`
  try {
    config.resolve.alias[`core-js/es`] = path.dirname(require.resolve('core-js/es'));
  } catch (err) { }
  actions.replaceWebpackConfig(config);
};

so what are we doing here? We remove the default core-js rule from our webpack config so we don’t alias everything to core-js@2. We create 2 new aliases. We create one that aliases all modules inside core-js/modules to core-js@2. We create another one that aliases all modules inside core-js/es to core-js@3.

The try-catch is needed because core-js@3 might not be a direct child of your gatsby site. Technically it’s not needed but it will make your bundle a bit smaller as everything will point to the same core-js@3 library so webpack won’t load the same file more than once in the same bundle.

As far as I’m concerned, this is still an open issue, as it seems that libraries using core-js@3 (such as redoc) are not compatible with Gatsby. This seems like it would require some refactoring of Gatsby’s internal code, which I’m not familiar with.

I’ll leave the question of to close or not to close to someone with more of an idea of the complexity of the issue.

Thank you for your continued support.

The above configuration does allow gatsby to start correctly, but the problem (at least with redoc) has been shifted into React’s domain. The redoc component returns {$$typeof: Symbol(react.element), type: undefined, key: null, ref: null, props: {…}, …}, causing a Element type is invalid React error. The code sandbox has again been updated;

This may be an internal issue with the redoc library or a more general issue due to how aliasing between two different core-js (major) versions works. It seems like more effort to solve than it’s worth.

After having done another search of gatsby issues (now knowing the cause of this one), this seems to be a duplicate of (or at least solvable by) #15601. I’m closing this issue in favour of that one.

Supporting core-js@3 will most likely also include performance/size improvements for gatsby (not to mention actually being able to use certain libraries without patchwork configurations), I’m all for breaking changes if it results in overall gains.

I think I missed the chaining.

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = getConfig();
  delete config.resolve.alias["core-js"];
  actions.replaceWebpackConfig(config);
};

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label “not stale” to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜