Gatsby: Module parse failed: Identifier 'staticQueryData' has already been declared

Created on 26 Aug 2018  路  5Comments  路  Source: gatsbyjs/gatsby

Description

Hello, when I build my website with yarn build I have this error: Module parse failed: Identifier 'staticQueryData' has already been declared.

Expected result

Build success

Actual result

There is the full stack trace:

Error: ./src/layouts/base.js 14:7
  Module parse failed: Identifier 'staticQueryData' has already been declared (14:7)
  You may need an appropriate loader to handle this file type.
  |
  | import staticQueryData from "../../public/static/d/3616221209.json";
  > import staticQueryData from "../../public/static/d/114731346.json";
  | import styled, { injectGlobal, ThemeProvider } from "styled-components";
  | import { StaticQuery } from "gatsby";
   @ ./src/templates/post.js 2:0-41 16:29-39
   @ ./.cache/async-requires.js
   @ ./.cache/production-app.js

My Layout component:

import styled, {ThemeProvider} from "styled-components"
import {StaticQuery, graphql} from "gatsby"
import Helmet from "react-helmet"
import React from "react"

const Layout = ({
  children,
}) => (
  <StaticQuery
    query={graphql`
      query BaseLayoutQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={({site: {siteMetadata}}) => {
      return (
        <React.Fragment>
          <Helmet>
            <html lang="fr" />
            ...
          </Helmet>
          <ThemeProvider theme={theme}>
            <React.Fragment>
              {children}
            </React.Fragment>
          </ThemeProvider>
        </React.Fragment>
      )
    }}
  />
)

export default Layout

Environment

System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.4 - /usr/local/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Firefox: 61.0.2

    Safari: 11.1.2
  npmPackages:
    gatsby: next => 2.0.0-rc.0
    gatsby-image: next => 2.0.0-rc.0
    gatsby-plugin-catch-links: next => 2.0.2-rc.0
    gatsby-plugin-eslint: ^2.0.1 => 2.0.1
    gatsby-plugin-feed: next => 2.0.0-rc.0
    gatsby-plugin-google-analytics: next => 2.0.0-rc.0
    gatsby-plugin-google-fonts: ^0.0.4 => 0.0.4
    gatsby-plugin-netlify: next => 2.0.0-rc.0
    gatsby-plugin-netlify-cache: ^0.1.0 => 0.1.0
    gatsby-plugin-netlify-cms: next => 3.0.0-rc.0
    gatsby-plugin-nprogress: next => 2.0.0-rc.0
    gatsby-plugin-offline: next => 2.0.0-rc.0
    gatsby-plugin-react-helmet: next => 3.0.0-rc.0
    gatsby-plugin-remove-trailing-slashes: next => 2.0.0-rc.0
    gatsby-plugin-sharp: next => 2.0.0-rc.0
    gatsby-plugin-sitemap: next => 2.0.0-rc.0
    gatsby-plugin-slug: ^1.0.1 => 1.0.1
    gatsby-plugin-styled-components: next => 3.0.0-rc.0
    gatsby-plugin-svgr: ^2.0.0-alpha => 2.0.0-alpha
    gatsby-remark-attr: ^0.0.1 => 0.0.1
    gatsby-remark-autolink-headers: next => 2.0.0-rc.0
    gatsby-remark-copy-linked-files: next => 2.0.0-rc.0
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-images-grid: ^1.0.2 => 1.0.2
    gatsby-remark-normalize-paths: ^1.0.0 => 1.0.0
    gatsby-remark-picture: ^1.0.1 => 1.0.1
    gatsby-remark-responsive-iframe: next => 2.0.0-rc.0
    gatsby-remark-source-name: ^1.0.0 => 1.0.0
    gatsby-remark-unwrap-images: ^1.0.1 => 1.0.1
    gatsby-source-filesystem: next => 2.0.1-rc.0
    gatsby-transformer-remark: next => 2.1.1-rc.0
    gatsby-transformer-sharp: next => 2.1.1-rc.0
  npmGlobalPackages:
    gatsby-cli: 1.1.58
confirmed bug
Source
picture cedricdelpoux

Most helpful comment

Hi,

I had this problem by using two <StaticQuery /> in the same page

<StaticQuery
  query={queryImages}
  render={...}
 />
picture Steffi3rd on 28 Jan 2019
👍4

All 5 comments

could you create a simple reproduction showing this error? 馃憤

Chuloo picture Chuloo on 27 Aug 2018

@Chuloo I create this branch on my repo where you can reproduce.

git clone [email protected]:e-paire/land-seekers.git
git checkout gatsby-issue-7649
yarn 
yarn build

And you will get the error

cedricdelpoux picture cedricdelpoux on 28 Aug 2018

Thanks for reproduction @xuopled!

Some info on the bug:
babel-plugin-remove-graphql-queries will tranform this:

  import React from 'react'
  import {StaticQuery, graphql} from "gatsby"

  const Test = () => (
    <StaticQuery
      query={graphql`
      {
        site {
          siteMetadata {
            title
          }
        }
      }
      `}
      render={data => <div>{data.site.siteMetadata.title}</div>}
    />
  )

  export default Test

  export const fragment = graphql`
    fragment MarkdownNodeFragment on MarkdownRemark {
      html
    }
  `

to:

import staticQueryData from "public/static/d/3002048756.json";
import staticQueryData from "public/static/d/4279313589.json";
import React from 'react';
import { StaticQuery } from "gatsby";

const Test = () => React.createElement(StaticQuery, {
  query: "4279313589",
  render: data => React.createElement("div", null, data.site.siteMetadata.title),
  data: staticQueryData,
  data: staticQueryData
});

export default Test;
export const fragment = "3002048756";

because it doesn't check if tagged template literal is inside <StaticQuery> component before adding import and data attribute to it

pieh picture pieh on 29 Aug 2018
👍1

Thank you for investigating

cedricdelpoux picture cedricdelpoux on 29 Aug 2018

Hi,

I had this problem by using two <StaticQuery /> in the same page

<StaticQuery
  query={queryImages}
  render={...}
 />
Steffi3rd picture Steffi3rd on 28 Jan 2019
👍4
Was this page helpful?
0 / 5 - 0 ratings

Related issues

andykais picture andykais  路  3Comments
KyleAMathews picture KyleAMathews  路  3Comments
hobochild picture hobochild  路  3Comments
signalwerk picture signalwerk  路  3Comments
mikestopcontinues picture mikestopcontinues  路  3Comments