Why am I getting an Invalid Hook Call on a netlify build, but not on local gatsby?

I am tearing my hair out here... Any advice or pointers in the correct direction would be much appreciated.

Issue

I have a deployed gatsby site using netlify. Once built, one endpoint (site.com/posts/page/1) is completely blank. It is throwing the "Invalid Hook Call" error in the console, but only on netlify. Interestingly, the deployed version of the page actually loads when you manually refresh. Local build using gatsby build is fine, everything shows up as expected.

What I've tried A lot of what I've been trying has been to try and replicate it locally and fix from there (to no success).

  • locally: deleting all cache using gatsby clean, manually deleting node_modules, reinstalling with npm and building site. Can't replicate issue.
  • locally: downgrading versions of packages back to the state when my site did work online. Can't replicate issue
  • Netlify: Deleting cache and redeploying. Doesn't solve issues.

Invalid Hook Call

Ok, so my issues with trying to reproduce aside, I checked into possible reasons for the invalid hook call itself.

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app

as far as I can tell, all of these seem to be fine? Files below in case someone can spot something I can't...


package.json

{
  "name": "gatsby-theme-flora-website-starter",
  "version": "1.1.0",
  "main": "index.js",
  "author": "Oliver Bains @obains",
  "license": "MIT",
  "scripts": {
    "start": "gatsby develop",
    "build": "gatsby build",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "gatsby": "^2.29.3",
    "gatsby-cli": "^2.19.1",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-manifest": "^2.9.1",
    "gatsby-theme-flora-website": "^2.3.7",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "styled-components": "^4.4.1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/obains/flora-website-starter.git"
  },
  "bugs": {
    "url": "https://github.com/obains/flora-website-starter/issues"
  },
  "homepage": "https://github.com/obains/flora-website-starterr#readme",
  "devDependencies": {
    "eslint": "^7.19.0",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0"
  }
}

In particular, the .js file which leads to the endpoint comes from "gatsby-theme-flora-website".

resultsAll.js

import React from "react";
import path from "path";
import { graphql, navigate } from "gatsby";
import Layout from "../components/Layout";
import Card from "../components/Card";
import { Box, Grid, Typography } from "@material-ui/core";
import Pagination from "materialui-pagination-component";

const Posts = ({ posts, pathPrefix }) => {
  return (
    <Grid container spacing={3}>
      {posts.map(
        ({
          node: {
            excerpt,
            fileAbsolutePath,
            frontmatter: { id, title, featuredImage }
          }
        }) => {
          const postDate = path
            .basename(fileAbsolutePath)
            .split(".")
            .splice(0,1)
            .join(" ");
          return (
            <Grid item xs={12} sm={4} key={id}>
              <Card
                featuredImage={featuredImage}
                title={title}
                url={`/${pathPrefix}/${id}`}
                postDate={postDate}
                excerpt={excerpt}
              />
            </Grid>
          );
        }
      )}
    </Grid>
  );
};

export default function ResultsAllTemplate({
  data: {
    site: {
      siteMetadata: {
        templates: {
          posts: { pathPrefix }
        }
      }
    },
    allMdx: { edges: posts }
  },
  pageContext: { totalPages, currentPage }
}) {
  return (
    <Layout>
      <Box flexGrow={1} width="100%" maxWidth={960} marginX="auto">
        <Box padding={2}>
          <Posts posts={posts} pathPrefix={pathPrefix} />
          <Typography
            variant="caption"
            color="textSecondary"
            style={{ display: "block", marginTop: 32, marginBottom: 4 }}
          >
            Select page:
          </Typography>
          <Pagination
            selectVariant="tab"
            page={currentPage}
            totalPages={totalPages}
            onChange={page => navigate(`/${pathPrefix}/page/${page}`)}
          />
        </Box>
      </Box>
    </Layout>
  );
}

export const pageQuery = graphql`
  query($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        templates {
          posts {
            pathPrefix
          }
        }
      }
    }
    allMdx(
      filter: { fileAbsolutePath: { regex: "/content/posts/" } }
      sort: { order: ASC, fields: [fileAbsolutePath] }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          excerpt(pruneLength: 100)
          fileAbsolutePath
          frontmatter {
            id
            title
            featuredImage {
              childImageSharp {
                fluid(maxWidth: 720) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
`;

Versions

Locally I'm running: node 14.9.0 npm 6.14.8

I've set the environment variables on netlify to match these: NODE_VERSION 14.9.0 NPM_VERSION 6.14.8



Read more here: https://stackoverflow.com/questions/66248042/why-am-i-getting-an-invalid-hook-call-on-a-netlify-build-but-not-on-local-gatsb

Content Attribution

This content was originally published by ob9528 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: