Warn when creating multiple pages with the same path

[pgegenfurtner]

Edit: see feature description at #5836 (comment)

Description

I have two page templates which get filled with markdown content. On one of the templates I get an error during gatsby build that props.data is undefined. In develop it just works.

This is the query in the page template:

export const query = graphql`
    query LegalQuery($slug: String!) {
        markdownRemark(frontmatter: {slug: {eq: $slug}}) {
            id
            frontmatter {
              title
              slug
              headerImage
            }
            html
        }
    }
`;

Console error:

  30 |
  31 | function LegalPage(props) {
> 32 |   const html = props.data.markdownRemark.html;
     |                           ^
  33 |   const meta = props.data.markdownRemark.frontmatter;
  34 |
  35 |   return (


  WebpackError: Cannot read property 'markdownRemark' of undefined

Environment

System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.9.4/bin/npm
Browsers:
Chrome: 67.0.3396.79
Firefox: 59.0.2
Safari: 11.1.1
npmPackages:
gatsby: ^1.9.270 => 1.9.270
gatsby-image: ^1.0.52 => 1.0.52
gatsby-link: ^1.6.44 => 1.6.44
gatsby-plugin-google-analytics: ^1.0.31 => 1.0.31
gatsby-plugin-netlify: ^1.0.21 => 1.0.21
gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
gatsby-plugin-styled-components: ^2.0.11 => 2.0.11
gatsby-plugin-typography: ^1.7.18 => 1.7.18
gatsby-source-filesystem: ^1.5.38 => 1.5.38
gatsby-transformer-excel: ^1.0.8 => 1.0.8
gatsby-transformer-json: ^1.0.19 => 1.0.19
gatsby-transformer-remark: ^1.7.42 => 1.7.42
npmGlobalPackages:
gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js:

module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'config',
        path: `${__dirname}/config/`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'pages',
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'data',
        path: `${__dirname}/data/`,
      },
    },
    'gatsby-transformer-remark',
    'gatsby-transformer-json',
    {
      resolve: `gatsby-transformer-excel`,
      options: {
        rawOutput: false,
      }
    },
    {
      resolve: 'gatsby-plugin-typography',
      options: {
        pathToConfigModule: 'src/utils/typography.js'
      }
    },
    'gatsby-plugin-netlify'
  ],
};

gatsby-node.js:

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allMarkdownRemark {
          edges {
            node {
              id
              frontmatter {
                slug
                type
              }
            }
          }
        }
      }
    `).then(result => {
      if (result.errors) {
        reject(new Error(result.errors));
      }
      result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
          path: node.frontmatter.slug,
          component: path.resolve(`./src/templates/${node.frontmatter.type}/index.js`),
          context: {
            slug: node.frontmatter.slug,
            type: node.frontmatter.type,
          },
        });
      });
      resolve()
    })
  })
};

[pgegenfurtner]

I found a weird behavior of the graphql queries..
When I run

export const query = graphql`
    query LegalQuery($slug: String!) {
        legal: markdownRemark(frontmatter: {slug: {eq: $slug}}) {
            frontmatter {
              title
              slug
              headerImage
            }
            html
        }
    }
`;

I can access the data via props.data.legal.html. After a restart of the develop process, I get an error, that data is undefined. Then I can change the query to (removed the "legal" naming):

export const query = graphql`
    query LegalQuery($slug: String!) {
        markdownRemark(frontmatter: {slug: {eq: $slug}}) {
            frontmatter {
              title
              slug
              headerImage
            }
            html
        }
    }
`;

and can access the data via props.data.markdownRemark.html

I don't understand why it works sometimes and why not..

[m-allanson]

That does sound unusual... Are you able to create a small repo that demonstrates this error?

[pgegenfurtner]

Yeah, I'm trying. My sample repo works so far. Currently adding more and more from my project to find out when it breaks

[pgegenfurtner]

Funny story.. Unter pages I had a file called "imprint.js". I tried to generate a new page /imprint from a markdown file. This caused all the mess. As soon as I removed the .js file, the build succeeds.

Two days for this. fml

Maybe there should be a warning, if a stupid user tries to build multiple pages with the same path.

[m-allanson]

Oh no! I'm glad you found the issue at least - a warning to avoid this for people in the future sounds like a good idea.

I'm going to re-open this and mark it as "help wanted" so we can try and save people from your pain :)