core-js issue after gridsome upgrade

Thank for this cool package!

I just upgraded my gridsome app and it now fails to compile (using yarn) with the following errors

ERROR  Failed to compile with 67 errors                                                                                                                                                                   6:27:45 PM

These dependencies were not found:

* core-js/modules/es.array.concat in ./node_modules/gridsome/app/fetch.js, ./node_modules/gridsome/app/head.js and 2 others
* core-js/modules/es.array.for-each in ./node_modules/gridsome/app/head.js, ./node_modules/gridsome/app/directives/image.js and 2 others
* core-js/modules/es.array.from in ./node_modules/gridsome/app/directives/image.js, ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/components/ScrollWords.vue?vue&type=script&lang=js&
* core-js/modules/es.array.index-of in ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.array.is-array in ./node_modules/gridsome/app/router.js, ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.array.join in ./node_modules/gridsome/app/components/Image.js, ./node_modules/gridsome/app/utils/helpers.js
* core-js/modules/es.array.map in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/router.js and 2 others
* core-js/modules/es.array.reduce in ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/components/ScrollWords.vue?vue&type=script&lang=js&
* core-js/modules/es.array.slice in ./node_modules/gridsome/app/components/Image.js, ./node_modules/gridsome/app/utils/helpers.js and 1 other
* core-js/modules/es.date.to-string in ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/layouts/Default.vue?vue&type=script&lang=js&
* core-js/modules/es.function.name in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/fetch.js and 1 other
* core-js/modules/es.number.constructor in ./node_modules/gridsome/app/components/Link.js, ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/babel-loader/lib??ref--1-1!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-svg-inline-loader/dist/index.min.js??ref--0-2!./src/components/ScrollWords.vue?vue&type=script&lang=js&
* core-js/modules/es.object.to-string in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/app.js and 4 others
* core-js/modules/es.regexp.constructor in ./node_modules/gridsome/app/components/Link.js, ./node_modules/gridsome/app/utils/helpers.js
* core-js/modules/es.regexp.exec in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/components/Link.js and 2 others
* core-js/modules/es.regexp.to-string in ./node_modules/gridsome/app/components/Link.js, ./node_modules/gridsome/app/utils/helpers.js
* core-js/modules/es.string.ends-with in ./node_modules/gridsome/app/directives/image.js
* core-js/modules/es.string.iterator in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/app.js and 2 others
* core-js/modules/es.string.link in ./node_modules/gridsome/app/head.js
* core-js/modules/es.string.replace in ./node_modules/gridsome/app/utils/helpers.js, ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.string.search in ./node_modules/gridsome/app/entry.client.js
* core-js/modules/es.string.split in ./node_modules/gridsome/app/utils/helpers.js, ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.string.starts-with in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/components/Link.js and 1 other
* core-js/modules/es.string.trim in ./node_modules/gridsome/app/utils/class.js
* core-js/modules/es.symbol in ./node_modules/gridsome/app/app.js
* core-js/modules/es.symbol.description in ./node_modules/gridsome/app/app.js
* core-js/modules/es.symbol.iterator in ./node_modules/gridsome/app/app.js
* core-js/modules/web.dom-collections.for-each in ./node_modules/gridsome/app/head.js, ./node_modules/gridsome/app/directives/image.js and 2 others
* core-js/modules/web.dom-collections.iterator in ./node_modules/gridsome/app/entry.client.js, ./node_modules/gridsome/app/app.js

If I completely remove vue-svg-inline-loader, everything works again.

yarn list --depth 0:

yarn list v1.22.0
,,,
├─ @babel/preset-env@7.8.4
├─ @babel/runtime@7.8.4
...
├─ @gridsome/cli@0.3.1
...
├─ core-js-compat@3.6.4
├─ core-js@2.6.11
├─ core-util-is@1.0.2
...
├─ vue-svg-inline-loader@1.4.5
...
├─ vue@2.6.11

I feel that the issue is due to the usage of the 2.* version of core-js (wanted by this plugin) while gridsome 0.7 requires "@vue/babel-preset-app@^4.2.2 which expects core-js@^3.6.4.

This is probably related to https://github.com/gridsome/gridsome/pull/982…

Is there any way to make this plugin use core-js 3 ? (or any better way to fix this?)

[oliverfindl]

Hello,

to be honest, I dont think this issue is caused by this package. This behavior is most probably result of some other issue from different package. Please read all comments here, especially this comment and also comments in issue mentioned in it. From my discoveries back then, this issue could be caused by missing peer dependency definition in some of dependencies in dependency tree. Its possible, that you will get same result with any other random library using core-js@2.

I had plans for complete rewrite of this plugin, which would solve this issue, but unfortunately my time is very limited and I switched focus to vue-svg-inline-plugin, which serves same purpose, but works on different level. So this package is now in kinda abandoned state (well, it still works for my projects and I dont have any issues using core-js@3 alongside with this plugin, which use core-js@2). My ultimate goal was to share some logic (e.g.: for merging node attributes) between these two packages, but I dont see this happening anytime soon, because it would be necessary to rewrite both of them.

If you are interested in hotfix, somebody already forked this package, upgraded it to core-js@3 and published to npm: vue-svg-inline-loader-corejs3, but according npm weekly download count (300 vs 9000), its not very popular.

If you have some free time, you can track down your dependencies and try to find one responsible for this behavior. From my initial research (half year ago), I suspected package @vue/babel-preset-app or some of its dependencies to cause this issue.

Please let me know if you have more questions or something isnt clear to you.

Thanks.

[IlCallo]

Can confirm this happens with other framework too, I’m hitting this while testing new Quasar Framework @quasar/app version (not released yet). In Quasar case, the core-js 3 dependency is in a sub-package, so your version is hoisted at root level instead.

@oliverpool workaround works, but I don’t think it can be a way to deal with the problem in a definite way