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
- Upload a .jpeg file to Contentful
- 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
[4mSystem:[0m
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
[4mBinaries:[0m
Node: 8.11.2 - /usr/bin/node
npm: 6.4.1 - /usr/bin/npm
[4mBrowsers:[0m
Chrome: 67.0.3396.62
Firefox: 61.0.1
[4mnpmPackages:[0m
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
[4mnpmGlobalPackages:[0m
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
- temp fix https://github.com/gatsbyjs/gatsby/issues/8301 — committed to nestarz/book-react by nestarz 5 years ago
- fix(gatsby-plugin-sharp): don't write to same temporary time multiple times at a same time (#12927) Memoization key for tracedSVG was not entirely correct and we were trying to write to temporary fil... — committed to gatsbyjs/gatsby by pieh 5 years ago
- fix(gatsby-plugin-sharp): don't write to same temporary time multiple times at a same time (#12927) Memoization key for tracedSVG was not entirely correct and we were trying to write to temporary fil... — committed to jlengstorf/gatsby by pieh 5 years ago
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: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
andgatsby-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 replacingGatsbyContentfulFluid_tracedSVG
withGatsbyContentfulFluid
.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.
potrace
depends on a fairly old version of jimp (https://github.com/tooolbox/node-potrace/blob/master/package.json)jimp
has received a few minor releases, and it’s possible simply bumping the dep resolves this issueSo what I’d propose we do here is (in order of quick wins, but not necessarily fixing the underlying issue):
potrace
with a bumped version ofjimp
to see if the errors reduce or disappearpotrace
with this changepotrace
swappingjimp
forsharp
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.