I am looking to integrate some custom React components from a GitHub repository into my Gatsby project. However, I am unsure about how to include an external folder. The structure of the components folder that I want to incorporate is as follows: |-- /dis ...
Being new to Gatsby, react, GraphQL, and more unfamiliar technologies, I have primarily relied on pure CSS, HTML, and JavaScript for my website projects in the past. However, intrigued by the potential of Gatsby, I decided to step out of my comfort zone an ...
There's a puzzling issue that I'm facing. One Contentful field grants me access to a variable, but the other four identical fields in the same content model don't provide the same access. Here's my query: export const pageQuery = graphql` query blogPost ...
I am working on a code snippet in GatsbyJS where I am extracting data from a StaticQuery using GraphQL and then rendering a component. The challenge I am facing is to conditionally check if a specific sub-object exists within the data object, and if it doe ...
I'm currently working on a ReactJS application using a gatsby-theme, but the build time is taking over 6 minutes. Is this typical for this type of application? If not, what can I do to improve and optimize the build time for my gatsby-theme project? ...
I created a static website using Gatsby and everything was working well. However, I encountered an issue when updating the titles and content of posts in Contentful CMS - the changes were not reflected when I refreshed the website. How can I ensure that ...
I have successfully set up a project with the following steps: npm install -g gatsby gatsby new dev-blog cd dev-blog npm install However, when I attempt to launch my project using gatsby develop --host localhost --port 9000 An error occurs at this sta ...
I've been trying to include inline images in my markdown file with the gatsby-remark-images plugin. However, I'm facing an issue where the image is not loading on my local host. I'm not sure if it's a syntax error or if I'm missing ...
Have you ever thought about the connection between Next.js and Gatsby.js, both being built on React.js? Could it be that the development environments are Node applications themselves? Or maybe there's something else I'm not seeing? While I have ...
Recently, I embarked on creating a blog by following a 2019 tutorial that utilized the contentful-plugin. However, upon researching the updated documentation from Gatsby, I encountered some discrepancies which hindered my progress. My primary issue lies in ...
I'm facing a strange issue where the styles vanish on page reload, but everything appears normal on the initial load. This problem only occurs when the website is deployed and not in the local development environment. I am using GatsbyJS and Material-UI fo ...
Having a complex setup involving Gatsby 1.9, react-next, React 16.5.2, and Material UI 3.2.2. Encountering issues with Radio and RadioGroup components consistently causing a strange error to pop up (refer to the image below). Unfortunately, unable to upg ...
I am currently in the process of developing a website that will include a blog section. For this project, I am using Gatsby and following a tutorial on incorporating MDX into my site's structure. One key aspect that I have been working on is utilizing ...
I encountered an issue where I was unable to create an image using any of the supported types like CSSImageValue, HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, or OffscreenCanvas in my SSR application with Gatsby. De ...
I've been trying to access a Gatsby component called Anime from outside of it, but I'm struggling to determine its instance name. Here's the code snippet: import React from 'react' import PropTypes from 'prop-types' import PreviewCompatibleIma ...
I've been facing challenges while trying to build my Gatsby site. Whenever I run 'gatsby develop' in the console, my app starts without any issues. However, when I attempt to build it, I encounter errors like the ones shown below. Does anyon ...
The website build is located at . It appears that the javascript functionality is not working, and only the html version (usually meant for search engines) is being displayed. It seems like this issue is only affecting the home page. You can check out the ...
Currently, I am in the process of developing a GatsbyJS website using Material UI. I have been attempting to create a blinking animation by utilizing the withStyles HOC. I made an attempt to include the animation within the styles: const styles = theme =&g ...
Error: The module 'sharp' could not be found. The required stack includes: - D:Marketingsbj-reactsuburban ode_modulesgatsby-plugin-manifestsafe-sharp.js - D:Marketingsbj-reactsuburban ode_modulesgatsby-plugin-manifestgatsby-node.js - D: ...
Media.net Ads provided me with two scripts to insert into the head and body tags of my site. For the head tag - <script type="text/javascript"> window._mNHandle = window._mNHandle || {}; window._mNHandle.queue = window._mNHandle.queue || [] ...
https://i.stack.imgur.com/DyZxQ.png I'm facing some issues while trying to install gatsby-plugin-transition-link using npm. No matter what solutions I've attempted, the errors persist. Can anyone provide insight into what might be causing this problem? Mu ...
Since the most recent update today, I've been encountering this error. There is no MDX being used in my project at all.. When running npm run develop, this issue arises. Does anyone have any insights on this? internal/modules/cjs/loader.js:979 thro ...
When comparing the links on (check source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), they appear without an underline. However, on my blog (source code here: https://github.com/YikSanChan/yiksanchan.com), all links are un ...
It seems that there are plenty of guides available on converting a file from .js to .d.ts, but not the other way around. Specifically, I have some code in .d.ts format and I would like to convert it into JavaScript. Can anyone offer assistance with this t ...
I am looking to implement a route in my Gatsby-generated website that uses a slug as a parameter. Specifically, I have a collection of projects located at the route /projects/<slug>. Typically, when using React Router, I would define a route like t ...
I need to include a Django tag within the head section so that the template can render dynamic metatags server-side. What I am aiming to accomplish is: {% block metatags %} <meta name="description" content="{{ metatags.description }}&qu ...
import { graphql } from 'gatsby'; const Footer = ({phone}: { phone?: Queries.FooterFragment['phone'];}): JSX.Element => { return <footer>{phone}</footer>; }; export default Footer export const query = graphql` fragm ...
Is there a way to remove the <header/> and <footer/> components from my signup.js and signin.js pages without altering the root index.js file? Presently, the root index.js file looks like this: class Template extends React.Component { render( ...
❗ Command failed: C:\projects\my-blazing-fast-site\node_modules\pngquant-bin\vendor\pngquant.exe --version ❗ pngquant pre-build test failed ℹ compiling from source ✖ Error: pngquant failed to build, make sure that lib ...
Currently, I am working on building dynamic pages using gatsby-node. The templates for these pages are stored in the templates/ directory. However, I have run into an issue where I cannot utilize tailwind classes within these templates unless they are al ...
I've checked out other posts related to this issue but still can't seem to resolve it. My development build is functioning properly, but the error below is being thrown by Netlify during deployment: 4:58:48 PM: WebpackError: TypeError: props.ch ...
I'm interested in developing a website without depending on client-side JavaScript, but I still want to incorporate SPA features such as client-side routing. To achieve this, I am considering using a framework that does not rely on rendering on the clien ...
While using createGlobalStyle from styled-components for global styling, everything seems to be working fine except for applying Google fonts. I have tried multiple ways but can't seem to get it to work. Here's the code snippet: import { createGlobalStyle ...
Currently, I am utilizing Material UI and incorporating the Link component prop to establish various routes. These routes include: /home /contact /login However, upon clicking on /home followed by /contact, instead of redirecting to /contact, it takes me ...
I am seeking clarification on how the reference to %s is connected to the title attribute of the <SEO /> component within the <Helmet /> component in the gatsby starter theme. Can you explain this? Link to GitHub repo On Line 19 of the code: ...
Recently, I attempted to integrate the Google Marketing Platform plugin into a Gatsby site by following the instructions in gatsbyconfig.js. However, upon deployment, an error occurred. While the plugin code itself appears to be error-free, the deployment ...
As an illustration: - const nation = "USA" import chat from './utils/script'; // script is imported from a file if(nation === "USA") // utilized conditionally in the component { chat } else { console.log("Not USA") } inform me without employi ...
Error: is.urlInstance function not available Encountering dependency issues after attempting to update gatsby version without success. npm error code ERESOLVE Unable to resolve dependency tree While resolving: [email protected] Found: [email pr ...
I am currently working on a responsive web player app using react-player to gather stats on playedTime and other data by utilizing a callback prop called onProgress. However, I encountered a Parsing Error when trying to use useState, which displayed an U ...
Within the layout folder of my project, I have a Header component that includes a query to fetch some data. However, when I attempt to log this.props.data in the console, all I get is 'undefined'. Could someone please point out where I might be making a mi ...
The gatsby project I set up following the official website instructions seems to be malfunctioning. NodeJS version: v16.15.0, npm version: 8.8.0, gatsby version: 4.13.0, gatsby CLI version: 4.13.0 C:UsersDellDesktopNew foldermy-app>npm run develo ...
I set up the Gatsby starter application here and everything was running smoothly until I introduced a hook (specifically by swapping out the index.js with the code below): import React, { useState } from 'react'; export default () => { const [greeti ...
I've spent hours searching on Google, but I haven't been able to find a solution. Below is the code for my Navbar component: import React from "react"; import AppBar from "@material-ui/core/AppBar"; import Toolbar from " ...
Many blog posts and the example on Gatsby JS's website demonstrate the use of a tsconfig.json file alongside the gatsby-plugin-typescript for TypeScript support in Gatsby. However, it seems like the tsconfig.json file is not actually utilized for conf ...
Issue with Layout warning in index.tsx when hovering: (alias) const Layout: ({ children }: Props) => JSX.Element import Layout Type '{ children: Element[]; }' is missing the following properties from type 'Props': theme, >toggle ...
I'm currently facing an issue with my Heroes component. const UniqueHero = styled.div` display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, #1f1f21 1%, #1f1f21 1%,rgba(25, 26, 27, 0) 100%) , url(${props =&g ...
Currently in the process of building a website using Gatsby JS and Material UI. I'm wondering about the best approach for storing the site content. This website will serve as a promotional platform for a small business. Should I store the text directly in ...
I've been trying to embed a typeform according to the instructions provided, but even after switching to yarn package manager as recommended, I keep encountering an error during the build process. 5:27:38 PM: failed Building static HTML for pages - 4. ...
After cloning my repository and installing all packages via npm, I encountered an error when trying to start my program with gatsby develop. The error appears in all files within the templates directory. https://i.stack.imgur.com/MsAUm.png I've attempted ...
I recently built a website using gatsby.js and incorporated bounce.js to animate some images on the page. Bounce.js is a JavaScript library that offers DOM animation functionalities. Although everything appears fine when I view the site locally, once I de ...
I am encountering an issue with my website build using gatsby.js and bulma. While building the site, I receive the following error message: WebpackError: document is not defined The only instance where I use document is for the navbar-burger toggle code ...
To dynamically generate a specific number of fields based on user input from the initial form step, I am utilizing a multi-step form with a "Wizard" class as the <Condition /> component does not fit my requirements. Essentially, I need to retrieve v ...
My observation is that the UP and DOWN arrow keys are used to move the selection, indicating that it may be tabbed into somehow. https://i.stack.imgur.com/NsNjQ.png I came across a material-ui Menu component where Gatsby Link components were wrapping the ...
Currently working on a GatsbyJS project and attempting to utilize a Hook, however encountering an error message. Initially, I decided to remove the node_modules folder and package.json.lock file, then executed npm install again, unfortunately without reso ...
My website has multiple pages with paginated lists of blog posts, each post generated from markdown using createPage(). Each page in the /posts directory displays 3 post previews and subsequent pages are numbered (e.g. /posts/2). I am trying to pass the p ...
I am currently working on a Gatsby app and utilizing Gatsby Functions to obscure form submissions to an external API. The issue I am facing is that when a user attaches a file in the form, it could potentially surpass the default size limit of 100KB. While ...
Trying to execute npm install for my Gatsby project on macOS Ventura. sh -c (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy) Reviewed previous error tickets and att ...
I'm currently facing challenges with Gatsby, webpack, or npm that I haven't fully grasped yet. Upon running certain commands in the terminal, an issue seems to have surfaced while attempting to resolve a "could not find module" error related to the materi ...
After spending more than 6 hours on this, I've decided to call it quits for today. However, I'm hoping someone out there might have a solution. The problem at hand is as follows: I'm trying to include an array of images in a Markdown file to generate a ga ...
I utilized a Gatsby starter to set up my static website and within it, there is a pre-existing demo page showcasing all the UI elements. Although I wish to retain the page for reference purposes, I prefer not to make it publicly accessible. Is there a met ...
Currently diving into the world of Gatsby and I've decided to implement MDX for my blog pages. Following a helpful tutorial here on programmatically creating pages. All seems well as I can view them in my GraphQL and displaying the list of articles is fun ...
Hey there, I could use some help with this issue: Recently, I created a website using Gatsby.js and deployed it to my web server (which is running NGINX on Ubuntu 20.04). The site uses Gatsby Image for querying and displaying images, and everything seems t ...
Starting my Gatsby journey and experimenting with the gatsby-source-pg plugin. Encountering issues with different graphql versions. Reached out to the plugin author on GitHub for assistance, and they were extremely helpful in addressing my concerns. Howev ...
Just starting out as a Frontend Developer and currently learning Gatsbyjs along with the Material UI library. I'm working on creating a new page using the Material UI Gatsby Starter code available here. However, I've encountered an issue when trying to cr ...
I tried to install gatsby by running the command below with and without sudo, but I encountered errors. npm install --global gatsby@next gatsby-cli@next Here's what the errors look like. npm ERR! code ETARGET npm ERR! notarget No matching version found f ...
I'm curious if it's possible to set up GraphQL in Next.js similar to how it's done in Gatsby, allowing me to query pages and retrieve data from them. Are there any plugins available for Next.js that work like Gatsby-file-source and gatsby-ma ...
Since yesterday, I've been facing issues deploying my Gatsby site to our server due to a problem with the mozjpeg library. Has anyone else run into this error before? I've attempted: locking gatsby-cli installing the automake linux package inst ...
I'm attempting to integrate TypeScript with Gatsby following the guidelines provided here. However, I am encountering an issue where the tsc command is failing to transpile the spread (...) operator and producing the error shown below: WAIT Compili ...