gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.14k stars 10.33k forks source link

What is exactly diffrent between Gatsby Develop and Gatsby Build in regards to the actual building and rendering of the site? #8481

Closed lassiter closed 5 years ago

lassiter commented 5 years ago

Summary

I spun off a version of one of the gatsby starters which is a fork of the contentful gatsby starter but have ended up with a build problem. Essentially, it works as intended in gatsby develop but fails to compile html because of a null value that I have no real idea to debug since it fails to compile with debugger and the logs I put in aren't exactly helpful due to my lack of knowlege of the inner workings of Gatsby. I searched the issues for a similar question but didn't see anything. Is this a @contentful-userland (@contentful) issue with their plugin or a gatsby compile issue?

Relevant information

This is the build log with one console.log of a contentful data-point from an export.json file which I'm unsure of that particular file's purpose. It came with the starter and both have a version of it which is undocumented regarding it's purpose. The post "beach-day" was included in that export.json file but even if I delete the file, it still ends up in the build log. I'm not sure where it's caching or how to clear that part. I'm more interested in what's happening around that null just before it but am not sure how to go about debugging it specifically.

Lassiters-MacBook-Pro:portfolio lassitergregg$ gatsby build
success delete html and css files from previous builds — 0.036 s
success open and validate gatsby-config — 0.007 s
success copy gatsby files — 0.077 s
success onPreBootstrap — 0.419 s
⠁ Starting to fetch data from Contentful
Fetching default locale
⡀ source and transform nodesdefault local is : en-US
⠈ source and transform nodescontentTypes fetched 7
Updated entries  0
Deleted entries  0
Updated assets  0
Deleted assets  0
Fetch Contentful data: 416.215ms
success source and transform nodes — 0.452 s
success building schema — 0.413 s
success createLayouts — 0.025 s
success createPages — 0.044 s
success createPagesStatefully — 0.023 s
success onPreExtractQueries — 0.004 s
success update schema — 0.283 s
success extract queries from components — 0.220 s
success run graphql queries — 0.018 s
success write out page data — 0.008 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 4.805 s

success Building CSS — 5.135 s
success Building production JavaScript bundles — 12.509 s
⠐ Building static HTML for pagessegment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
null
[ { id: 'c5SWLK89IpGMgOeokmm4C0c',
    title: 'beach-day',
    description: '',
    sizes:
     { aspectRatio: 1.5238095238095237,
       src: '//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=800&h=525&q=50',
       srcSet: '//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=200&h=131&q=50 200w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=400&h=263&q=50 400w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=800&h=525&q=50 800w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=1200&h=788&q=50 1200w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=1600&h=1050&q=50 1600w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=1800&h=1181&q=50 1800w',
       srcWebp: '//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=800&h=525&q=50&fm=webp',
       srcSetWebp: '//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=200&h=131&q=50&fm=webp 200w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=400&h=263&q=50&fm=webp 400w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=800&h=525&q=50&fm=webp 800w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=1200&h=788&q=50&fm=webp 1200w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=1600&h=1050&q=50&fm=webp 1600w,\n//images.ctfassets.net/mlafe1ddeja4/5SWLK89IpGMgOeokmm4C0c/075f537c6984a8f6504fd7bbf31ff45a/beach-day.jpg?w=1800&h=1181&q=50&fm=webp 1800w',
       sizes: '(max-width: 800px) 100vw, 800px' } },
  { id: 'c4AmZcBIrXaCKkyAGAGgoMG',
    title: 'puppies',
    description: '',
    sizes:
     { aspectRatio: 1.5238095238095237,
       src: '//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=800&h=525&q=50',
       srcSet: '//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=200&h=131&q=50 200w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=400&h=263&q=50 400w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=800&h=525&q=50 800w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=1200&h=788&q=50 1200w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=1600&h=1050&q=50 1600w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=1800&h=1181&q=50 1800w',
       srcWebp: '//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=800&h=525&q=50&fm=webp',
       srcSetWebp: '//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=200&h=131&q=50&fm=webp 200w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=400&h=263&q=50&fm=webp 400w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=800&h=525&q=50&fm=webp 800w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=1200&h=788&q=50&fm=webp1200w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=1600&h=1050&q=50&fm=webp 1600w,\n//images.ctfassets.net/mlafe1ddeja4/4AmZcBIrXaCKkyAGAGgoMG/ef2f337c461b6515798089714d718596/puppies.jpg?w=1800&h=1181&q=50&fm=webp 1800w',
       sizes: '(max-width: 800px) 100vw, 800px' } } ]
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length
segment prodKey must be at least 10 char in length

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  43 |   <List>
  44 |     {console.log(props.media)}
> 45 |     {props.media.map( (m) => (
     |                  ^
  46 |
  47 |     <MediaItem
  48 |       key={m.id}

  WebpackError: Cannot read property 'map' of null

  - ProjectMedia.js:45 ProjectMedia
    src/components/ProjectMedia.js:45:18

  - ReactCompositeComponent.js:306 ReactCompositeComponentWrapper._constructComponentWithoutOwner
    ~/react-dom/lib/ReactCompositeComponent.js:306:1

  - ReactCompositeComponent.js:282 ReactCompositeComponentWrapper._constructComponent
    ~/react-dom/lib/ReactCompositeComponent.js:282:1

  - ReactCompositeComponent.js:185 ReactCompositeComponentWrapper.mountComponent
    ~/react-dom/lib/ReactCompositeComponent.js:185:1

  - ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1

  - ReactMultiChild.js:234 ReactDOMComponent.mountChildren
    ~/react-dom/lib/ReactMultiChild.js:234:1

  - ReactDOMComponent.js:657 ReactDOMComponent._createContentMarkup
    ~/react-dom/lib/ReactDOMComponent.js:657:1

  - ReactDOMComponent.js:524 ReactDOMComponent.mountComponent
    ~/react-dom/lib/ReactDOMComponent.js:524:1

  - ReactReconciler.js:43 Object.mountComponent
    ~/react-dom/lib/ReactReconciler.js:43:1

  - ReactCompositeComponent.js:368 ReactCompositeComponentWrapper.performInitialMount
    ~/react-dom/lib/ReactCompositeComponent.js:368:1

It obviously compiles with gatsby develop locally and here is a screenshot to prove it.

Environment (if relevant)


  System:
    OS: OS X El Capitan 10.11.6
    CPU: x64 Intel(R) Core(TM) i7-2675QM CPU @ 2.20GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 9.5.0 - /usr/local/bin/node
    Yarn: 1.3.2 - /usr/local/bin/yarn
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 61.0.1
    Safari: 9.1.2
  npmPackages:
    gatsby: ^1.9.272 => 1.9.273
    gatsby-image: ^1.0.54 => 1.0.54
    gatsby-link: ^1.6.44 => 1.6.45
    gatsby-plugin-canonical-urls: ^1.0.18 => 1.0.18
    gatsby-plugin-feed: ^1.3.25 => 1.3.25
    gatsby-plugin-manifest: ^1.0.27 => 1.0.27
    gatsby-plugin-netlify: ^1.0.21 => 1.0.21
    gatsby-plugin-nprogress: ^1.0.14 => 1.0.14
    gatsby-plugin-offline: ^1.0.18 => 1.0.18
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
    gatsby-plugin-segment-js: ^2.0.1 => 2.0.1
    gatsby-plugin-sitemap: ^1.2.25 => 1.2.25
    gatsby-plugin-styled-components: ^2.0.11 => 2.0.11
    gatsby-remark-images-contentful: ^1.0.2 => 1.0.2
    gatsby-remark-prismjs: ^2.0.4 => 2.0.4
    gatsby-source-contentful: ^1.3.54 => 1.3.54
    gatsby-source-filesystem: ^1.5.39 => 1.5.39
    gatsby-transformer-remark: ^1.7.44 => 1.7.44
  npmGlobalPackages:
    gatsby-cli: 1.1.58
    gatsby: 1.9.273

File contents (if changed)

I'm new to Gatsby, so I'm not sure what has changed and what hasn't: gatsby-config.js:

const config = require('./src/utils/siteConfig')
let contentfulConfig

try {
  contentfulConfig = require('./.contentful')
} catch (e) {
  contentfulConfig = {
    production: {
      spaceId: process.env.SPACE_ID,
      accessToken: process.env.ACCESS_TOKEN,
    },
  }
} finally {
  const { spaceId, accessToken } = contentfulConfig.production
  if (!spaceId || !accessToken) {
    throw new Error('Contentful space ID and access token need to be provided.')
  }
}

module.exports = {
  siteMetadata: {
    siteUrl: config.siteUrl,
    rssMetadata: {
      site_url: config.siteUrl,
      feed_url: `${config.siteUrl}/rss.xml`,
      title: config.siteTitle,
      description: config.siteDescription,
      image_url: `${config.siteUrl}${config.siteLogo}`,
      author: config.author,
      copyright: config.copyright,
    },
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-canonical-urls',
      options: {
        siteUrl: config.siteUrl,
      },
    },
    'gatsby-plugin-styled-components',
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-prismjs`,
          },
          {
            resolve: `gatsby-remark-images-contentful`,
            options: {
              maxWidth: 650,
              backgroundColor: 'white',
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
    {
      resolve: 'gatsby-source-contentful',
      options:
        process.env.NODE_ENV === 'development'
          ? contentfulConfig.development
          : contentfulConfig.production,
    },
     {
      resolve: `gatsby-plugin-segment-js`,
      options: {
          // your segment write key for your production environment
          // when process.env.NODE_ENV === 'production'
          // required; non-empty string
          prodKey: process.env.SEGMENT_PRODUCTION_WRITE_KEY,

          // if you have a development env for your segment account, paste that key here
          // when process.env.NODE_ENV === 'development'
          // optional; non-empty string
          devKey: process.env.SEGMENT_DEV_WRITE_KEY,

          // whether you want to include analytics.page()
          // optional; boolean that defaults to true
          // if false, then don't forget to manually add it to your codebase manually!
          trackPage: true
      },
    },
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: config.siteTitle,
        short_name: config.shortTitle,
        description: config.siteDescription,
        start_url: '/',
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: 'minimal-ui',
        icon: `static${config.siteLogo}`,
      },
    },
    'gatsby-plugin-offline',
    {
      resolve: 'gatsby-plugin-feed',
      options: {
        setup(ref) {
          const ret = ref.query.site.siteMetadata.rssMetadata
          ret.allMarkdownRemark = ref.query.allMarkdownRemark
          ret.generator = 'GatsbyJS GCN Starter'
          return ret
        },
        query: `
    {
      site {
        siteMetadata {
          rssMetadata {
            site_url
            feed_url
            title
            description
            image_url
            author
            copyright
          }
        }
      }
    }
  `,
        feeds: [
          {
            serialize(ctx) {
              const rssMetadata = ctx.query.site.siteMetadata.rssMetadata
              return ctx.query.allContentfulPost.edges.map(edge => ({
                date: edge.node.publishDate,
                title: edge.node.title,
                description: edge.node.body.childMarkdownRemark.excerpt,

                url: rssMetadata.site_url + '/' + edge.node.slug,
                guid: rssMetadata.site_url + '/' + edge.node.slug,
                custom_elements: [
                  {
                    'content:encoded': edge.node.body.childMarkdownRemark.html,
                  },
                ],
              }))
            },
            query: `
              {
            allContentfulPost(limit: 1000, sort: {fields: [publishDate], order: DESC}) {
               edges {
                 node {
                   title
                   slug
                   publishDate(formatString: "MMMM DD, YYYY")
                   body {
                     childMarkdownRemark {
                       html
                       excerpt(pruneLength: 80)
                     }
                   }
                 }
               }
             }
           }
      `,
            output: '/rss.xml',
          },
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-nprogress',
      options: {
        color: config.themeColor,
      },
    },
    'gatsby-plugin-netlify',
  ],
}

package.json:

{
  "name": "gatsby-starter-gcn",
  "description": "A starter template to build amazing static websites with Gatsby, Contentful and Netlify",
  "version": "1.2.2",
  "repository": "https://github.com/ryanwiemer/gatsby-starter-gcn",
  "author": "Ryan Wiemer <ryan@ryanwiemer.com>",
  "dependencies": {
    "chalk": "^2.4.1",
    "contentful-import": "^7.0.2",
    "gatsby": "^1.9.272",
    "gatsby-image": "^1.0.54",
    "gatsby-link": "^1.6.44",
    "gatsby-plugin-canonical-urls": "^1.0.18",
    "gatsby-plugin-feed": "^1.3.25",
    "gatsby-plugin-manifest": "^1.0.27",
    "gatsby-plugin-netlify": "^1.0.21",
    "gatsby-plugin-nprogress": "^1.0.14",
    "gatsby-plugin-offline": "^1.0.18",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-segment-js": "^2.0.1",
    "gatsby-plugin-sitemap": "^1.2.25",
    "gatsby-plugin-styled-components": "^2.0.11",
    "gatsby-remark-images-contentful": "^1.0.2",
    "gatsby-remark-prismjs": "^2.0.4",
    "gatsby-source-contentful": "^1.3.54",
    "gatsby-source-filesystem": "^1.5.39",
    "gatsby-transformer-remark": "^1.7.44",
    "inquirer": "^6.0.0",
    "lodash": "^4.17.10",
    "path": "^0.12.7",
    "prismjs": "^1.15.0",
    "react-helmet": "^5.2.0",
    "styled-components": "^3.3.2",
    "whatwg-fetch": "^2.0.4"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "test": "npm run lint:css && npm run lint:js && npm run check-pretty",
    "setup": "node ./bin/setup.js",
    "dev": "gatsby develop",
    "lint:js": "eslint --ext .js,.jsx .",
    "lint:css": "stylelint 'src/**/*.js'",
    "check-pretty": "prettier -l {,src/**/}*.{js,jsx,json,css,scss}",
    "format": "prettier --write \"src/**/*.js\""
  },
  "devDependencies": {
    "eslint": "^4.19.1",
    "eslint-config-gatsby-standard": "^1.2.1",
    "prettier": "^1.13.5",
    "stylelint": "9.3.0",
    "stylelint-config-prettier": "^3.2.0",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-processor-styled-components": "^1.3.1"
  }
}

gatsby-node.js:

const path = require(`path`)

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators

  const loadPosts = new Promise((resolve, reject) => {
    graphql(`
      {
        allContentfulPost {
          edges {
            node {
              slug
            }
          }
        }
      }
    `).then(result => {
      result.data.allContentfulPost.edges.map(({ node }) => {
        createPage({
          path: `${node.slug}/`,
          component: path.resolve(`./src/templates/post.js`),
          context: {
            slug: node.slug,
          },
        })
      })
      resolve()
    })
  })

  const loadProjects = new Promise((resolve, reject) => {
    graphql(`
      {
        allContentfulProject {
          edges {
            node {
              slug
            }
          }
        }
      }
    `).then(result => {
        result.data.allContentfulProject.edges.map(({ node }) => {
          createPage({
            path: `${node.slug}/`,
            component: path.resolve(`./src/templates/project.js`),
            context: {
              slug: node.slug,
            },
          })
        })
        resolve()
      })
  })

  const loadPages = new Promise((resolve, reject) => {
    graphql(`
      {
        allContentfulPage {
          edges {
            node {
              slug
            }
          }
        }
      }
    `).then(result => {
      result.data.allContentfulPage.edges.map(({ node }) => {
        createPage({
          path: `${node.slug}/`,
          component: path.resolve(`./src/templates/page.js`),
          context: {
            slug: node.slug,
          },
        })
      })
      resolve()
    })
  })

  const loadTags = new Promise((resolve, reject) => {
    graphql(`
      {
        allContentfulTag {
          edges {
            node {
              slug
            }
          }
        }
      }
    `).then(result => {
      result.data.allContentfulTag.edges.map(({ node }) => {
        createPage({
          path: `tag/${node.slug}/`,
          component: path.resolve(`./src/templates/tag.js`),
          context: {
            slug: node.slug,
          },
        })
      })
      resolve()
    })
  })

  return Promise.all([loadPosts, loadProjects, loadPages, loadTags])
}

gatsby-browser.js: I don't have this file. gatsby-ssr.js: I don't have this file.

kakadiadarpan commented 5 years ago

@lassiter I noticed 2 things in your log:

  1. Segment key error - Can you check if you are providing a segment key?

    screen shot 2018-09-24 at 12 52 19 pm
  2. WebpackError - Are you sure props.media is an array, as it says here it is null?

    WebpackError: Cannot read property 'map' of null ProjectMedia.js:45 ProjectMedia src/components/ProjectMedia.js:45:18

    screen shot 2018-09-24 at 12 52 28 pm
lassiter commented 5 years ago

I realized my issue this morning looking at my data. Essentially, my content can have that media item or not and I didn't add an alternate rendering for when there are no media items. So, that's my bad on the rendering and that's been resolved with a quick add of:

  // Alternate View, if projectMedia does not exists
  if (projectMedia == null) {
    return (
      <div>
        <Helmet>
          <title>{`${title} - ${config.siteTitle}`}</title>
        </Helmet>
        <SEO pagePath={slug} projectNode={projectNode} projectSEO />

        <Container>
          <ProjectInfo title={title} tags={tags} />
          <PageBody body={body} />
        </Container>
      </div>
    )
  }

I don't think Segment was the issue since it just logs segment prodKey must be at least 10 char in length when it's not provided. Anyways, it builds now that I added that alternate view for one of my content types that doesn't have a media item.

Is the difference between building and develop a kind of lazy rendering per say?

KyleAMathews commented 5 years ago

Yeah, develop doesn't try to render every page on your site like a build will so errors can creep into pages you're not actively looking at and not get discovered until a build happens.