GithubHelp home page GithubHelp logo

fabe / gatsby-universal Goto Github PK

View Code? Open in Web Editor NEW
616.0 14.0 96.0 5.44 MB

๐Ÿ”ฎ An opinionated Gatsby v2 starter for state-of-the-art marketing sites.

Home Page: https://gatsby-universal.netlify.com

License: MIT License

JavaScript 100.00%
gatsby boilerplate static-site gatsby-starter universal pwa jamstack

gatsby-universal's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gatsby-universal's Issues

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.38 to 2.0.39.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.30 to 2.0.31.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.38 to 2.0.39.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

Programmatically create pages from data fails

I'm trying to createpages. It works when I use gatsby develop but it fails when I use gatsby build

const Project = ({ data }) => {
  34 |   const post = data.markdownRemark;
> 35 |   const featuredImgFluid = post.frontmatter.featuredImage.childImageSharp.fluid;
     |                                                           ^
  36 |   return (
  37 |     <Layout>
  38 |       <Container>


  WebpackError: TypeError: Cannot read property 'childImageSharp' of null

  - project.js:35 Project
    src/templates/project.js:35:59

  - gatsby-ssr.js:14 Module.replaceRenderer
    gatsby-ssr.js:14:40

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions;
  if (node.internal.type === 'MarkdownRemark') {
    const slug = createFilePath({ node, getNode, basePath: 'content' });
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    });
  }
};

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `);
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.fields.slug,
        component: path.resolve(`./src/templates/project.js`),
        context: {
          // Data passed to context is available
          // in page queries as GraphQL variables.
          slug: node.fields.slug,
        },
      });
  });
};

Remove pathPrefix from site-config.js

Hello! Thanks for the awesome Gatsby starter. I wanted to flag an issue that I came across while using it:

In site-config.js, there is an entry for pathPrefix:

module.exports = {
  siteTitle: `Gatsby Universal`,
  siteTitleShort: `GatsbyU`,
  siteDescription: `An opinionated starter for Gatsby.`,
  siteUrl: `https://gu.fabianschultz.com`,
  themeColor: `#000`,
  backgroundColor: `#fff`,
  pathPrefix: null,
  logo: path.resolve(__dirname, 'src/images/icon.png'),
  social: {
    twitter: `gatsbyjs`,
    fbAppId: `966242223397117`,
  },
};

I tried to use this key to influence the Gatsby build as detailed here: https://www.gatsbyjs.org/docs/path-prefix/, which does not work as site-config.js is loaded under the siteMetadata key within gatsby-config. Instead, pathPrefix needs to be set at the top level of the gatsby-config.js module.

Is there a use case for storing pathPrefix on siteMetadata? If not, I would suggest removing it as it can be confusing to beginners.

Thanks!

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.33 to 2.0.34.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

A few questions regarding your setup

Hey Fabian,

I don't really experience troubles with your starter and I find it pretty awesome! ๐ŸŽ‰ I have a few questions regarding the project and couldn't find a more appropriate place to ask ๐Ÿ‘

Questions

โ“/static/social.png - couldn't find any good usage. On the other hand I see /src/images/icon.png which seems to be used globally for the favicon and some other configs. Wouldn't it make more sense to replace social.png with icon.png or you have other plans?

โ“ Regarding the available npm scripts I'm a bit confused. I assume the build command would be sufficient so we can deploy the generated /public folder and its contents? Is this correct assumption?

โ“Can you please elaborate a bit on /scripts/lighthouse.test.js and its usage? I find it pretty interesting.

โ“Can you please elaborate on the purpose and usage of the ssr script?

โ“Why do you use your own site-config.js file instead of placing its contents directly in gatsby-config.js. It can later replace the two usages of site-config.js?

Feedback

I want to say thank you for this amazing template and I find it one of the best in terms of goals and ideas! There are a few notes I'd like to share as a developer. Feel free to neglect or ignore, but let me know if they make sense and you want to discuss them further.

๐Ÿค” The template gets a bit too opinionated making it hard to use out-of-the-box without "clearing" it first. I'd say that most of the code in /src can be omitted for simplicity. You can maybe clone this repo so you keep the demo site as is, but then simplify the template itself.

๐Ÿค” I'd really love to use this starter as base on top of I want to migrate 2 websites and 1 simple web app. However, given my previous note it would be hard to reuse it directly and most likely will end up "simplifying it" just a bit...

๐Ÿค” Consider adding Eslint it gets along with Prettier pretty well.

Thank you for the amazing work!

Let me know if my comments do or don't make sense. Cheers!

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.38 to 2.0.39.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.38 to 2.0.39.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.33 to 2.0.34.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

totally newbie question

thx a lot for putting together a nice template, planning to use it for a simple web app that i'm doing as side project. although i use react on a daily basis, i've used graphql on toy projects only and i'm a newbie on gatsby. So please forgive me if what i'm asking looks like a dumb question :)

just tried to create a new page called test, created test.js in pages folder:

import React from 'react';
import PropTypes from 'prop-types';
import { graphql } from 'gatsby';
import Layout from 'components/layout';
import Box from 'components/box';
import Head from 'components/head';

const Test = ({ data }) => (
  <Layout>
    <Head pageTitle={data.testJson.title} />
    <Box>
      <div
        dangerouslySetInnerHTML={{
          __html: data.testJson.content.childMarkdownRemark.html,
        }}
      />
    </Box>
  </Layout>
);

Test.propTypes = {
  data: PropTypes.object.isRequired,
};

export default Test;

export const query = graphql`
  query TestQuery {
    testJson {
      title
      content {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`;

Just copy of about page, renamed all about things to test.

created test folder with test.json and content.md under /content folder, just copy of about (markdown file is just a line of text though).

I got the following error when I save the project:

Unknown field 'testJson' on type 'Query'. Source: document `TestQuery` file: `GraphQL request`

Obviously it's related with this part it looks:

export const query = graphql`
  query TestQuery {
    testJson {
      title
      content {
        childMarkdownRemark {
          html
        }
      }
    }
  }
`;

As I remember from the gatsby tutorial in gatsby's website, the queries are created using gatsby-node.js file, but it looks it's just a boilerplate in this template. Just trying to understand where aboutJson query is defined, so I can define testJson accordingly but no joy so far. Can you please explain, how can I add a new page using this template?

Cheers,

Build Script Fails on Zeit Now

Description

For some reason I can develop/build locally but not if I try to deploy a gatsby-universal project using zeit now.

Logs

2020-01-23T17:53:01.390Z  [Favicons] Image:create: Creating empty 2688x1242 canvas with #fff background...
2020-01-23T17:53:01.417Z  [Favicons] Image:render: Find nearest icon to 2688x1242 with offset 0...
2020-01-23T17:53:01.417Z  [Favicons] Images:render: Resizing PNG to 2688x1242...
2020-01-23T17:53:01.436Z  [Favicons] Image:create: Creating empty 2048x1536 canvas with #fff background...
2020-01-23T17:53:01.459Z  [Favicons] Image:render: Find nearest icon to 2048x1536 with offset 0...
2020-01-23T17:53:01.459Z  [Favicons] Images:render: Resizing PNG to 2048x1536...
2020-01-23T17:53:01.471Z  [Favicons] Image:create: Creating empty 2224x1668 canvas with #fff background...
2020-01-23T17:53:01.499Z  [Favicons] Image:render: Find nearest icon to 2224x1668 with offset 0...
2020-01-23T17:53:01.499Z  [Favicons] Images:render: Resizing PNG to 2224x1668...
2020-01-23T17:53:01.511Z  [Favicons] Image:create: Creating empty 2388x1668 canvas with #fff background...
2020-01-23T17:53:01.541Z  [Favicons] Image:render: Find nearest icon to 2388x1668 with offset 0...
2020-01-23T17:53:01.541Z  [Favicons] Images:render: Resizing PNG to 2388x1668...
2020-01-23T17:53:01.554Z  [Favicons] Image:create: Creating empty 2732x2048 canvas with #fff background...
2020-01-23T17:53:01.598Z  [Favicons] Image:render: Find nearest icon to 2732x2048 with offset 0...
2020-01-23T17:53:01.598Z  [Favicons] Images:render: Resizing PNG to 2732x2048...
2020-01-23T17:53:01.734Z  [Favicons] Images:composite: Compositing favicon on 640x1136 canvas with offset 0...
2020-01-23T17:53:02.058Z  [Favicons] Images:composite: Compositing favicon on 750x1334 canvas with offset 0...
2020-01-23T17:53:02.505Z  [Favicons] Images:composite: Compositing favicon on 828x1792 canvas with offset 0...
2020-01-23T17:53:03.192Z  [Favicons] Images:composite: Compositing favicon on 1125x2436 canvas with offset 0...
2020-01-23T17:53:04.260Z  [Favicons] Images:composite: Compositing favicon on 1242x2208 canvas with offset 0...
2020-01-23T17:53:05.296Z  [Favicons] Images:composite: Compositing favicon on 1242x2688 canvas with offset 0...
2020-01-23T17:53:06.569Z  [Favicons] Images:composite: Compositing favicon on 1536x2048 canvas with offset 0...
2020-01-23T17:53:07.859Z  [Favicons] Images:composite: Compositing favicon on 1668x2224 canvas with offset 0...
2020-01-23T17:53:09.328Z  [Favicons] Images:composite: Compositing favicon on 1668x2388 canvas with offset 0...
2020-01-23T17:53:11.057Z  [Favicons] Images:composite: Compositing favicon on 2048x2732 canvas with offset 0...
2020-01-23T17:53:12.619Z  [Favicons] Images:composite: Compositing favicon on 1136x640 canvas with offset 0...
2020-01-23T17:53:13.244Z  [Favicons] Images:composite: Compositing favicon on 2160x1620 canvas with offset 0...
2020-01-23T17:53:14.602Z  [Favicons] Images:composite: Compositing favicon on 1620x2160 canvas with offset 0...
2020-01-23T17:53:15.701Z  [Favicons] Images:composite: Compositing favicon on 1334x750 canvas with offset 0...
2020-01-23T17:53:16.131Z  [Favicons] Images:composite: Compositing favicon on 1792x828 canvas with offset 0...
2020-01-23T17:53:16.809Z  [Favicons] Images:composite: Compositing favicon on 2436x1125 canvas with offset 0...
2020-01-23T17:53:17.805Z  [Favicons] Images:composite: Compositing favicon on 2208x1242 canvas with offset 0...
2020-01-23T17:53:18.906Z  [Favicons] Images:composite: Compositing favicon on 2688x1242 canvas with offset 0...
2020-01-23T17:53:20.176Z  [Favicons] Images:composite: Compositing favicon on 2048x1536 canvas with offset 0...
2020-01-23T17:53:21.461Z  [Favicons] Images:composite: Compositing favicon on 2224x1668 canvas with offset 0...
2020-01-23T17:53:22.896Z  [Favicons] Images:composite: Compositing favicon on 2388x1668 canvas with offset 0...
2020-01-23T17:53:24.652Z  [Favicons] Images:composite: Compositing favicon on 2732x2048 canvas with offset 0...
2020-01-23T17:53:26.121Z  [Favicons] Image:create: Creating empty 70x70 canvas with transparent background...
2020-01-23T17:53:26.122Z  [Favicons] Image:render: Find nearest icon to 70x70 with offset 0...
2020-01-23T17:53:26.122Z  [Favicons] Images:render: Resizing PNG to 70x70...
2020-01-23T17:53:26.137Z  [Favicons] Image:create: Creating empty 144x144 canvas with transparent background...
2020-01-23T17:53:26.137Z  [Favicons] Image:render: Find nearest icon to 144x144 with offset 0...
2020-01-23T17:53:26.137Z  [Favicons] Images:render: Resizing PNG to 144x144...
2020-01-23T17:53:26.150Z  [Favicons] Image:create: Creating empty 150x150 canvas with transparent background...
2020-01-23T17:53:26.150Z  [Favicons] Image:render: Find nearest icon to 150x150 with offset 0...
2020-01-23T17:53:26.150Z  [Favicons] Images:render: Resizing PNG to 150x150...
2020-01-23T17:53:26.162Z  [Favicons] Image:create: Creating empty 310x150 canvas with transparent background...
2020-01-23T17:53:26.163Z  [Favicons] Image:render: Find nearest icon to 310x150 with offset 0...
2020-01-23T17:53:26.163Z  [Favicons] Images:render: Resizing PNG to 310x150...
2020-01-23T17:53:26.175Z  [Favicons] Image:create: Creating empty 310x310 canvas with transparent background...
2020-01-23T17:53:26.175Z  [Favicons] Image:render: Find nearest icon to 310x310 with offset 0...
2020-01-23T17:53:26.176Z  [Favicons] Images:render: Resizing PNG to 310x310...
2020-01-23T17:53:26.188Z  [Favicons] Files:create: Creating file: browserconfig.xml...
2020-01-23T17:53:26.215Z  [Favicons] Images:composite: Compositing favicon on 70x70 canvas with offset 0...
2020-01-23T17:53:26.245Z  [Favicons] Images:composite: Compositing favicon on 144x144 canvas with offset 0...
2020-01-23T17:53:26.272Z  [Favicons] Images:composite: Compositing favicon on 150x150 canvas with offset 0...
2020-01-23T17:53:26.306Z  [Favicons] Images:composite: Compositing favicon on 310x150 canvas with offset 0...
2020-01-23T17:53:26.359Z  [Favicons] Images:composite: Compositing favicon on 310x310 canvas with offset 0...
2020-01-23T17:53:26.469Z  internal/modules/cjs/loader.js:800
2020-01-23T17:53:26.469Z      throw err;
2020-01-23T17:53:26.469Z      ^
2020-01-23T17:53:26.469Z  
2020-01-23T17:53:26.469Z  Error: Cannot find module 'core-js/modules/es7.array.flat-map'
2020-01-23T17:53:26.469Z  Require stack:
2020-01-23T17:53:26.469Z  - /zeit/228ed835/node_modules/gatsby/node_modules/gatsby-cli/lib/index.js
2020-01-23T17:53:26.469Z  - /zeit/228ed835/node_modules/gatsby/dist/bin/gatsby.js
2020-01-23T17:53:26.469Z      at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
2020-01-23T17:53:26.469Z      at Function.Module._load (internal/modules/cjs/loader.js:690:27)
2020-01-23T17:53:26.469Z      at Module.require (internal/modules/cjs/loader.js:852:19)
2020-01-23T17:53:26.469Z      at require (internal/modules/cjs/helpers.js:74:18)
2020-01-23T17:53:26.469Z      at Object.<anonymous> (/zeit/228ed835/node_modules/gatsby/node_modules/gatsby-cli/lib/index.js:6:1)
2020-01-23T17:53:26.469Z      at Module._compile (internal/modules/cjs/loader.js:959:30)
2020-01-23T17:53:26.469Z      at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
2020-01-23T17:53:26.470Z      at Module.load (internal/modules/cjs/loader.js:815:32)
2020-01-23T17:53:26.470Z      at Function.Module._load (internal/modules/cjs/loader.js:727:14)
2020-01-23T17:53:26.470Z      at Module.require (internal/modules/cjs/loader.js:852:19) {
2020-01-23T17:53:26.470Z    code: 'MODULE_NOT_FOUND',
2020-01-23T17:53:26.470Z    requireStack: [
2020-01-23T17:53:26.470Z      '/zeit/228ed835/node_modules/gatsby/node_modules/gatsby-cli/lib/index.js',
2020-01-23T17:53:26.470Z      '/zeit/228ed835/node_modules/gatsby/dist/bin/gatsby.js'
2020-01-23T17:53:26.470Z    ]
2020-01-23T17:53:26.470Z  }
2020-01-23T17:53:26.472Z  npm ERR! code ELIFECYCLE
2020-01-23T17:53:26.472Z  npm ERR! errno 1
2020-01-23T17:53:26.473Z  npm ERR! gatsby-universal@ build: `npm run build:dir && npm run build:favicons && gatsby build`
2020-01-23T17:53:26.473Z  npm ERR! Exit status 1
2020-01-23T17:53:26.473Z  npm ERR! 
2020-01-23T17:53:26.473Z  npm ERR! Failed at the gatsby-universal@ build script.
2020-01-23T17:53:26.473Z  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-01-23T17:53:26.478Z  
2020-01-23T17:53:26.478Z  npm ERR! A complete log of this run can be found in:
2020-01-23T17:53:26.478Z  npm ERR!     /zeit/.npm/_logs/2020-01-23T17_53_26_473Z-debug.log
2020-01-23T17:53:26.484Z  Error: Exited with 1
2020-01-23T17:53:26.485Z      at ChildProcess.child.on (/zeit/7783010c87aa68f0/.build-utils/.builder/node_modules/@now/static-build/dist/index.js:31880:24)
2020-01-23T17:53:26.485Z      at emitTwo (events.js:126:13)
2020-01-23T17:53:26.485Z      at ChildProcess.emit (events.js:214:7)
2020-01-23T17:53:26.485Z      at maybeClose (internal/child_process.js:925:16)
2020-01-23T17:53:26.485Z      at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
2020-01-23T17:53:26.596Z  worker exited with code 20 and signal null
2020-01-23T17:53:28.999Z  done

Thoughts

I think the important line is Cannot find module 'core-js/modules/es7.array.flat-map'

Is this a babel issue?

Cannot use a page template for multiple Markdown files

When I try to create a page template for multiple Markdown files as described in Gatsby's docs, the page template raises the following warning:

The GraphQL query in the non-page component "C:/Users/qaqow/Documents/Portfolio/src/templates/post-template.js"
Exported queries are only executed for Page components. It's possible you're
trying to create pages in your gatsby-node.js and that's failing for some
reason.

If the failing component(s) is a regular component and not intended to be a page
component, you generally want to use a <StaticQuery> (https://gatsbyjs.org/docs/static-query)
instead of exporting a page query.

If you're more experienced with GraphQL, you can also export GraphQL
fragments from components and compose the fragments in the Page component
query and pass data down into the child component โ€” https://graphql.org/learn/queries/#fragments

Even though I can successfully query data using GraphQL code:

{
  allMarkdownRemark {
    nodes{
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
}

, I want to follow another starter by alxshelepenok to create pages file-by-file. However, no markdown page is returned and shown on the site map.

export const pageQuery = graphql`
  query PostBySlug($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
`

I am new to React/Gatsby and have fairly limited experience in web development and JS. Is there anybody can help me with this? The repo of my site is here. Thanks.

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.28 to 2.0.29.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

Commits

The new version differs by 8 commits.

  • ba46e99 chore(release): Publish
  • 8494a1b Move to @gatsbyjs scoped version of yarn (#11759)
  • 67c0131 fix(blog): 2019-01-01 json code blocks (#11750)
  • d1ae7ab fix(starters): update dependency gatsby to ^2.1.0 (#11745)
  • 03fae48 fix(starters): update dependency prop-types to ^15.7.2 (#11748)
  • 5e7899c feat(showcase): add Incremental.com.au (#11729)
  • 8f7f8cd feat(starters): add starter magicsoup.io (#11670)
  • bb147bd docs(gatsby): Add documentation for useStaticQuery (#11741)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

Action required: Greenkeeper could not be activated ๐Ÿšจ

๐Ÿšจ You need to enable Continuous Integration on Greenkeeper branches of this repository. ๐Ÿšจ

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didnโ€™t receive a CI status on the greenkeeper/initial branch, itโ€™s possible that you donโ€™t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how itโ€™s configured. Make sure it is set to run on all new branches. If you donโ€™t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, youโ€™ll need to re-trigger Greenkeeperโ€™s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Add config for directory-named-webpack-plugin to ignore node_modules

I've been struggling with an issue with the shifty library, which with the help of shifty's owner I've hunted down to the default config of directory-named-webpack-plugin affecting modules within node_modules, which I think it's safe to assume should handle their own resolution regarding what files to consider their primary entry points.

Adding exclude: /node_modules/ to the config fixes the issue I was having with shifty, and seems to me to be a pretty sensible default, so I've made a pull request with the change.

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.32 to 2.0.33.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

Cannot find module 'core-js/modules/es6.array.filter'

I get an error on a clean installation.

Error: Cannot find module 'core-js/modules/es6.array.filter'

I'm using Gatsby 2.0.0-rc.1

Adding core-js as a dependency resolves the issue (npm add core-js --save), but I'm not sure this is the correct solution to the problem.

PS: Thanks for the great starter.

Markdown not displaying as expected

Styles in 'src/global.css.js' are overriding markdown formatting. Markdown lists and headers etc are displaying as plain text. Is there a way to ignore the global style for all markdown content?

ps. great template by the way

Update to react 16.8?

Hi there,

Thanks for your great starter.

Do you have any plans to update react to 16.8? I'm keen to experiment using material-ui v4 with your starter but it requires 16.8. I tried updating packages myself but they broke everything.

Can we access context values inside componentDidMount?

Hey im trying to pass my context to all my pages.

I saw that is possible to have it in render like:
return ( <Consumer> {props => <h1> WOW </h1>} </Consumer> )

But im not really sure how to get it inside the componentDidMount or any other methods. I tried to look for it inside this.context or this.props.context but no luck..

Any ideas ?
Thank you

Error on NPM/Yarn Install

โžœ npm --version
7.3.0
โžœ  node --version
v15.5.1
โžœ  gatsby --version
Gatsby CLI version: 2.17.0
$ gatsby new my-project [email protected]:fabe/gatsby-universal.git
info Creating new site from git: https://github.com/fabe/gatsby-universal.git

Cloning into 'UnpopularCool'...
remote: Enumerating objects: 91, done.
remote: Counting objects: 100% (91/91), done.
remote: Compressing objects: 100% (80/80), done.
remote: Total 91 (delta 0), reused 50 (delta 0), pack-reused 0
success Created starter directory layout
info Installing packages...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR!   dev eslint@"^5.12.1" from the root project
npm ERR!   peer eslint@">= 4.12.1" from [email protected]
npm ERR!   node_modules/babel-eslint
npm ERR!     dev babel-eslint@"^10.0.1" from the root project
npm ERR!     babel-eslint@"^10.1.0" from [email protected]
npm ERR!     node_modules/gatsby
npm ERR!       gatsby@"^2.3.26" from the root project
npm ERR!   6 more (eslint-config-prettier, eslint-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev gatsby-plugin-eslint@"^2.0.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint
npm ERR!   peer eslint@"^6.6.0" from [email protected]
npm ERR!   node_modules/gatsby-plugin-eslint
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/<redacted>/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

 ERROR

Command failed with exit code 1: npm install



  Error: Command failed with exit code 1: npm install

  - error.js:56 makeError
    [lib]/[gatsby-cli]/[execa]/lib/error.js:56:11

  - index.js:114 handlePromise
    [lib]/[gatsby-cli]/[execa]/index.js:114:26

  - task_queues:93 processTicksAndRejections
    node:internal/process/task_queues:93:5

  - init-starter.js:135 install
    [lib]/[gatsby-cli]/lib/init-starter.js:135:7

  - init-starter.js:202 clone
    [lib]/[gatsby-cli]/lib/init-starter.js:202:3

  - init-starter.js:343 initStarter
    [lib]/[gatsby-cli]/lib/init-starter.js:343:5

  - create-cli.js:485
    [lib]/[gatsby-cli]/lib/create-cli.js:485:9

When cloning from github and then running npm i

npm ERR! code 1
npm ERR! path /Users/<redacted>/source/UnpopularCool/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
npm ERR! TOUCH Release/obj.target/libvips-cpp.stamp
npm ERR!   CXX(target) Release/obj.target/sharp/src/common.o
npm ERR!   CXX(target) Release/obj.target/sharp/src/metadata.o
npm ERR!   CXX(target) Release/obj.target/sharp/src/stats.o
npm ERR! info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.7.4/libvips-8.7.4-darwin-x64.tar.gz
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | x64
npm ERR! gyp info spawn /usr/bin/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/<redacted>/source/UnpopularCool/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/<redacted>/source/UnpopularCool/node_modules/sharp/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/<redacted>/source/UnpopularCool/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/<redacted>/.node-gyp/15.5.1/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/<redacted>/.node-gyp/15.5.1',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/<redacted>/source/UnpopularCool/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/<redacted>/.node-gyp/15.5.1/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/<redacted>/source/UnpopularCool/node_modules/sharp',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn make
npm ERR! gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
npm ERR! ../src/stats.cc:130:19: error: no matching member function for call to 'Set'
npm ERR!         channels->Set(i, channelStat);
npm ERR!         ~~~~~~~~~~^~~
npm ERR! /Users/<redacted>/.node-gyp/15.5.1/include/node/v8.h:3716:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
npm ERR!   V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context,
npm ERR!                                     ^
npm ERR! /Users/<redacted>/.node-gyp/15.5.1/include/node/v8.h:3719:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
npm ERR!   V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context, uint32_t index,
npm ERR!                                     ^
npm ERR! 1 error generated.
npm ERR! make: *** [Release/obj.target/sharp/src/stats.o] Error 1
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/<redacted>/source/UnpopularCool/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:376:20)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:284:12)
npm ERR! gyp ERR! System Darwin 19.6.0
npm ERR! gyp ERR! command "/usr/local/Cellar/node/15.5.1/bin/node" "/Users/<redacted>/source/UnpopularCool/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/<redacted>/source/UnpopularCool/node_modules/sharp
npm ERR! gyp ERR! node -v v15.5.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/<redacted>/.npm/_logs/2021-01-22T23_32_16_580Z-debug.log

I get similar errors with yarn install but they're way more verbose

manifest.json unavailable

Somehow after the netlify deployment the manifest.json is broken and can't be fetched by the client browser.

site-config.js

`
const path = require('path');

module.exports = {
siteTitle: Eiskarussell - Alles dreht sich ums Eis.,
siteTitleShort: Eiskarussell,
siteDescription: Alles dreht sich ums Eis.,
siteUrl: https://www.eiskarussell.at,
themeColor: #FFEB93,
backgroundColor: #FAFAFA,
pathPrefix: null,
logo: path.resolve(__dirname, 'src/images/icon.png'),
social: {
twitter: nichtkunst,
fbAppId: ``,
},
};`

<dialog> not supported in Safari

Using the polyfill:

// <dialog> polyfill
if (typeof window !== `undefined` && typeof HTMLDialogElement !== 'function') {
  require('dialog-polyfill');
}

does not seem to work properly.

Runtime error

The install appeared to go OK but when running Gatsby develop

Error: Cannot find module 'core-js/modules/es6.array.filter'

Any ideas?

Icons not found

With a new project,

 gatsby new my-site https://github.com/fabe/gatsby-universal

I do gatsby build and gatsby serve

the html that is generated references eg icons/apple-touch-icon-57x57.png etc... but those files don't seem to exist. I can't find a subfolder icons in public at all. What am I doing wrong?

[V2] Modal not opening in Firefox

I just wanted to let you know that the when you open the modal in Firefox devtools it throws an error and the page turns white.

The error in the console shows up as
this.modal.showModal is not a function

This repo has been a lifesaver. Thank you!

Interaction observer does not work correctly when added to multiple pages

The interaction observer component stops working if it exists in two different pages and you navigate directly from one to the other.

i created a test in codesandbox that adds the IO-Example component to the about page, there you can see that if you refresh any of the pages it works but if you navigate from one to the other the interaction is not registered.

https://codesandbox.io/s/gatsby-universal-smyvs

Edit: I ended up using the useInView hook from https://github.com/thebuilder/react-intersection-observer and it works great.

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.38 to 2.0.39.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.30 to 2.0.31.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

Commits

The new version differs by 19 commits.

  • 9381fd0 chore(release): Publish
  • 617df24 fix(gatsby-plugin-netlify-cms): Add listener for /admin (#12474)
  • fceb4e7 fix(gatsby): correct bootstrap emit order (#12473)
  • 331638a fix(gatsby) improve missing page component error message (#12472)
  • 0f136d5 fix(gatsby): Emit BOOTSTRAP_FINISHED when bootstrap finishes (#12461)
  • 7ba331c Typo (#12459)
  • 6866e76 feat(gatsby-remark-images-contentful): enable webp sources (#11273)
  • 229bf43 docs(www): Add quotes to Gryffindor string literal (#12450)
  • d47b0e2 Make headline bigger
  • a381c62 Update README.md with changes made to gatsbyjs.org
  • 0173f6b document reserved words in React context (#12424)
  • 91819a8 chore(blog): add blogpost about gatsbyjs.org redesign (#12337)
  • a141763 chore(www): Remove non-Gatsby site from the showcase (#12425)
  • b645b25 docs: add new doc on why Gatsby uses GraphQL (#11787)
  • 6e57064 chore(starters): add gatsby-starter-infinite-scroll (#12349)

There are 19 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

Using "next" NPM packages would allow using latest Gatsby releases

In package.json, using something like:

...
    "gatsby": "next",
    "gatsby-image": "next",
    "gatsby-plugin-offline": "next",
    "gatsby-plugin-react-helmet": "next",
    "gatsby-plugin-sharp": "next",
    "gatsby-plugin-sitemap": "next",
...

would allow using latest Gatsby v2 releases.

If you want, I can PR it easily.

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

An in-range update of gatsby is breaking the build ๐Ÿšจ

There have been updates to the gatsby monorepo:

    • The dependency gatsby-image was updated from 2.0.30 to 2.0.31.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the gatsby group definition.

gatsby is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.