react-avatar: React Avatar doesn't let me use `core-js 3.4.4`

Hello šŸ˜ƒ I found this amazing library today by the way.

I see in your package json you have corejs-2.5.7 . In our new project we are using latest Babel7 and corejs3.4.4 and we are getting the below errors :

ERROR in ./node_modules/react-avatar/es/utils.js
Module not found: Error: Can't resolve 'core-js/modules/es7.symbol.async-iterator' in 'C:\Atlassian\retailer_portal\node_modules\react-avatar\es'
 @ ./node_modules/react-avatar/es/utils.js 7:0-51
 @ ./node_modules/react-avatar/es/avatar.js
 @ ./node_modules/react-avatar/es/index.js
 @ ./src/client/components/AvatarControl/index.jsx
 @ ./src/client/components/index.js
 @ ./src/client/routes.jsx
 @ ./src/client/index.jsx
 @ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/client/index.jsx

ERROR in ./node_modules/react-avatar/es/utils.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable' in 'C:\Atlassian\retailer_portal\node_modules\react-avatar\es'
 @ ./node_modules/react-avatar/es/utils.js 9:0-42
 @ ./node_modules/react-avatar/es/avatar.js
 @ ./node_modules/react-avatar/es/index.js
 @ ./src/client/components/AvatarControl/index.jsx
 @ ./src/client/components/index.js
 @ ./src/client/routes.jsx
 @ ./src/client/index.jsx
 @ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/client/index.jsx

ERROR in ./node_modules/react-avatar/es/avatar.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable' in 'C:\Atlassian\retailer_portal\node_modules\react-avatar\es'
 @ ./node_modules/react-avatar/es/avatar.js 6:0-42
 @ ./node_modules/react-avatar/es/index.js
 @ ./src/client/components/AvatarControl/index.jsx
 @ ./src/client/components/index.js
 @ ./src/client/routes.jsx
 @ ./src/client/index.jsx
 @ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/client/index.jsx

ERROR in ./node_modules/react-avatar/es/context.js
Module not found: Error: Can't resolve 'core-js/modules/web.dom.iterable' in 'C:\Atlassian\retailer_portal\node_modules\react-avatar\es'
 @ ./node_modules/react-avatar/es/context.js 5:0-42
 @ ./node_modules/react-avatar/es/avatar.js
 @ ./node_modules/react-avatar/es/index.js
 @ ./src/client/components/AvatarControl/index.jsx
 @ ./src/client/components/index.js
 @ ./src/client/routes.jsx
 @ ./src/client/index.jsx
 @ multi webpack-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/client/index.jsx

Can you please update corejs to version 3 or give us a workaround šŸ˜ƒ . Thank you @JorgenEvens

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 16 (6 by maintainers)

Most upvoted comments

Same for me, having the issue using vite as build tool. Okay, just noticed that core-js-pure is a peer dependency, installing it resolves the issue @pdevito3

It would seem like you have hardcoded your node_modules path with an absolute path in resolve.modules which would prevent webpack from resolving dependencies the common-js standard way.

Webpack documentation explains that you will now only resolve any module found in your root node_modules directory, which in turn contains core-js@2, not the expected core-js@3 that is installed with react-avatar.

A relative path will be scanned similarly to how Node scans for node_modules, by looking through the current directory as well as its ancestors (i.e. ./node_modules, ā€¦/node_modules, and on).

With an absolute path, it will only search in the given directory.

Could you swap out the line

modules: [path.resolve(__dirname, 'node_modules'), sourcePath]

for

modules: ['node_modules', sourcePath]

Hi @goxr3plus,

Would you be able to build a minimal reproduction? Iā€™m going to investigate whether we can simply upgrade our core-js version, but this should generally not be required as the node module system would/should have installed core-js local to react-avatar on conflict.

In the meantime, could you maybe run npm ls core-js for me to get an idea of your module hierarchy?