Gatsby: "Can't resolve" importing errors when using canvg

[Pauan]

Description

I am speaking on behalf of amCharts. Our users have found some errors when using amCharts with Gatsby. You can see more details here.

Our library internally uses canvg, which uses core-js. When compiling, Gatsby is unable to find the core-js files, even though those files exist.

This is a problem specifically with Gatsby, it does not happen with create-react-app or Angular.

Steps to reproduce

I have created a reduced test case.

I created it with the following steps:

1. Create a new hello world template.

2. Make these changes.

3. Run yarn install and then yarn gatsby develop.

Expected result

The project should compile fine.

Actual result

I get the following errors when compiling:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'core-js/modules/es.array.concat' in 'C:\Users\Pauan\gatsby-core-js-error-demo\node_modules\canvg\lib'

File: node_modules\canvg\lib\index.es.js


... many more similar errors ...


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'core-js/modules/web.dom-collections.iterator' in 'C:\Users\Pauan\gatsby-core-js-error-demo\node_modules\canvg\lib'

File: node_modules\canvg\lib\index.es.js

I have verified that the node_modules/canvg/node_modules/core-js/modules/* files do exist, Gatsby is simply unable to find them.

Environment

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Users\Pauan\AppData\Roaming\npm\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.20.12 => 2.20.23 

[LekoArts]

I just skimmed over your issue and before digging deeper into it, have seen this issue already?
https://github.com/gatsbyjs/gatsby/issues/15601

Gatsby uses core-js@2 and this might be the cause of the problem?

[Pauan]

@LekoArts That shouldn't matter, because npm supports having multiple versions of the same package at the same time.

This is clear because node_modules/core-js is version 2, but node_modules/canvg/node_modules/core-js is version 3.

The problem is that Gatsby is not properly loading core-js from node_modules/canvg/node_modules/core-js like it should. In other words, Gatsby is not following the Node module resolution algorithm like it should.

This is a module resolution problem, not a version problem. This problem will happen anytime multiple versions of the same package exist (not just core-js).

[Pauan]

@LekoArts After looking more deeply at the issue you linked, I found this. So it seems that Gatsby is intentionally changing the Webpack module resolution rules, which is causing core-js to break. This is related to https://github.com/gatsbyjs/gatsby/issues/15601 but it's actually a separate issue.

[github-actions[bot]]

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! 💪💜

[aikodeio]

Hello! This is not yet resolved

[blainekasten]

So this was interested here to solve this issue.

I'm not sure right now how to resolve your issue and not break theirs.

[blainekasten]

I personally don't understand why a library is explicitly depending on core-js and importing it's functionality. Usually libraries should just write the code to achieve a solution, and if polyfills are needed, the end users webpack/babel set up will take care of that.

[Pauan]

@blainekasten You will have to ask canvg that, we don't control their library.

Although I agree with you that core-js should be left up to the user, gatsby should still work with libraries which choose to use core-js.

Overriding specific hardcoded libraries like core-js and react-hot-loader seems like a very fragile solution.

[aikodeio]

This problem does not allow me to run my gitlab CI :( Is there a way to fix or patch?

[github-actions[bot]]

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! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
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 again for being part of the Gatsby community! 💪💜

[blainekasten]

Hey! Latest version of gatsby upgrades to core-js@3. Try out the new version, it should fix your errors!

[aikodeio]

@blainekasten Hello, I keep getting the same error (there are actually several) but this is one of them:

 ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'core-js/modules/web.dom-collections.for-each' in 'G:\Apps\corejs\node_modules\@amcharts\amcharts4\.internal\canvg'     

If you're trying to use a package make sure that 'core-js/modules/web.dom-collections.for-each' is installed. If you're trying to use 
a local file make sure that the path is correct.

File: node_modules\@amcharts\amcharts4\.internal\canvg\index.js 

"dependencies": {
    "@amcharts/amcharts4": "^4.9.30",
    "gatsby": "^2.23.12",
    "gatsby-image": "^2.4.9",
    "gatsby-plugin-manifest": "^2.4.14",
    "gatsby-plugin-offline": "^3.2.13",
    "gatsby-plugin-react-helmet": "^3.3.6",
    "gatsby-plugin-sharp": "^2.6.14",
    "gatsby-source-filesystem": "^2.3.14",
    "gatsby-transformer-sharp": "^2.5.7",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0"
  },