Can't publish to Netlify

[alfianridwan]

Description

After making a few customs javascript changes on my website (all frontend matter, CSS grid layout stuff), my website is not able to be published on Netlify.

Steps to reproduce

Right now, the website is last updated in February 25th, where a Masonry layout is not applied yet. The website can be seen in https://alfian.co.

Git Repo is https://github.com/alfianridwan/ar3.0-gatsby, if previewing it and building it locally with gatsby develop and gatsby build, it WORKS.

Expected result

Netlify should publish the website normally, as how gatsby build works locally.

Actual result

Netlify produced this error:

Executing user command: gatsby build
5:08:55 PM: success open and validate gatsby-configs — 0.008 s
5:08:56 PM: success load plugins — 0.216 s
5:08:56 PM: success onPreInit — 0.823 s
5:08:56 PM: success delete html and css files from previous builds — 0.090 s
5:08:56 PM: success initialize cache — 0.009 s
5:08:56 PM: success copy gatsby files — 0.021 s
5:08:56 PM: success onPreBootstrap — 0.006 s
5:08:57 PM: success source and transform nodes — 0.133 s
5:08:57 PM: success building schema — 0.297 s
5:08:57 PM: success createPages — 0.001 s
5:08:57 PM: success createPagesStatefully — 0.029 s
5:08:57 PM: success onPreExtractQueries — 0.005 s
5:08:57 PM: success update schema — 0.144 s
5:08:57 PM: success extract queries from components — 0.126 s
5:08:59 PM: success run graphql queries — 2.014 s — 8/8 3.99 queries/second
5:08:59 PM: success write out page data — 0.009 s
5:08:59 PM: success write out redirect data — 0.001 s
5:09:01 PM: info bootstrap finished - 9.533 s
5:09:01 PM: done generating icons for manifest
5:09:01 PM: success onPostBootstrap — 0.284 s
5:09:14 PM: success Building production JavaScript and CSS bundles — 12.368 s
5:09:15 PM: error Building static HTML failed for path "/404/"
5:09:15 PM: See our docs page on debugging HTML builds for help https://gatsby.app/debug-html
5:09:15 PM:   56 |
5:09:15 PM:   57 | function useBootstrapPrefix(prefix, defaultPrefix) {
5:09:15 PM: > 58 |   var prefixes = (0, _react.useContext)(ThemeContext);
5:09:15 PM:      | ^
5:09:15 PM:   59 |   return prefix || prefixes.get(defaultPrefix) || defaultPrefix;
5:09:15 PM:   60 | }
5:09:15 PM:   61 |
5:09:15 PM: 
5:09:15 PM:   WebpackError: TypeError: (0 , _react.useContext) is not a function
5:09:15 PM:   
5:09:15 PM:   - ThemeProvider.js:58 useBootstrapPrefix
5:09:15 PM:     [lib]/[react-bootstrap]/ThemeProvider.js:58:1
5:09:15 PM:   
5:09:15 PM:   - Container.js:29 Object.render
5:09:15 PM:     [lib]/[react-bootstrap]/Container.js:29:1
5:09:15 PM:   
5:09:15 PM:   - bootstrap:26 a.render
5:09:15 PM:     lib/webpack/bootstrap:26:1
5:09:15 PM:   
5:09:15 PM:   - bootstrap:24 a.read
5:09:15 PM:     lib/webpack/bootstrap:24:1
5:09:15 PM:   
5:09:15 PM:   - bootstrap:36 renderToString
5:09:15 PM:     lib/webpack/bootstrap:36:1
5:09:15 PM:   
5:09:15 PM:   - static-entry.js:194 Module../.cache/static-entry.js.__webpack_exports__.defa    ult
5:09:15 PM:     lib/.cache/static-entry.js:194:18
5:09:15 PM:   
5:09:15 PM:   - bootstrap:24 Promise
5:09:15 PM:     lib/webpack/bootstrap:24:1
5:09:15 PM:   
5:09:15 PM:   
5:09:15 PM:   - gatsby-browser-entry.js:26 Promise._resolveFromExecutor
5:09:15 PM:     lib/.cache/gatsby-browser-entry.js:26:16
5:09:15 PM:   
5:09:15 PM:   - bootstrap:68 new Promise
5:09:15 PM:     lib/webpack/bootstrap:68:1
5:09:15 PM:   
5:09:15 PM:   
5:09:15 PM:   - bootstrap:5 tryCatcher
5:09:15 PM:     lib/webpack/bootstrap:5:1
5:09:15 PM:   
5:09:15 PM:   - bootstrap:50 MappingPromiseArray._promiseFulfilled
5:09:15 PM:     lib/webpack/bootstrap:50:1
5:09:15 PM:   
5:09:15 PM:   - api-runner-ssr.js:6 MappingPromiseArray.PromiseArray._iterate
5:09:15 PM:     lib/.cache/api-runner-ssr.js:6:16
5:09:15 PM:   
5:09:15 PM:   - bootstrap:67 MappingPromiseArray.init
5:09:15 PM:     lib/webpack/bootstrap:67:1
5:09:15 PM:   
5:09:15 PM:   - bootstrap:19 MappingPromiseArray._asyncInit
5:09:15 PM:     lib/webpack/bootstrap:19:1

Environment

  System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-4308U CPU @ 2.80GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.0 - /usr/local/bin/node
    npm: 6.7.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 73.0.3683.86
    Firefox: 66.0.2
  npmPackages:
    gatsby: ^2.0.112 => 2.0.112 
    gatsby-image: ^2.0.29 => 2.0.29 
    gatsby-plugin-layout: ^1.0.12 => 1.0.12 
    gatsby-plugin-manifest: ^2.0.17 => 2.0.17 
    gatsby-plugin-offline: ^2.0.25 => 2.0.25 
    gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6 
    gatsby-plugin-sharp: ^2.0.20 => 2.0.20 
    gatsby-plugin-styled-components: ^3.0.5 => 3.0.5 
    gatsby-source-filesystem: ^2.0.27 => 2.0.27 
    gatsby-transformer-sharp: ^2.1.13 => 2.1.13 
  npmGlobalPackages:
    gatsby-cli: 2.5.5

I have no idea to what the error is telling me. I'm going crazy trying to fix this error which I don't even understand in the first place. I am new to React, Gatsby and Javascript in general so my lack of experience failed to help me debug the error. Any help is appreciated!

[andrewfairlie]

I'm going to take a stab at this and see if I can help you out @alfianridwan.

Really nice site, by the way!

[andrewfairlie]

Your repository has both a yarn.lock file and a package-lock.json file (those are for Yarn and NPM respectively).

When I install via your NPM lock it works, when I install via your Yarn lock it doesn't.

The package requirements between your two lock files are out of date. Your NPM lock file (package-lock.json) is more up to date, and I suspect that's the one you have installed locally.

Your Yarn lock file is the one that Netlify is going to prefer using (as I understand it they look for yarn.lock first, and if it doesn't exist they try NPM as a fallback) and because it's installing out of date versions of dependencies it's not able to run all of your code properly.

There's a nice fix for this though. You can update your Yarn lock file by running yarn upgrade and then committing that and redeploying on Netlify.

Alternatively if you prefer to use NPM over Yarn, you could perhaps consider removing your yarn.lock file entirely to avoid these mismatches in future.

I hope that helps, let me know how you get on 👍

[alfianridwan]

Hi @andrewfairlie, thanks for the feedback! Still long way to go before website is fullly complete, still have the case study layout, actual case study writing, and my personal dreaded task: connecting to Prismic or any other headless CMS!

In regards to the issue above, I think your suggestion might be right. I’m unsure to why there’s a Yarn file in my repository although I’ve never used Yarn. I assume Netlify had something to do with this, the log showed that it build with Yarn, IIRC.

I’m unable to check if your suggestion could solve my issue as I’ll be without my laptop until Friday, so hopefully it works!

Thank you so much for your effort and answer! Greatly appreciated :)

[sidharthachatterjee]

Starters include both a package-lock.json and yarn.lock at the moment so that explains how both of them got in.

Sorry about the confusion with respect to this and thank you for your detailed answer @andrewfairlie

[DSchau]

@alfianridwan lets close this out, as this seems fairly likely to be the solution.

If, however, something else arises when you check it out, please reply back and we'll check this out again and help however we can!

Thanks for using Gatsby 💜