WebpackError: Cannot find module 'core-js/modules/es6.array.iterator'

Version management gone wrong

Was playing around with the Material-ui Gatsby project for my new web-app landing page.

When it came to spinning up the development server I encountered this error:

phalient@phalient-sp4:/mnt/c/projects/repos/techphlex-landing-site$ np

> gatsby@3.0.0 develop /mnt/c/projects/repos/techphlex-landing-site
> gatsby develop
success open and validate gatsby-configs — 0.009 s
 success load plugins — 0.195 s
success onPreInit — 0.013 s
success initialize cache — 0.016 s
success copy gatsby files — 0.718 s
success onPreBootstrap — 0.020 s
success source and transform nodes — 0.035 s
success building schema — 0.392 s
success createPages — 0.001 s
success createPagesStatefully — 0.178 s
success onPreExtractQueries — 0.005 s
success update schema — 0.074 s
success extract queries from components — 0.297 s
success run static queries — 0.003 s
success run page queries — 0.055 s — 3/3 55.48 queries/second
success write out page data — 0.037 s
success write out redirect data — 0.002 s
success onPostBootstrap — 0.001 s
info bootstrap finished - 8.164 s
error There was an error compiling the html.js component for the devel
See our docs page on debugging HTML builds for help https://gatsby.dev
   98 |   })
   99 | 
> 100 |   const htmlElement = React.createElement(Html, {
      |         ^
  101 |     ...bodyProps,
  102 |     body: ``,
  103 |     headComponents: headComponents.concat([
WebpackError: Cannot find module 'core-js/modules/es6.array.iterator
  - develop-static-entry.js:100 Function.Module._resolveFilename
  - develop-static-entry.js:31 Function.Module._load
   - gatsby-ssr.js:13 Module.require
  - universalModuleDefinition:3 webpackUniversalModuleDefinition
   - universalModuleDefinition:10 Object.<anonymous>
  - createClass.js:2 Object.Module._extensions..js
  - develop-static-entry.js:62 tryModuleLoad
  - develop-static-entry.js:54 Function.Module._load
  - gatsby-ssr.js:13 Module.require
  - bootstrap:21 Promise
  - develop-static-entry.js:38 Promise._resolveFromExecutor
npm ERR! errno 1
npm ERR! gatsby@3.0.0 develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby@3.0.0 develop script.
npm ERR! This is probably not a problem with npm. There is likely addi
npm ERR! A complete log of this run can be found in:
npm ERR!     /home/phalient/.npm/_logs/2019-05-07T12_51_01_283Z-debug.


Look into the node_modules/core-js/modules/ folder and found es.array.iterator.js instead.

The es6.array namespace is from core-js 2 while core-js 3 moved to es.array. So looks like a version management issue and a package must have specified the latest version of core-js.


As this is a Gatsby project, start by looking at its build system - Babel. Looking at the project's package.json, it specifies the latest Gatsby, version 2, and you can google that it used Babel 7. Core-js is used by Babel.

From this announcement, core-js 2 and 3 are incompatible, just as what we encountered.

So as a first stab at resolving, try specifying an explicit dependecy in our projects package.json as so:

  "dependencies": {
    "@material-ui/core": "latest",
    "core-js": "^2.6.5",
    "gatsby": "latest",
    "jss": "latest",
    "prop-types": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-jss": "^8.1.0"

Rerunning the develop server and it started successfully.

Now I guess its time to hunt down if core-js is peer dependecy (most likley not otherwise npm would have warned us) or which module had a dependency on core-js and so how we can fix that module...fun!?