v1.5.0 to v2.0.0 Migration Guide

this guide covers migrating gatsby theme performance from v1 5 0 to v2 0 0 a major benefit to gatsby theme performance v2 0 0 is it now supports gatsby 4 ! major changes gatsby 4 v2 0 0 requires gatsby 4 gatsby 4 has a variety of performance improvements you can read more about gatsby 4 here gatsby plugin image gatsby 4 requires using the new gatsby plugin image plugin instead of the deprecated gatsby image plugin accordingly, v2 0 0 now requires gatsby plugin image you can read more about gatsby plugin image here reading gatsby – migrating from v2 to v3 gatsby – migrating from v3 to v4 gatsby – migrating from gatsby image to gatsby plugin image note the scope of this guide covers updating the gatsby starter performance codebase as is there may be issues outside the scope of this document based on the customizations you have made to your codebase upgrade guide 1\ update dependencies update @chordcommerce/gatsby theme performance to ^2 0 0 update gatsby to ^4 4 0 update theme ui and gatsby plugin theme ui to ^0 12 1 run yarn upgrade interactive latest to update all other dependencies to their latest note that the above dependencies should not be upgraded to their latest gatsby plugins should be updated to their latest so they are compatible with gatsby 4 see update gatsby related packages for more information on updating gatsby plugins note if you have installed gatsby plugins other than the plugins in our gatsby starter, this could introduce breaking changes that are not addressed in this guide see update gatsby related packages for more information 2\ migrate to gatsby plugin image gatsby v4 uses the new gatsby plugin image instead of the deprecated gatsby image we need to remove gatsby image and install gatsby plugin image , gatsby plugin sharp , and gatsby transformer sharp see migrating from gatsby image to gatsby plugin image for a full overview of migrating to gatsby plugin image 1\ remove gatsby image in version 1 5 0, gatsby theme performance included the gatsby image package, however, this is no longer the case if you have installed gatsby image separately in your gatsby project, you will need to remove it if not, you can skip this step run yarn remove gatsby image 2\ install gatsby plugin image and supporting packages run yarn add gatsby plugin image gatsby plugin sharp gatsby transformer sharp 3\ add gatsby plugin image to gatsby config add gatsby plugin image plugins to gatsby config js see migrating from gatsby image to gatsby plugin image for more information module exports = { plugins \[ // 'gatsby plugin image', 'gatsby plugin sharp', 'gatsby transformer sharp', // ], } 4\ run the codemod run npx gatsby codemods gatsby plugin image src to run the codemod which will update usage according to the new api see migrating from gatsby image to gatsby plugin image for more information note the gatsby plugin image codemod removes the theme ui jsx pragma ( / @jsx jsx / at the top of the file), see theme ui jsx pragma and ensure the jsx pragma is included in all theme ui components note the gatsby plugin image codemod may add some undesirable code style changes be sure to check the diff before committing 5\ manual gatsby plugin image migrations as the codemod may not fix all gatsby plugin image issues, you will likely need to make some changes to ensure your codebase works with gatsby plugin image see migrating from gatsby image to gatsby plugin image contentful graphql query changes since the codemod doesn’t apply to contentful gatsby image queries, you will need to update them to work with gatsby plugin image for example queries before fluid(maxwidth 500, quality 80) { gatsbycontentfulfluid withwebp } after gatsbyimagedata( quality 80 layout constrained width 500 ) helpers you can also update any queries to the file url to use gatsby plugin image 's getimage and getsrc helper functions be sure to replace all image file url or image fluid src use cases to prevent images from not rendering after the upgrade for example before image { title fluid(maxwidth 500, quality 80) { gatsbycontentfulfluid withwebp } file { url } } jsx // gatsbyimage \<img fluid={image fluid} alt={image title} /> // src \<div style={{ backgroundimage `url(${image file url})` // or image fluid src }} /> after image { gatsbyimagedata( quality 80 layout full width ) } jsx // gatsbyimage \<gatsbyimage image={getimage(image)} alt={image title} /> // src \<div style={{ backgroundimage `url(${getsrc(image)})` }} /> see migrating from gatsby image to gatsby plugin image or the gatsby image plugin reference guide for more information on the new gatsby image querying congratulations! you’ve migrated to gatsby 4! be sure to run a gatsby clean before starting up your project to wipe the cache and public folders see common errors below if you are getting any errors 3\ upgrade from a gatsby theme performance version below v1 5 0 please read the release notes for previous releases to find out what changed, but important breaking changes to highlight include segment consent manager (breaking change in ) see the change to the segment consent manager in v1 5 0 release notes and ensure you have the segmentconfig set in gatsby config js product merchant feed (breaking change in ) this theme no longer provides a merchant feed see the change in v1 2 0 release notes and implement a feed in your website code gotchas graphql typename field is no longer added automatically as of gatsby 3, typename fields are no longer added automatically so you may need to update your graphql queries and fragments to include typename this is usually used to render components based on graphql such as sections see here for more details troubleshooting run gatsby clean be sure to run a gatsby clean before starting up your project to wipe the cache and public folders type with name "gatsbyimagelayout" does not exists' error missing onerror handler for invocation 'building schema', error was 'error type with name "gatsbyimagelayout" does not exists' solution this is likely because you didn't install gatsby plugin image also don't forget to include gatsby plugin image plugins in gatsby config plugin gatsby plugin gatsby cloud is not compatible with your gatsby version if you are using gatsby plugin gatsby cloud , chances are you are using version 1 due to compatability with gatsby 2 run yarn add gatsby plugin gatsby cloud\@latest to update to the latest cannot read properties of undefined (reading 'initialized') error cannot read properties of undefined (reading 'initialized') /node modules/@segment/consent manager/esm/consent manager builder/analytics js 22 solution this is caused by not having segmentconfig set in gatsby theme performance plugin settings as of version gatsby theme performance v1 5 0 , segmentconfig is required see v1 5 0 release notes can't resolve 'react hook form' in v2 0 0 we have removed the react hook form dependency so you will need to make sure you install it yourself the previous version of gatsby theme autonomy used react hook form v5 7 2 , so in order to prevent breaking changes, run yarn add react hook form\@5 7 2 you can also upgrade to the latest by following react hook form v5 to v6 migration guide and react hook form v6 to v7 migration guide theme ui jsx pragma error error 'react' must be in scope when using jsx react/react in jsx scope solution make sure you use the jsx pragm a for theme ui at the top of your file / @jsx jsx / failed to compile gatsby functions one possible cause of this error is the existence of a src/api directory in your site starting in gatsby 3 7, the src/api directory is a reserved directory for gatsby gatsby automatically maps files in this directory to function routes if you were using the src/api directory prior to your upgrade, you'll need to rename the directory to stop gatsby from publishing the contents as functions