Search code examples
javascriptnode.jsgruntjsgatsbygatsby-remark-image

Gatsby throws compatible issues with new version 4.x but it is working well in 2.x?


i tried to run "gatsby develop" in my application it throws following compatible issues,

My node version is 16.17.0 and gatsby is 4.24.1. i can guess that it says to upgrade those depdencies to latest version, am unable to identify which version i need to use for gatsby 4.24.1?

Anyone guide me the right solution for this to know the compatible version and solve the below error?

  warn Plugin gatsby-transformer-remark is not compatible with your gatsby version
     4.24.1 - It requires gatsby@^2.0.33
    warn Plugin gatsby-plugin-remove-generator is not compatible with your gatsby
    version 4.24.1 - It requires [email protected]
    warn Plugin gatsby-transformer-remark is not compatible with your gatsby version
     4.24.1 - It requires gatsby@^2.0.33
    warn Plugin gatsby-plugin-remove-generator is not compatible with your gatsby
    version 4.24.1 - It requires [email protected]
    ERROR
    
    Cannot read properties of undefined (reading 'styleAttributes')
    
    
    
      TypeError: Cannot read properties of undefined (reading 'styleAttributes')
    
      - index.js:22 applyOptions
        [Project]/[gatsby-remark-image-attributes]/dist/index.js:22:3
    
      - index.js:105 module.exports
        [Project]/[gatsby-remark-image-attributes]/dist/index.js:105:3
    
      - extend-node-type.js:247
        [Project]/[gatsby-transformer-remark]/extend-node-type.js:247:30
    
      - util.js:16 tryCatcher
        [Project]/[bluebird]/js/release/util.js:16:23
    
      - reduce.js:166 Object.gotValue
        [Project]/[bluebird]/js/release/reduce.js:166:18
    
      - reduce.js:155 Object.gotAccum
        [Project]/[bluebird]/js/release/reduce.js:155:25
    
      - util.js:16 Object.tryCatcher
        [Project]/[bluebird]/js/release/util.js:16:23
    
      - promise.js:547 Promise._settlePromiseFromHandler
        [Project]/[bluebird]/js/release/promise.js:547:31
    
      - promise.js:604 Promise._settlePromise
        [Project]/[bluebird]/js/release/promise.js:604:18
    
      - promise.js:649 Promise._settlePromise0
        [Project]/[bluebird]/js/release/promise.js:649:10
    
      - promise.js:729 Promise._settlePromises
        [Project]/[bluebird]/js/release/promise.js:729:18
    
      - async.js:93 _drainQueueStep
        [Project]/[bluebird]/js/release/async.js:93:12
    
      - async.js:86 _drainQueue
        [Project]/[bluebird]/js/release/async.js:86:9
    
      - async.js:102 Async._drainQueues
        [Project]/[bluebird]/js/release/async.js:102:5
    
      - async.js:15 Immediate.Async.drainQueues [as _onImmediate]
        [Project]/[bluebird]/js/release/async.js:15:14
    
      - timers:466 processImmediate
        node:internal/timers:466:21

Solution

  • The "error" prompted is a warning, hence it doesn't break the compilation, despite needs to be approached. I'd say (and it seems) that the plugins are not well upgraded, although Gatsby is on v4.24.1: confirm that in your package-lock.json (or yarn.lock) and upgraded it accordingly.

    If you are using yarn I'd recommend using yarn upgrade-interactive to know what versions are deprecated and could be upgraded to what version.

    As you pointed, the underlying error:

    Cannot read properties of undefined (reading 'styleAttributes')
    

    Can be related to gatsby-transformer-remark plugin version or to a breaking change of the upgrading process that needs to be tweaked, without further details and knowledge of what's styleAttributes and of your structure it's hard to say.

    You can see in the npm docs that the gatsby-transformer-remark latest version is the 5.24.