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
lib/.cache/develop-static-entry.js:100:9
- develop-static-entry.js:31 Function.Module._load
lib/.cache/develop-static-entry.js:31:3
- gatsby-ssr.js:13 Module.require
lib/gatsby-ssr.js:13:28
- universalModuleDefinition:3 webpackUniversalModuleDefinition
lib/webpack/universalModuleDefinition:3:1
- universalModuleDefinition:10 Object.<anonymous>
lib/webpack/universalModuleDefinition:10:2
- createClass.js:2 Object.Module._extensions..js
[lib]/[@babel]/runtime/helpers/createClass.js:2:1
- develop-static-entry.js:62 tryModuleLoad
lib/.cache/develop-static-entry.js:62:9
- develop-static-entry.js:54 Function.Module._load
lib/.cache/develop-static-entry.js:54:3
- gatsby-ssr.js:13 Module.require
lib/gatsby-ssr.js:13:28
- bootstrap:21 Promise
lib/webpack/bootstrap:21:1
- develop-static-entry.js:38 Promise._resolveFromExecutor
lib/.cache/develop-static-entry.js:38:3
npm ERR! code ELIFECYCLE
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!?