Home
Support Forums

Help! Can't figure out why Gatsby Devployment Failed

My site name is: distracted-babbage-6da032

Line 99 of the deployment log shows an error that say ‘Unexpected keys’ I don’t know where these keys are located or found. I’m not sure how to debug that error.

I’m trying to use react portal in Gatsby so that’s likely causing the problem. The modal that I have created works fine on localhost, but fails to deploy on Netlify.

Here is a screenshot of the deployment log:

────────────────────────────────────────────────────────────────
9:23:37 PM: 2. Build command from Netlify app
9:23:37 PM: ────────────────────────────────────────────────────────────────
9:23:37 PM: ​
9:23:37 PM: $ CI=’’ npm run build
9:23:37 PM: > gatsby-starter-hello-world@0.1.0 build /opt/build/repo
9:23:37 PM: > gatsby build
9:23:38 PM: error Unexpected keys “componentDataDependencies”, “pageData” found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: “nodes”, “logs”, “pages”, “redirects”, “schema”, “definitions”, “staticQueryComponents”, “status”, “webpack”, “webpackCompilationHash”, “config”, “lastAction”, “jobsV2”, “pageDataStats”, “components”, “babelrc”, “jobs”, “nodesByType”, “program”, “resolvedNodesCache”, “nodesTouched”, “flattenedPlugins”, “pendingPageDataWrites”, “schemaCustomization”, “inferenceMetadata”, “staticQueriesByTemplate”, “queries”, “visitedPages”, “html”, “functions”, “nodeManifests”. Unexpected keys will be ignored.
9:23:40 PM: warning Plugin gatsby-plugin-sass is not compatible with your gatsby version 3.14.2 - It requires gatsby@^2.0.0
9:23:40 PM: warning Plugin gatsby-plugin-portal is not compatible with your gatsby version 3.14.2 - It requires gatsby@^2.0.0
9:23:40 PM: warning Plugin gatsby-transformer-json is not compatible with your gatsby version 3.14.2 - It requires gatsby@^2.0.15
9:23:40 PM: warning Plugin gatsby-source-filesystem is not compatible with your gatsby version 3.14.2 - It requires gatsby@^2.2.0
9:23:40 PM: warning Plugin gatsby-plugin-sass is not compatible with your gatsby version 3.14.2 - It requires gatsby@^2.0.0
9:23:40 PM: warning Plugin gatsby-plugin-portal is not compatible with your gatsby version 3.14.2 - It requires gatsby@^2.0.0
9:23:40 PM: warning Plugin gatsby-transformer-json is not compatible with your gatsby version 3.14.2 - It requires gatsby@^2.0.15
9:23:40 PM: warning Plugin gatsby-source-filesystem is not compatible with your gatsby version 3.14.2 - It requires gatsby@^2.2.0
9:23:40 PM: success open and validate gatsby-configs, load plugins - 0.259s
9:23:40 PM: success onPreInit - 0.015s
9:23:40 PM: info One or more of your plugins have changed since the last time you ran Gatsby. As
9:23:40 PM: a precaution, we’re deleting your site’s cache to ensure there’s no stale data.success initialize cache - 0.072s
9:23:40 PM: success copy gatsby files - 0.078s

// After a few lines of success…

9:24:02 PM: success Building HTML renderer - 2.006s
9:24:02 PM: error Page data from page-data.json for the failed page “/”: {
9:24:02 PM: “componentChunkName”: “component—src-pages-index-js”,
9:24:02 PM: “path”: “/”,
9:24:02 PM: “result”: {
9:24:02 PM: “pageContext”: {}
9:24:02 PM: },
9:24:02 PM: “staticQueryHashes”:
9:24:02 PM: }
9:24:02 PM: failed Building static HTML for pages - 0.408s
9:24:02 PM: error Building static HTML failed for path “/”
9:24:02 PM:
9:24:02 PM: 285 | wc=function(a){if(13===a.tag){var b=hg(Gg(),150,100);Ig(a,b);ek(a,b)}};xc=function(a){13===a.tag&&(Ig(a,3),ek(a,3))};yc=function(a){if(13===a.tag){var b=Gg();b=Hg(b,a,null);Ig(a,b);ek(a,b)}};
9:24:02 PM: 286 | za=function(a,b,c){switch(b){case “input”:Cb(a,c);b=c.name;if(“radio”===c.type&&null!=b){for(c=a;c.parentNode;)c=c.parentNode;c=c.querySelectorAll(“input[name=”+JSON.stringify(""+b)+’][type=“radio”]’);for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=Qd(d);if(!e)throw Error(u(90));yb(d);Cb(d,e)}}}break;case “textarea”:Kb(a,c);break;case “select”:b=c.value,null!=b&&Hb(a,!!c.multiple,b,!1)}};Fa=Mj;
9:24:02 PM: > 287 | Ga=function(a,b,c,d,e){var f=W;W|=4;try{return cg(98,a.bind(null,b,c,d,e))}finally{W=f,W===V&&gg()}};Ha=function(){(W&(1|fj|gj))===V&&(Lj(),Dj())};Ia=function(a,b){var c=W;W|=2;try{return a(b)}finally{W=c,W===V&&gg()}};function kk(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!gk(b))throw Error(u(200));return jk(a,b,null,c)}var lk={Events:[Nc,Pd,Qd,xa,ta,Xd,function(a){jc(a,Wd)},Da,Ea,id,mc,Dj,{current:!1}]};
9:24:02 PM: | ^
9:24:02 PM: 288 | (function(a){var b=a.findFiberByHostInstance;return Yj(n({},a,{overrideHookState:null,overrideProps:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:Wa.ReactCurrentDispatcher,findHostInstanceByFiber:function(a){a=hc(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null},findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null}))})({findFiberByHostInstance:tc,bundleType:0,version:“16.13.1”,
9:24:02 PM: 289 | rendererPackageName:“react-dom”});exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=lk;exports.createPortal=kk;exports.findDOMNode=function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;if(void 0===b){if(“function”===typeof a.render)throw Error(u(188));throw Error(u(268,Object.keys(a)));}a=hc(b);a=null===a?null:a.stateNode;return a};
9:24:02 PM: 290 | exports.flushSync=function(a,b){if((W&(fj|gj))!==V)throw Error(u(187));var c=W;W|=1;try{return cg(99,a.bind(null,b))}finally{W=c,gg()}};exports.hydrate=function(a,b,c){if(!gk(b))throw Error(u(200));return ik(null,a,b,!0,c)};exports.render=function(a,b,c){if(!gk(b))throw Error(u(200));return ik(null,a,b,!1,c)};
9:24:02 PM:
9:24:02 PM: WebpackError: Minified React error #200; visit https://reactjs.org/docs/error- decoder.html?invariant=200 for the full message or use the non-minified dev en vironment for full errors and additional helpful warnings.
9:24:02 PM:
9:24:02 PM: - react-dom.production.min.js:287
9:24:02 PM: [gatsby-starter-hello-world]/[react-dom]/cjs/react-dom.production.min.js:287 :303
9:24:02 PM:
9:24:02 PM: - onloadModal.jsx:14
9:24:02 PM: gatsby-starter-hello-world/src/components/onloadModal.jsx:14:12
9:24:02 PM:
9:24:02 PM: - utils.js:29
9:24:02 PM: [gatsby-starter-hello-world]/[@gatsbyjs]/reach-router/lib/utils.js:29:1
9:24:02 PM:
9:24:02 PM: - utils.js:32
9:24:02 PM: [gatsby-starter-hello-world]/[@gatsbyjs]/reach-router/lib/utils.js:32:10
9:24:02 PM:
9:24:02 PM: - utils.js:37
9:24:02 PM: [gatsby-starter-hello-world]/[@gatsbyjs]/reach-router/lib/utils.js:37:1
9:24:02 PM:
9:24:03 PM: Creating deploy upload records
9:24:02 PM: - utils.js:37
9:24:02 PM: [gatsby-starter-hello-world]/[@gatsbyjs]/reach-router/lib/utils.js:37:1
9:24:02 PM:
9:24:02 PM: - utils.js:47
9:24:02 PM: [gatsby-starter-hello-world]/[@gatsbyjs]/reach-router/lib/utils.js:47:1
9:24:02 PM:
9:24:02 PM: - static-entry.js:299
9:24:02 PM: gatsby-starter-hello-world/.cache/static-entry.js:299:22
9:24:03 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2
9:24:02 PM:
9:24:02 PM: - utils.js:168
9:24:02 PM: [gatsby-starter-hello-world]/[@gatsbyjs]/reach-router/lib/utils.js:168:1
9:24:02 PM:
9:24:02 PM:
9:24:02 PM: not finished Caching JavaScript and CSS webpack compilation - 2.483s
9:24:02 PM: not finished Caching HTML renderer compilation - 0.452s
9:24:02 PM: npm ERR! code ELIFECYCLE

// A few other npm ERR! messages…

────────────────────────────────────────────────────────────────
9:24:02 PM: “build.command” failed
9:24:02 PM: ────────────────────────────────────────────────────────────────
9:24:02 PM: ​
9:24:02 PM: Error message
9:24:02 PM: Command failed with exit code 1: CI=’’ npm run build
9:24:02 PM: ​
9:24:02 PM: Error location
9:24:02 PM: In Build command from Netlify app:
9:24:02 PM: CI=’’ npm run build
9:24:02 PM: ​
9:24:02 PM: Resolved config
9:24:02 PM: build:
9:24:02 PM: command: CI=’’ npm run build
9:24:02 PM: commandOrigin: ui
9:24:02 PM: environment:
9:24:02 PM: - NODE_VERSION
9:24:02 PM: publish: /opt/build/repo/public
9:24:02 PM: publishOrigin: ui
9:24:02 PM: plugins:
9:24:02 PM: - inputs: {}
9:24:02 PM: origin: ui
9:24:02 PM: package: ‘@netlify/plugin-gatsby’
9:24:03 PM: Caching artifacts
9:24:03 PM: Started saving node modules
9:24:03 PM: Finished saving node modules
9:24:03 PM: Started saving build plugins
9:24:03 PM: Finished saving build plugins
9:24:03 PM: Started saving pip cache
9:24:03 PM: Finished saving pip cache
9:24:03 PM: Started saving emacs cask dependencies
9:24:03 PM: Finished saving emacs cask dependencies
9:24:03 PM: Started saving maven dependencies
9:24:03 PM: Finished saving maven dependencies
9:24:03 PM: Started saving boot dependencies
9:24:03 PM: Finished saving boot dependencies
9:24:03 PM: Started saving rust rustup cache
9:24:03 PM: Finished saving rust rustup cache
9:24:03 PM: Started saving go dependencies
9:24:03 PM: Finished saving go dependencies
9:24:03 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
9:24:03 PM: Failing build: Failed to build site
9:24:03 PM: Finished processing build request in 1m29.405117975s

Hi @EndofLine4,

I tried to visit the error React is pointing to and saw this:

Looks like you’re trying to do some DOM-related stuff on an object that’s not a DOM element?

Yes, I’m trying to create a modal that shows up on page load with a button for the user to close it. It must not see the document object as an element because it doesn’t exist yet. Not sure how to write this correctly with Gatsby. Here’s my code from the modal component file:

import React from ‘react’
import ReactDOM from ‘react-dom’
import ‘./onloadModal.scss’

const portalRoot = typeof document !== undefined ? document.getElementById(‘portal’) : null

const OnloadModal = ({ open, children, onClose }) => {

if (!open) return null  

return ReactDOM.createPortal (
    <>
        <div className='alert-overlay'>
            <div className='modal-style'>

                <button className='alert-close' onClick={onClose}>Close</button>

                {children}

            </div>
        </div>
    </>, portalRoot
)

}

export default OnloadModal

You might find the Portals documentation helpful here. There is a demonstration on codepen.io too.