search

panr / gatsby-starter-hello-friend

Pretty basic starter for Gatsby that covers all of the essentials. All you have to do is start typing!
MIT License
165 stars 71 forks source link

Invalid hook call #20

Closed averyfreeman closed 4 years ago

averyfreeman commented 4 years ago

Hi, I've been using your starter for my Gatsby blog. I hadn't updated it in about 5 months, but I wanted to push some new content today, tried to run the development server using gatsby develop and got this invalid hook call warning, failed to start.

Error logs:

`npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.

gatsby-starter-hello-friend@0.2.0 dev /home/avery/node/gatsby-hello-friend-upgraded gatsby clean && gatsby develop

The above error occurred in the component: in StoreStateProvider in App

React will try to recreate this component tree from scratch using the error boundary you provided, App. Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! gatsby-starter-hello-friend@0.2.0 dev: gatsby clean && gatsby develop npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the gatsby-starter-hello-friend@0.2.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! /home/avery/.npm/_logs/2020-06-18T21_42_35_657Z-debug.log avery@pengui:~/node/gatsby-hello-friend-upgraded$ gatsby develop

ERROR

The above error occurred in the component: in StoreStateProvider in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.

ERROR

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

ERROR

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

  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 See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

    Error: Invalid hook call. Hooks can only be called inside of the body of a function c omponent. This could happen for one of the following reasons:

    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 See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this pr oblem.

    • react.development.js:1590 resolveDispatcher [gatsby-hello-friend-upgraded]/[gatsby]/[react]/cjs/react.development.js:1590:13

    • react.development.js:1618 useState [gatsby-hello-friend-upgraded]/[gatsby]/[react]/cjs/react.development.js:1618:20

    • context.js:17 StoreStateProvider [gatsby-hello-friend-upgraded]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/conte xt.js:17:41

    • react-reconciler.development.js:6036 renderWithHooks [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:6036:18

    • react-reconciler.development.js:8570 mountIndeterminateComponent [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:8570:13

    • react-reconciler.development.js:9938 beginWork$1 [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:9938:16

    • react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:11563:10

    • react-reconciler.development.js:11740 invokeGuardedCallback [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:11740:31

    • react-reconciler.development.js:15778 beginWork$$1 [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:15778:7

    • react-reconciler.development.js:14696 performUnitOfWork [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:14696:12

`

package.json:

{ "name": "gatsby-starter-hello-friend", "description": "A simple starter for Gatsby. That's it.", "version": "0.2.0", "author": "Radek Kozieł <radoslaw.koziel@gmail.com>", "keywords": [ "gatsby", "minimal", "starter", "blog", "theme", "dark", "light", "personal site" ], "license": "MIT", "scripts": { "build": "gatsby build", "dev": "gatsby clean && gatsby develop", "format": "prettier --write \"src/**/*.js\"", "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"" }, "dependencies": { "@babel/core": "^7.8.3", "@browniebroke/gatsby-image-gallery": "^2.0.1", "@mdx-js/mdx": "^1.5.5", "@mdx-js/react": "^1.5.5", "@types/react": "^16.9.19", "core-js": "^3.6.4", "gatsby": "^2.19.5", "gatsby-awesome-pagination": "^0.3.5", "gatsby-image": "^2.2.39", "gatsby-plugin-manifest": "^2.2.38", "gatsby-plugin-mdx": "^1.0.67", "gatsby-plugin-offline": "^3.0.32", "gatsby-plugin-postcss": "^2.1.19", "gatsby-plugin-react-helmet": "^3.1.21", "gatsby-plugin-sharp": "^2.4.0", "gatsby-plugin-sitemap": "^2.2.26", "gatsby-remark-images": "^3.1.42", "gatsby-remark-prismjs": "^3.3.30", "gatsby-source-filesystem": "^2.1.46", "gatsby-transformer-remark": "^2.6.48", "gatsby-transformer-sharp": "^2.3.13", "prismjs": "^1.19.0", "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", "react-helmet": "^5.2.1", "react-image-lightbox": "^5.1.1", "tailwindcss": "^1.1.4", "typescript": "^3.7.5" }, "devDependencies": { "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3", "@babel/plugin-proposal-optional-chaining": "^7.8.3", "babel-eslint": "^10.0.3", "babel-preset-gatsby": "^0.2.27", "cssnano": "^4.1.10", "eslint": "^6.8.0", "eslint-config-airbnb": "^18.0.1", "eslint-config-prettier": "^6.9.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.18.0", "eslint-plugin-react-hooks": "^2.3.0", "gatsby-remark-embed-video": "^2.0.1", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "postcss-mixins": "^6.2.3", "postcss-nested": "^4.2.1", "postcss-preset-env": "^6.7.0", "postcss-url": "^8.0.0", "prettier": "^1.19.1", "rambdax": "^3.5.0" }, "repository": { "type": "git", "url": "https://github.com/panr/gatsby-starter-hello-friend" }, "bugs": { "url": "https://github.com/panr/gatsby-starter-hello-friend/issues" } }

node version 12.18.1

Thanks :)

panr commented 4 years ago

Please try: rm -rf node_modules yarn.lock && yarn (if you're using yarn, or npm install). This should help 👍

panr commented 4 years ago

I'll update dependencies soon ;-)

averyfreeman commented 4 years ago

Please try: rm -rf node_modules yarn.lock && yarn (if you're using yarn, or npm install). This should help 👍

Hi, yes I'm using npm, this is one of the first things I tried (of course). I am pretty deep into react from studying during pandemic lockdown. I am going to try making a blog with react-markdown so no hurry, I'm not sure if I'm going back to Gatsby. Need more control over what's going on.

panr commented 4 years ago

@averyfreeman

Hi, yes I'm using npm, this is one of the first things I tried (of course).

so it didn't help? That's weird, because I had the same error and after I've cleaned it up, error has gone 🤔

Anyway, good luck with starting a new blog 👍 Cheers! 🍻

averyfreeman commented 4 years ago

so [deleting node_modules folder and running npm i --save] didn't help? That's weird, because I had the same error and after I've cleaned it up, error has gone 🤔

Interesting. I'm using node 12.18.1 LTS, not sure if dependencies are locked for your starter. My guess is there were some breaking changes since when I last built the site.

I did try re-cloning your repo and building dependencies in the new clone and that worked just fine. Not on my old site, though. It's probably something either I'm responsible for doing, or a gatsby-specific issue.

The personal build went well, and taught me a bunch. Used NextJS bc of SSR, getStaticProps, seemed a lot harder to render .md files in vanilla React. I like having more control over the site now that I have some idea what's going on under the hood. But your starter served me very well for several months and I am truly grateful :) It's a good Gatsby starter for sure.