Gatsby: Issue with multiple Gatsby images

Created on 24 Feb 2019  路  6Comments  路  Source: gatsbyjs/gatsby

Description

When trying to compile I get the error:

error UNHANDLED EXCEPTION

  TypeError: Cannot read property 'bitmap' of undefined

  - Potrace.js:1000 Potrace._processLoadedImage
    [Trago2Wheels]/[potrace]/lib/Potrace.js:1000:35

  - Potrace.js:1046 Jimp.<anonymous>
    [Trago2Wheels]/[potrace]/lib/Potrace.js:1046:14

  - index.js:85 Jimp.throwError
    [Trago2Wheels]/[jimp]/index.js:85:44

  - index.js:298
    [Trago2Wheels]/[jimp]/index.js:298:44

  - png.js:81 exports.PNG.<anonymous>
    [Trago2Wheels]/[pngjs]/lib/png.js:81:7

  - chunkstream.js:99 module.exports.ChunkStream._end
    [Trago2Wheels]/[pngjs]/lib/chunkstream.js:99:10

  - chunkstream.js:86 module.exports.ChunkStream.end
    [Trago2Wheels]/[pngjs]/lib/chunkstream.js:86:10

  - png.js:98 exports.PNG.PNG.end
    [Trago2Wheels]/[pngjs]/lib/png.js:98:16

  - png.js:88 exports.PNG.PNG.parse
    [Trago2Wheels]/[pngjs]/lib/png.js:88:8

  - index.js:297 Jimp.parseBitmap
    [Trago2Wheels]/[jimp]/index.js:297:17

  - index.js:202
    [Trago2Wheels]/[jimp]/index.js:202:29

  - read_file_context.js:54 FSReqCallback.readFileAfterClose [as oncomplete]
    internal/fs/read_file_context.js:54:3

Steps to reproduce

issue occurs when trying to compile project found here:
https://github.com/Fazyyy/Trago2Wheels

I'm trying to learn Gatsby by building a mock bike shop. I have Gatsby Image render images on the /motorbikes & /scooters page. This is what I believe is causing the issue.

Expected result

Site should compile

Actual result

Site fails during compiling with above error
However, if I remove the image from /templates/blog-post.js on line 31 the project compiles fine.
Then if I reinsert it while the development is live, it works perfectly. But obviously I can't do a production build this way.

Environment

System:
    OS: Windows 10
    CPU: (6) x64 AMD FX(tm)-6300 Six-Core Processor
  Binaries:
    npm: 6.7.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.15 - C:\Python27\python.EXE
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    gatsby: ^2.1.14 => 2.1.14
    gatsby-image: ^2.0.29 => 2.0.29
    gatsby-plugin-google-fonts: 0.0.4 => 0.0.4
    gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
    gatsby-plugin-sharp: ^2.0.21 => 2.0.21
    gatsby-remark-copy-linked-files: ^2.0.9 => 2.0.9
    gatsby-remark-images: ^3.0.4 => 3.0.4
    gatsby-source-filesystem: ^2.0.21 => 2.0.21
    gatsby-transformer-remark: ^2.2.5 => 2.2.5
    gatsby-transformer-sharp: ^2.1.14 => 2.1.14

error The system cannot find the path specified.



  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:4970

  - envinfo.js:1 Object.copySync
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:66948

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:48777

  - envinfo.js:1
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:46934

  - envinfo.js:1 Promise.all.then.e
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:46949

  - util.js:16 tryCatcher
    [Trago2Wheels]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [Trago2Wheels]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [Trago2Wheels]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [Trago2Wheels]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [Trago2Wheels]/[bluebird]/js/release/promise.js:694:18

  - promise.js:638 Promise._fulfill
    [Trago2Wheels]/[bluebird]/js/release/promise.js:638:18

  - promise_array.js:126 PromiseArray._resolve
    [Trago2Wheels]/[bluebird]/js/release/promise_array.js:126:19

  - promise_array.js:144 PromiseArray._promiseFulfilled
    [Trago2Wheels]/[bluebird]/js/release/promise_array.js:144:14

  - promise.js:574 Promise._settlePromise
    [Trago2Wheels]/[bluebird]/js/release/promise.js:574:26

  - promise.js:614 Promise._settlePromise0
    [Trago2Wheels]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [Trago2Wheels]/[bluebird]/js/release/promise.js:694:18


error UNHANDLED REJECTION


  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:4970

  - envinfo.js:1 Object.copySync
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:66948

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:48777

  - envinfo.js:1
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:46934

  - envinfo.js:1 Promise.all.then.e
    [Trago2Wheels]/[envinfo]/dist/envinfo.js:1:46949

  - util.js:16 tryCatcher
    [Trago2Wheels]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [Trago2Wheels]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [Trago2Wheels]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [Trago2Wheels]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [Trago2Wheels]/[bluebird]/js/release/promise.js:694:18

  - promise.js:638 Promise._fulfill
    [Trago2Wheels]/[bluebird]/js/release/promise.js:638:18

  - promise_array.js:126 PromiseArray._resolve
    [Trago2Wheels]/[bluebird]/js/release/promise_array.js:126:19

  - promise_array.js:144 PromiseArray._promiseFulfilled
    [Trago2Wheels]/[bluebird]/js/release/promise_array.js:144:14

  - promise.js:574 Promise._settlePromise
    [Trago2Wheels]/[bluebird]/js/release/promise.js:574:26

  - promise.js:614 Promise._settlePromise0
    [Trago2Wheels]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [Trago2Wheels]/[bluebird]/js/release/promise.js:694:18
picture Fazyyy

Most helpful comment

@Fazyyy i've pinpointed the source of your issue.
@wayne-lincoln has a point with his comment, but we can do one better. As the content is currently hosted under src\pages and we want that folder to be introspected and queried. You can fine tune on where Gatsby should look for your markdown content.
Namely you can adjust gatsby-config.js' to the following:

const path = require(`path`)

module.exports = {
   ....
    plugins: [
        ....
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `data`,
                path: path.join(__dirname, `src/pages`)
            },
        },

    ],
  }

Also in this case as the markdown content and images are siblings, that is they are under the same folder you can adjust your frontmatter properties in the markdown from:

featuredImage: "./cafe-125.png"
mainImage: "./classic-125-main.jpg"

to:

featuredImage: cafe-125.png
mainImage: classic-125-main.jpg

When the gatsby-transformer-remark kicks in and starts processing the data and transforming, it will pick up that those properties are "linked" to actual files and they are transformed into graphql nodes and you can act on them.

And a couple of more things.

  1. I saw that you have some images under src\img folder and you have a static folder.
    Now in this case you have a couple of options, you can add a new entry to the plugins array in gatsby-config.js transforming it into:
const path = require(`path`)

module.exports = {
   .....
    plugins: [
        ....
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `data`,
                path: path.join(__dirname, `src/pages`)
            },
        },
        {
            resolve:`gatsby-source-filesystem`,
            options:{
                name:`pics`,
                path:path.join(__dirname,`src/img`)
            }
        }
    ],
  }

Or you can move the img folder inside the static folder and make some adjustments to your code and with that streamline it a bit more. More on that here

  1. What you said to @wayne-lincoln is happening to me as well. Some times, not always restarting the server can cause some errors, more specifically:
error UNHANDLED EXCEPTION


  TypeError: Cannot read property 'bitmap' of undefined

  - Potrace.js:1000 Potrace._processLoadedImage
    [www]/[potrace]/lib/Potrace.js:1000:35

  - Potrace.js:1046 Jimp.<anonymous>
    [www]/[potrace]/lib/Potrace.js:1046:14

  - index.js:85 Jimp.throwError
    [www]/[jimp]/index.js:85:44

  - index.js:201 ReadFileContext.callback
    [www]/[jimp]/index.js:201:44

For me i was able to pinpoint it to a rather large jpg file you have in your code and the potrace package will throw that error. More information on this here.

I hope i've shed some insights on your issue with my comment.
Feel free to provide some feedback to see if your issue is solved and we can close it. And thank you for using Gatsby 馃憤

picture jonniebigodes on 24 Feb 2019
👍2 🚀1

All 6 comments

@Fazyyy i'm cloning your example repository. Let me check it out and see if i can come up with a solution to your problem! Sounds good?

jonniebigodes picture jonniebigodes on 24 Feb 2019

I think the issue is the resolution of the path to the images. When I changed gatsby-config.js to the following:

{
   resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: path.join(__dirname, `src`)
   }
}

It seems to compile fine so I hope that helps?

wayne-lincoln picture wayne-lincoln on 24 Feb 2019

jonniebigodes
Sounds great thanks

wayne-lincoln
This seems to have resolved it but maybe 70% of the time? If I keep starting and stopping the dev server it seems to work most of the time but not all the time weirdly.

Fazyyy picture Fazyyy on 24 Feb 2019

@Fazyyy i've pinpointed the source of your issue.
@wayne-lincoln has a point with his comment, but we can do one better. As the content is currently hosted under src\pages and we want that folder to be introspected and queried. You can fine tune on where Gatsby should look for your markdown content.
Namely you can adjust gatsby-config.js' to the following:

const path = require(`path`)

module.exports = {
   ....
    plugins: [
        ....
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `data`,
                path: path.join(__dirname, `src/pages`)
            },
        },

    ],
  }

Also in this case as the markdown content and images are siblings, that is they are under the same folder you can adjust your frontmatter properties in the markdown from:

featuredImage: "./cafe-125.png"
mainImage: "./classic-125-main.jpg"

to:

featuredImage: cafe-125.png
mainImage: classic-125-main.jpg

When the gatsby-transformer-remark kicks in and starts processing the data and transforming, it will pick up that those properties are "linked" to actual files and they are transformed into graphql nodes and you can act on them.

And a couple of more things.

  1. I saw that you have some images under src\img folder and you have a static folder.
    Now in this case you have a couple of options, you can add a new entry to the plugins array in gatsby-config.js transforming it into:
const path = require(`path`)

module.exports = {
   .....
    plugins: [
        ....
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `data`,
                path: path.join(__dirname, `src/pages`)
            },
        },
        {
            resolve:`gatsby-source-filesystem`,
            options:{
                name:`pics`,
                path:path.join(__dirname,`src/img`)
            }
        }
    ],
  }

Or you can move the img folder inside the static folder and make some adjustments to your code and with that streamline it a bit more. More on that here

  1. What you said to @wayne-lincoln is happening to me as well. Some times, not always restarting the server can cause some errors, more specifically:
error UNHANDLED EXCEPTION


  TypeError: Cannot read property 'bitmap' of undefined

  - Potrace.js:1000 Potrace._processLoadedImage
    [www]/[potrace]/lib/Potrace.js:1000:35

  - Potrace.js:1046 Jimp.<anonymous>
    [www]/[potrace]/lib/Potrace.js:1046:14

  - index.js:85 Jimp.throwError
    [www]/[jimp]/index.js:85:44

  - index.js:201 ReadFileContext.callback
    [www]/[jimp]/index.js:201:44

For me i was able to pinpoint it to a rather large jpg file you have in your code and the potrace package will throw that error. More information on this here.

I hope i've shed some insights on your issue with my comment.
Feel free to provide some feedback to see if your issue is solved and we can close it. And thank you for using Gatsby 馃憤

jonniebigodes picture jonniebigodes on 24 Feb 2019
👍2 🚀1

I made the changes you recommended, the first compile deleted the cache and then threw the error but then every compile since has worked as expected. So the issue was ultimately down the filesize of a few images I had used? Thanks for your help!

Fazyyy picture Fazyyy on 24 Feb 2019

@Fazyyy that's exactly what happens to me. I did a bit of research and came across with that issue i've linked. So after a bit of digging and moving some images around in and out of the folder i traced it down to one that bigger in size than the others and issuing gatsby develop started throwing that error.
And no need to thank, i'm glad that i was able to help with your issue. Have fun with Gatsby and hope i can catch the addition of your content to the showcase in the near future.
Going to close this issue as it seems that is resolved, should any more issues arise, feel free to open a new one.

jonniebigodes picture jonniebigodes on 24 Feb 2019
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

theduke picture theduke  路  3Comments
kalinchernev picture kalinchernev  路  3Comments
ferMartz picture ferMartz  路  3Comments
magicly picture magicly  路  3Comments
ghost picture ghost  路  3Comments