Stack Overflow
Stack Overflow

Questions tagged [gatsby]

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Gatsby.js is a static site generator for React which transforms plain text into dynamic blogs and websites. One of the pillars for Gatsby is the concept of PWA (Progressive Web App) and Performance.

It supports Markdown, HTML, and React.js pages out of the box and it is easy to add support for additional data sources like headless CMSs, SaaS services, APIs, databases, your custom file system & more directly into your pages using GraphQL.

For a full-fledged tutorial, check here.

Resources

Browser supports

Official logo

Gatsby logo

5897 questions
375
votes
57 answers

An error, "failed to solve with frontend dockerfile.v0"

I was trying to build my Docker image for my Gatsby application. Whenever I run the command docker build . -t gatsbyapp, it gives me an error: failed to solve with frontend dockerfile.v0: failed to build LLB: failed to compute cache key: "/.env" not…
Muhammad Yasir
  • 3,814
  • 2
  • 5
  • 8
149
votes
13 answers

Node.js 17.0.1 Gatsby error - "digital envelope routines::unsupported ... ERR_OSSL_EVP_UNSUPPORTED"

I am building a Gatsby site. I upgraded Node.js to v17.0.1, and when I run a build, there is an error: Error: digital envelope routines::unsupported opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library:…
David
  • 1,505
  • 2
  • 10
  • 7
68
votes
4 answers

When to use a react framework such as Next or Gatsby vs Create React App

I'm in the sort of rapid prototyping phase of my React/javascript learning experience. I was wondering when folks would reach for a framework such as Next.js or Gatsby.js vs the standard Create React App. I really dig the page based structuring and…
Vince Picone
  • 719
  • 1
  • 5
  • 8
53
votes
6 answers

React-hot-loader: react--dom patch is not detected

I updated some npm packages in my Gatsby project and now I'm seeing this warning in console: React-hot-loader: react--dom patch is not detected. React 16.6+ features may not work. However, when I look into the source code, there is a comment: //…
Atte Juvonen
  • 4,922
  • 7
  • 46
  • 89
49
votes
5 answers

GatsbyJS getting data from Restful API

I am new in both React and GatsbyJS. I am confused and could not make figuring out in a simple way to load data from third-party Restful API. For example, I would like to fetch data from randomuser.me/API and then be able to use the data in…
AJ-
  • 1,027
  • 2
  • 13
  • 24
48
votes
12 answers

How do I add google fonts to a gatsby site

Getting started with Gatsby - when I add a link tag to public/index.html with the google font it works in development mode. When I build the site the index.html gets reset. So I guess there is another proper way to add the font?
enginedave
  • 983
  • 2
  • 8
  • 9
45
votes
4 answers

How do I avoid the warning: chunk styles [mini-css-extract-plugin] Conflicting order in GatsbyJS?

I'm using GatsbyJS and TypeScript along with the gatsby-plugin-sass plugin. I'm trying to import individual styling for components like the following example - import './Card.scss'. import React from 'react'; import Colors from…
kristofferandreasen
  • 847
  • 2
  • 12
  • 24
42
votes
9 answers

Using private key in a .env file

I have a multiline private key in a gatsby .env file: GATSBY_GOOGLE_CLIENT_ID="12345" GATSBY_GOOGLE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nflkdflkdf...\n-----END PRIVATE KEY-----" In my gatsby-config file I have: module.exports = { resolve:…
mckeever02
  • 641
  • 2
  • 7
  • 14
39
votes
6 answers

fatal: A branch named 'gh-pages' already exists

I made a template sale website (gatsby / react). I cloned my template GitHub repo and changed the remote origin to a new private repo, pushing to which works fine. I deploy to gh-pages with npm srcipt "deploy": "gatsby build --prefix-paths &&…
eoja
  • 1,642
  • 2
  • 12
  • 21
38
votes
11 answers

ESLint couldn't find the plugin "eslint-plugin-@typescript-eslint"

I'm not sure if there's a bug with something I'm using or whether I've just set something up wrong here, but I'm getting this error from eslint when running eslint src --fix about "eslint-plugin-@typescript-eslint" I've specified the plugin as…
James Mulholland
  • 1,782
  • 1
  • 14
  • 21
33
votes
4 answers

Reusable Gatsby-Image Component with dynamic image sources

I’m thinking of using Gatsby-Image for my next project and have been playing around with it a little. I got it to work on my test project, but then I came up with a use case that I would like to use the tag from Gatsby much like a regular…
erikos93
  • 677
  • 2
  • 12
  • 26
33
votes
10 answers

GatsbyJs client only paths goes to 404 page when the url is directly accessed in browser in "production"

I have created a Gatsby app and configured gatsby-node.js to a create client only paths, which are all working fine in development while directly accessing the url of the path but not in production. example : if(page.path.match(/^\/sample/)){ …
NavaneethaKrishnan Palanisamy
  • 331
  • 1
  • 3
  • 3
32
votes
4 answers

How do I get the current url in Gatsby?

I am currently creating share buttons with Gatsby and would like to share content based on the current url, which changes depending on the environment and the current page. With GoHugo this can be called with {{ .Permalink }}. Does anyone know how…
David
  • 4,191
  • 2
  • 31
  • 40
31
votes
5 answers

add raw HTML with