gatsby: gatsby-plugin-sharp tracedSVG crashes build

Description

Using tracedSVG on a file ending in .jpeg causes gatsby-plugin-sharp to report the following vague error:

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

Of note, Twitter always uses .jpeg for its image suffix, so any images saved from Twitter will crash tracedSVG.

Steps to reproduce

  1. Upload a .jpeg file to Contentful
  2. Load the image in GraphQL using tracedSVG

Expected result

  • Image is traced into an SVG, or
  • Gatsby tells me which error could not be traced

Actual result

Vague error message.

Environment


  System:
    OS: Linux 4.13 Ubuntu 17.10 (Artful Aardvark)
    CPU: x64 Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz
    Shell: 5.2 - /usr/bin/zsh
  Binaries:
    Node: 8.11.2 - /usr/bin/node
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 67.0.3396.62
    Firefox: 61.0.1
  npmPackages:
    gatsby: ^2.0.0-rc.28 => 2.0.0-rc.28 
    gatsby-image: ^2.0.0-rc.4 => 2.0.0-rc.4 
    gatsby-plugin-catch-links: ^2.0.2-rc.1 => 2.0.2-rc.1 
    gatsby-plugin-manifest: ^2.0.2-rc.1 => 2.0.2-rc.1 
    gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-plugin-react-next: next => 2.0.1-13 
    gatsby-plugin-remove-trailing-slashes: ^1.0.9 => 1.0.9 
    gatsby-plugin-sass: ^2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-plugin-sharp: ^2.0.0-rc.7 => 2.0.0-rc.7 
    gatsby-plugin-sitemap: ^2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-source-contentful: ^2.0.1-rc.9 => 2.0.1-rc.9 
    gatsby-source-filesystem: ^2.0.1-rc.6 => 2.0.1-rc.6 
    gatsby-transformer-sharp: ^2.1.1-rc.3 => 2.1.1-rc.3 
    gatsby-transformer-yaml: ^2.1.1-rc.6 => 2.1.1-rc.6 
  npmGlobalPackages:
    gatsby-cli: 2.4.1

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 1
  • Comments: 30 (17 by maintainers)

Commits related to this issue

Most upvoted comments

I had been getting this same error intermittently on Netlify builds only.

TypeError: Cannot read property 'bitmap' of undefined

Removing tracedSVG from my graphQL queries “fixed” it for me for now. (I don’t have any files ending in jpeg however, only png and jpg)

I opened https://github.com/gatsbyjs/gatsby/pull/12927 PR that hopefully fixes that. Because of random nature of this errors I can’t be 100% sure on this

We’ve had the same issue. When using travedSVG on all latest of sharp, gatsby, contentful, etc there are 2 errors:

  1. Netlify bitmap error https://github.com/gatsbyjs/gatsby/issues/8301#issuecomment-450877065
  2. Gatsby tracedSVG error https://github.com/gatsbyjs/gatsby/issues/8301#issuecomment-527601896

For now removing all the tracedSVG instances fixes the build but does dampen the site experience by quite a lot.

I will also edit the title of this issue as it is not specific to .jpeg extensions.

I just stumbled upon this issue while looking for a resolution. Intermittently getting it with gatsby-plugin-sharp@^2.0.35 and gatsby-source-contentful@^2.0.53 (not sure if the latter is relevant). Everything seems consistent with other comments, I can work around the issue by replacing GatsbyContentfulFluid_tracedSVG with GatsbyContentfulFluid.

the title is misleading because it isn’t the jpeg extension that causes the errors (maybe file size?)

On my blog-posts page I had many jpeg files and it works without any problems but it crashes on the post pages…

tried to filter with graphql the jpg and/or jpeg files but it still crashed (I didn’t have jpg files on my blog-posts page so I thought it could be the problem but it’s not)

If anybody know anything new according to this problem we are all ears 😄

Some debugging by @fk led to some useful insights.

  1. potrace depends on a fairly old version of jimp (https://github.com/tooolbox/node-potrace/blob/master/package.json)
  2. jimp has received a few minor releases, and it’s possible simply bumping the dep resolves this issue

So what I’d propose we do here is (in order of quick wins, but not necessarily fixing the underlying issue):

  • PR potrace with a bumped version of jimp to see if the errors reduce or disappear
    • We’ll also want to validate we haven’t broken anything underying in potrace with this change
  • PR potrace swapping jimp for sharp
  • Fork potrace and make some of the underlying fixes ourselves (if PRs aren’t accepted or encouraged)

What will really help in this issue is if there’s anyone who is able to reproduce, even intermittently. I’ve attempted to reproduce with this repo and this Netlify build but no luck as of yet.

Renaming the file from .jpeg -> .jpg in Contentful was the solution which solved my problem, but the error message is extremely generic, and when I looked into the code while trying to troubleshoot, it seems like any error will result in this message. A better solution is probably to improve the error message quality, but IIRC that requires a fix from both Gatsby and Potrace.

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

Same as @DanielAlejandroMontesRodriguez, I’m using Gatsby + Contentful and deploying to Netlify. Locally, the builds are running fine all the time, but on Netlify I kept getting the same error that @tylermenezes originally reported.

I followed @alisonjoseph’s advice and replaced all my ...GatsbyContentfulFluid_tracedSVG fragments with ...GatsbyContentfulFluid, and Netlify’s build finally came through. So in my case, the extensions didn’t seem to make a difference since I have both .jpeg and .jpg images in Contentful.