ERROR #98123 WEBPACK — trying to use .map to render multiple images with Gatsby-image

[oliverholms]

#8413 Description

I am trying to use {data.allFile.edges.map(({ node }) to render multiple (local) images to a page, but I can't run gatsby develop successfully.

Steps to reproduce

My code is as follows:

import React from "react"
import WideGalleryLayout from "../components/wide-gallery-layout"
import Img from "gatsby-image"
import { useStaticQuery, graphql } from "gatsby"
import { css } from "@emotion/core"

export default () => {
  const data = useStaticQuery(graphql`
    query imageQuery {
      allFile(
        filter: {
          extension: { regex: "/(jpg)/" }
          relativeDirectory: { eq: "images/japan" }
        }
      ) {
        edges {
          node {
            base
            childImageSharp {
              fluid {
                aspectRatio
                base64
                src
                srcSet
                sizes
              }
            }
          }
        }
      }
    }
  `)

  return (
    <WideGalleryLayout>
      {data.allFile.edges.map(({ node })
      => (
        <Img fluid=
        {node.childImageSharp.fluid}
        />
      ))}
    </WideGalleryLayout>
  )
}

When I run gatsby develop I get the below error message:

success open and validate gatsby-configs - 0.036s
success load plugins - 1.219s
success onPreInit - 0.003s
success initialize cache - 0.005s
success copy gatsby files - 0.055s
success onPreBootstrap - 0.015s
success createSchemaCustomization - 0.008s
success source and transform nodes - 0.369s
success building schema - 0.241s
success createPages - 0.037s
success createPagesStatefully - 0.075s
success updating schema - 0.022s
success onPreExtractQueries - 0.002s

 ERROR #85911  GRAPHQL

There was a problem parsing "/Users/oliverholms/Dropbox/omh-blog/src/components/japan-component.js"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

File: src/components/japan-component.js


 ERROR #85911  GRAPHQL

There was a problem parsing "/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-1.js"; any GraphQL
fragments or queries in this file were not processed.

This may indicate a syntax error in the code, or it may be a file type
that Gatsby does not know how to parse.

File: src/pages/folio-1.js

failed extract queries from components - 0.314s
success write out redirect data - 0.010s
success onPostBootstrap - 0.002s
info bootstrap finished - 5.465s
success run page queries - 0.021s - 4/4 189.04/s
success write out requires - 0.004s
warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/components/layout.js
  3:26  warning  'Link' is defined but never used           no-unused-vars
  8:9   warning  'data' is assigned a value but never used  no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-2.js
  3:10  warning  'Image' is defined but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)

warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-3.js
  3:10  warning  'Image' is defined but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-1.js
  39:7  error  Parsing error: Unexpected token, expected ","

  37 |     <WideGalleryLayout>
  38 |       {data.allFile.edges.map(({ node })
> 39 |       => (
     |       ^
  40 |         <Img fluid=
  41 |         {node.childImageSharp.fluid}
  42 |         />

✖ 1 problem (1 error, 0 warnings)


File: src/pages/folio-1.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-1.js: Unexpected token, expected "," (39:6)

  37 |     <WideGalleryLayout>
  38 |       {data.allFile.edges.map(({ node })
> 39 |       => (
     |       ^
  40 |         <Img fluid=
  41 |         {node.childImageSharp.fluid}
  42 |         />

File: src/pages/folio-1.js:39:6

failed Building development bundle - 3.355s
warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/components/layout.js
  3:26  warning  'Link' is defined but never used           no-unused-vars
  8:9   warning  'data' is assigned a value but never used  no-unused-vars

✖ 2 problems (0 errors, 2 warnings)

warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-2.js
  3:10  warning  'Image' is defined but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)

warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-3.js
  3:10  warning  'Image' is defined but never used  no-unused-vars

✖ 1 problem (0 errors, 1 warning)


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-1.js
  39:7  error  Parsing error: Unexpected token, expected ","

  37 |     <WideGalleryLayout>
  38 |       {data.allFile.edges.map(({ node })
> 39 |       => (
     |       ^
  40 |         <Img fluid=
  41 |         {node.childImageSharp.fluid}
  42 |         />

✖ 1 problem (1 error, 0 warnings)


File: src/pages/folio-1.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-1.js: Unexpected token, expected "," (39:6)

  37 |     <WideGalleryLayout>
  38 |       {data.allFile.edges.map(({ node })
> 39 |       => (
     |       ^
  40 |         <Img fluid=
  41 |         {node.childImageSharp.fluid}
  42 |         />

File: src/pages/folio-1.js:39:6

failed Re-building development bundle - 0.083s
 ERROR #98123  WEBPACK

I was following the steps in this eggheads video Add multiple images from a directory with gatsby-image. I am 99% sure that I copied his code correctly — with the correct directory for my files, but the CLI can't develop successfully.

Expected result

I should be able to render multiple images from a directory with gatsby-image. I have checked at http://localhost:8000/___graphql and my graphQL query returns my images with the other data I requested.

Actual result

I can't gatsby develop successfully or render my images. The terminal error message points to the arrow function as the problem element ('expected comma' etc.)

I am new to this so please factor that into the technical language in your answers.

Environment

System:
OS: macOS 10.15.5
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.1 - /usr/local/bin/node
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 84.0.4147.125
Safari: 13.1.1
npmPackages:
gatsby: ^2.23.12 => 2.23.12
gatsby-image: ^2.4.16 => 2.4.16
gatsby-plugin-emotion: ^4.3.10 => 4.3.10
gatsby-plugin-sharp: ^2.6.27 => 2.6.27
gatsby-plugin-typography: ^2.5.10 => 2.5.10
gatsby-source-filesystem: ^2.3.23 => 2.3.23
gatsby-transformer-json: ^2.4.11 => 2.4.11
gatsby-transformer-remark: ^2.8.27 => 2.8.27
gatsby-transformer-sharp: ^2.5.13 => 2.5.13
npmGlobalPackages:
gatsby-cli: 2.12.87

[wardpeet]

Hey,

It seems like a syntax error {data.allFile.edges.map(({ node }) > ( to {data.allFile.edges.map(({ node }) => (. The = was missing.

 return (
    <WideGalleryLayout>
      {data.allFile.edges.map(({ node }) => (
        <Img fluid=
        {node.childImageSharp.fluid}
        />
      ))}
    </WideGalleryLayout>
  )
}

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜

[oliverholms]

Thank you so much @wardpeet ! That works for me now (although the images are really low quality/compressed). I'll have to try to work out this latter problem tomorrow.

I'm still a little confused as I could see the '=' sign in the code above and in VS Code. I pasted over the top and it worked so maybe I was blind to it...

Thank you again!