gatsby

问题 When attempting to pass custom props from layout to children, I am receiving the following: TypeError: props.children is not a function Layout (functional component summary) import React, { useState } from 'react' import { useStaticQuery, graphql } from 'gatsby' export default (props) => { const {site} = useStaticQuery( graphql` { site { siteMetadata { title } } } ` ) const globals = {title: site.siteMetadata.title} return ( <> {props.children({...props, ...globals})} </> ) } Child (also a

问题 I don't know why my LCP would be a p tag, and I have no idea what I would do to reduce the size of it. Sometimes it gets up to 2.6s and gives a yellow rating(instead of green). This is the p tag. All of those classes are bootstrap classes. <p className="text-center mb-md-5 mt-0 mb-5">{aboutText}</p> This is the variable aboutText const aboutText = `Suddenly Magazine highlights the uniqueness of Saskatchewan, and its sudden rise in popularity and growth mentioned in publications such as USA

问题 For those stumbling on this question wondering how to improve their lighthouse score in general, I posted an answer on this topic on another question with lots of general tips. I'm running PageSpeed insights and my biggest problem is the largest contentful paint, at about 8-10 seconds. Below they list my largest contentful paint element Largest Contentful Paint element 1 element found This is the largest contentful element painted within the viewport. Learn More Element This is the a

问题 I have a json file and a folder with images plugins/ └── gatsby-source-cars/ ├── images/ ├── cars.json └── gatsby-node.js the file cars.json contains an array and each index is an object that contains a key with the relative path to the image I want to load the image file on sourceNodes instead just the path to use with gatsby-image plugin 回答1: I assume that you want to process your local images with sharp since you said you want to use it with gatsby-image , this means you have gatsby-plugin

问题 I have a json file and a folder with images plugins/ └── gatsby-source-cars/ ├── images/ ├── cars.json └── gatsby-node.js the file cars.json contains an array and each index is an object that contains a key with the relative path to the image I want to load the image file on sourceNodes instead just the path to use with gatsby-image plugin 回答1: I assume that you want to process your local images with sharp since you said you want to use it with gatsby-image , this means you have gatsby-plugin

问题 I'm using gatsby-plugin-alias-imports to be able to do absolute imports like so: import { colors } from "@styles/theme"; This is set up in the gatsby-config . Now I've just added storybook to my project. Since storybook doesn't run through gatsby, the alias imports won't resolve and I get an error: ERROR in ./src/components/Button/index.js Module not found: Error: Can't resolve '@styles/theme' in ... This makes sense. Storybook doesn't know what to do with @styles... - but how can I fix this?

问题 Obviously, that's not an easy task, as the only thing that changes in the html.js template file by default are the head meta tags and the content. The meta tags are handled by the Helmet component ( {head.title.toComponent()} and {head.meta.toComponent()} ) and the HTML changes inside the template are managed by React. ( <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} /> ) The body tag however is outside the scope of React, which is why I can't figure out how to

问题 Obviously, that's not an easy task, as the only thing that changes in the html.js template file by default are the head meta tags and the content. The meta tags are handled by the Helmet component ( {head.title.toComponent()} and {head.meta.toComponent()} ) and the HTML changes inside the template are managed by React. ( <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} /> ) The body tag however is outside the scope of React, which is why I can't figure out how to

问题 I'm developing a gatsby theme/starter for PWA's, but I can't seem to get rid of the following console warning: The resource https://davidde.github.io/gatsby-starter-simpwa/page-data/offline-plugin-app-shell-fallback/page-data.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally. On first load everything works fine; the service worker registers like it should and

问题 I'm developing a gatsby theme/starter for PWA's, but I can't seem to get rid of the following console warning: The resource https://davidde.github.io/gatsby-starter-simpwa/page-data/offline-plugin-app-shell-fallback/page-data.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally. On first load everything works fine; the service worker registers like it should and