Upgrading to PagesJS 1.0.0

If you are using a beta version of PagesJS (anything below version 1.0.0), we recommend upgrading your project as soon as possible to take advantage of the latest features.

Note: Ensure you have the latest version of the Yext CLI installed before proceeding (at least 0.1_382 or higher).

To get started, cd into your project and run:

npx @yext/pages@latest upgrade

This command performs the following actions automatically:

1. Logs a warning if you're using the legacy markdown component from react-components and links to the reference doc on Rendering Rich Text and Markdown
2. Updates the following dependencies to latest:
   • @vitejs/plugin-react
   • vite (to latest Vite 5)
   • @yext/search-headless-react
   • @yext/search-ui-react
3. Removes fetch imports from @yext/pages/util (as fetch is supported natively in Node.js 18)
4. Adds/updates the following package.json scripts: dev, prod, build
5. Updates node engines in package.json to ^18.0.0 || >=20.0.0
6. Checks the current version of Node and errors if not on 18 or 20
7. Updates @yext/pages to the version of the upgrade script running (should be latest)
8. Removes the following dependencies from package.json and updates imports to use @yext/pages-components instead:
   • @yext/sites-components
   • @yext/react-components
9. Installs dependencies based on the package manager you're using (npm, pnpm, yarn)
10. Migrates from sites-config files (see Site Config Files (< PagesJS 1.0.0)) to the new consolidated config.yaml format (see Site Configuration)

Note: As a best practice, perform this upgrade on a separate branch and test a deployment in the platform before merging into your production branch.

For a full list of features and bug fixes introduced in PagesJS 1.0.0 and each beta version, see the GitHub changelog.

Update HoursStatus Component

Sites using an outdated pages component may incorrectly calculate store holiday hours. This issue only affects users viewing the page from a different time zone than the store's location — users in the same time zone as the location will see the correct open status and holiday hours.

To resolve this, update your site to use the HoursStatus component from @yext/pages-components instead of an older library (@yext/sites-react-components, @yext/sites-components, or @yext/react-components). There are two ways to do this:

Option 1: Use the upgrade command

Run the upgrade command above. It will remove old dependencies from package.json and update imports to use @yext/pages-components. Note that the upgrade command performs other actions as well — depending on your setup, other issues may arise that need to be addressed.

Option 2: Update HoursStatus only

You can update just the HoursStatus component without upgrading everything else:

1. Add @yext/pages-components to package.json if it is not already there.
2. Update the HoursStatus import to use @yext/pages-components.

It is still recommended that you eventually upgrade all corresponding components to their @yext/pages-components equivalents.