gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.28k stars 10.31k forks source link

gatsby develop => yoga-layout | nbind.js:53 | throw ex; Error: w and h must be numbers #32541

Closed gyurisc closed 3 years ago

gyurisc commented 3 years ago

Preliminary Checks

Description

When running gatsby develop on my machine I get the following error:

C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\yoga-layout-prebuilt\yoga-layout\build\Release\nbind.js:53 throw ex; ^

Error: w and h must be numbers at Jimp.call (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\@jimp\utils\src\index.js:15:13) at Jimp.apply [as scanQuiet] (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\@jimp\core\src\index.js:1223:23)
at Jimp. [as scan] (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\@jimp\core\src\index.js:1144:23)
at Potrace._processLoadedImage (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\potrace\lib\Potrace.js:1005:11)
at Jimp. (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\potrace\lib\Potrace.js:1048:14) at Timeout._onTimeout (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\@jimp\core\src\index.js:223:9) at listOnTimeout (internal/timers.js:549:17) at processTimers (internal/timers.js:492:7) Emitted 'error' event on Jimp instance at: at Jimp.emitMulti (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\@jimp\core\src\index.js:441:10) at Jimp.emitError (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\@jimp\core\src\index.js:445:10) at Jimp. [as scan] (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\@jimp\core\src\index.js:1153:12)
at Potrace._processLoadedImage (C:\Users\Krisztian Gyuris\dev\projects\melyiket2\node_modules\potrace\lib\Potrace.js:1005:11)
[... lines matching original stack trace ...] at processTimers (internal/timers.js:492:7) { methodName: 'scan', eventName: 'error' }

I started seeing this when added the image plugin to my project:

`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,

and using the following in my graphql query:

      image {
        localFiles {
          childImageSharp {
            gatsbyImageData(placeholder: TRACED_SVG, layout: CONSTRAINED)
          }
        }
      }

If I am commenting out the image section from my graphql query then the error is not thrown.

I can try to build a reproduction project if needed

Reproduction Link

https://github.com/gyurisc/gatsby-bug-repro

Steps to Reproduce

  1. run gatsby-develop
  2. seeing the error
  3. ...

Expected Result

It builds without any issues

Actual Result

I am seeing this error and the development server is not starting

Environment

System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.6.5 - /c/ProgramData/Anaconda3/python
  Browsers:
    Chrome: 92.0.4515.107
    Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.55)
  npmPackages:
    gatsby: ^3.10.2 => 3.10.2
    gatsby-plugin-image: ^1.10.1 => 1.10.1
    gatsby-plugin-react-helmet: ^4.10.0 => 4.10.0
    gatsby-plugin-sharp: ^3.10.2 => 3.10.2
    gatsby-plugin-styled-components: ^4.10.0 => 4.10.0
    gatsby-source-airtable: ^2.2.0 => 2.2.0
    gatsby-source-filesystem: ^3.10.0 => 3.10.0
    gatsby-transformer-sharp: ^3.10.0 => 3.10.0
  npmGlobalPackages:
    gatsby-cli: 3.10.0

Config Flags

not using any flags

gyurisc commented 3 years ago

Figured this one out, if I remove parameter placeholder:TRACED_SVG from gatsbyImageData then the error does not happen. It would be nice to figure out why this is happening though as it was working before

  image {
    localFiles {
      childImageSharp {
        gatsbyImageData(placeholder: TRACED_SVG, layout: CONSTRAINED)
      }
    }
  }