Gatsby: WebpackError: μ •μ˜λ˜μ§€ μ•Šμ€ '경둜 이름' 속성을 읽을 수 μ—†μŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2017λ…„ 09μ›” 05일  Β·  1논평  Β·  좜처: gatsbyjs/gatsby

κ°œμΈ λΉ„ 버전: 1.9.19
λ…Έλ“œ 버전: 8.3.0
λ§₯ OS 버전:
System Version: macOS 10.12.6 (16G29) Kernel Version: Darwin 16.7.0

// gatsby-config.js

const path = require(`path`);

module.exports = {
  siteMetadata: {
    title: `Keep Their Smiles`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1280,
              linkImagesToOriginal: false,
            },
          },
        ],
      },
    },
    `gatsby-plugin-glamor`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsbygram`,
        short_name: `Gatsbygram`,
        start_url: `/`,
        background_color: `#f7f7f7`,
        theme_color: `#191919`,
        display: `minimal-ui`,
      },
    },
    `gatsby-plugin-offline`,
    // {
    //  resolve: `gatsby-plugin-google-analytics`,
    //  options: {
    //      trackingId: `UA-91652198-1`,
    //  },
    // },
  ],
};

// gatsby-node.js

const { createFilePath } = require(`gatsby-source-filesystem`);
const path = require(`path`);

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

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allMarkdownRemark {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `).then(result => {
      result.data.allMarkdownRemark.edges.map(({ node }) => {
        if (node.fields.slug !== "/home/") {
          createPage({
            path: node.fields.slug,
            component: path.resolve(`./src/templates/page.js`),
            context: {
              // Data passed to context is available in page queries as GraphQL variables.
              slug: node.fields.slug,
            },
          });
        }
      });
      resolve();
    });
  });
};

// gatsby-browser.js
import { cssMediaQueries } from "./src/utils/mediaqueries.js";

let jsMediaQueries = {};

// not ideal, find some better way to do this.
exports.onRouteUpdate = function() {
  if (window) {
    // console.log(window);
    for (let breakpt in cssMediaQueries) {
      jsMediaQueries[breakpt] = window.matchMedia(
        cssMediaQueries[breakpt].match(/and(.*)/)[1],
      ).matches;
    }
  }
};

export { jsMediaQueries };

μž‘μ€ ν”„λ‘œμ νŠΈμ—μ„œ κ°œμΈ λΉ„λ₯Ό μ‚¬μš©ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€. 개발 μ„œλ²„λŠ” 문제 없이 잘 μž‘λ™ν•˜μ§€λ§Œ gatsby build μ—μ„œ λ‹€μŒ 였λ₯˜κ°€ λ°œμƒν•©λ‹ˆλ‹€.

screen shot 2017-09-05 at 6 31 19 pm

전체 μŠ€νƒ:

uccess Building CSS β€” 7.027 s
success Building production JavaScript bundles β€” 23.078 s
β   Building static HTML for pages-----------  {}  -----------
render landingpage  {}

error Building static HTML for pages failed

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

  20 |
  21 |     // NOTE: I could have used react helmet inside layout as well
> 22 |     if (this.props.location.pathname === "/") {
     |                             ^
  23 |       css.insert(`
  24 |         ${bwToColorStr}
  25 |         .gatsby-resp-image-image {


  WebpackError: Cannot read property 'pathname' of undefined

  - index.js:22 LandingPage.render
    src/pages/index.js:22:29

  - ReactCompositeComponent.js:798 ReactCompositeComponentWrapper._renderValid    atedComponentWithoutOwnerOrContext
    ~/react-dom/lib/ReactCompositeComponent.js:798:1

  - ReactCompositeComponent.js:821 ReactCompositeComponentWrapper._renderValid    atedComponent
    ~/react-dom/lib/ReactCompositeComponent.js:821:1

  - ReactCompositeComponent.js:361 ReactCompositeComponentWrapper.performIniti    alMount
    ~/react-dom/lib/ReactCompositeComponent.js:361:1

  - ReactCompositeComponent.js:257 ReactCompositeComponentWrapper.mountCompone    nt
    ~/react-dom/lib/ReactCompositeComponent.js:257:1

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

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

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

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

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

μž¬ν˜„ν•  Repo 및 Branch : https://github.com/motherteresa-welfaretrust/website/tree/bug/build-failure

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

이것은 맀우 어리석은 μ˜μ‹¬μ΄μ—ˆμŠ΅λ‹ˆλ‹€. 무슨 일이 μΌμ–΄λ‚˜κ³  μžˆλŠ”μ§€ μ œλŒ€λ‘œ μ‘°μ‚¬ν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

layouts/index.js μ—μ„œ μœ„μΉ˜ μ†Œν’ˆμ„ 전달해야 λͺ¨λ“  μžμ‹μ΄ μ•‘μ„ΈμŠ€ν•˜κ³  μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

// layouts/index.js
 {this.props.children({
      location: { pathname: this.props.location.pathname },
  })}

>λͺ¨λ“  λŒ“κΈ€

이것은 맀우 어리석은 μ˜μ‹¬μ΄μ—ˆμŠ΅λ‹ˆλ‹€. 무슨 일이 μΌμ–΄λ‚˜κ³  μžˆλŠ”μ§€ μ œλŒ€λ‘œ μ‘°μ‚¬ν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

layouts/index.js μ—μ„œ μœ„μΉ˜ μ†Œν’ˆμ„ 전달해야 λͺ¨λ“  μžμ‹μ΄ μ•‘μ„ΈμŠ€ν•˜κ³  μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

// layouts/index.js
 {this.props.children({
      location: { pathname: this.props.location.pathname },
  })}
이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰