Upgrading to PagesJS 1.0.0 | Yext Hitchhikers Platform

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

Note

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

To help facilitate this, Pages offers an upgrade command that will update any necessary portions of your project automatically.

To get started, cd into your project and run the following command:

npx @yext/pages@latest upgrade

This command will perform the following actions automatically:

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
Updates the following dependencies to latest:
- @vitejs/plugin-react
- vite (to latest Vite 5)
- @yext/search-headless-react
- @yext/search-ui-react
Removes fetch imports if it’s coming from @yext/pages/util (as it is supported natively as part of node.js 18 )
Adds/updates the following package.json scripts: dev, prod, build
Updates node engines in package.json to ^18.0.0 || >=20.0.0
Checks the current version of node the user is on and errors if not on 18 or 20
Updates @yext/pages to the version of the upgrade script running (should be the latest)
Removes the following dependencies from package.json and updates imports to use @yext/pages-components instead
- @yext/sites-components
- @yext/react-components
Installs dependencies based on the package manager you’re using (npm, pnpm, yarn)
Migrates from sites-config files (refer to the Site Config Files (< PagesJS 1.0.0) reference) to the new consolidated config.yaml format (refer to the Site Configuration reference doc)

Note

As a best practice, we recommend performing this upgrade on a separate branch and testing a deployment in the platform before merging into your production branch.

For a list of features and bug fixes introduced in PagesJS 1.0.0 and each beta version, check out this Github changelog .

Update HoursStatus Component

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

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 you can do this:

Use the upgrade command above to upgrade to the latest version of PagesJS.
- This will remove old dependencies from package.json and update imports to use @yext/pages-components instead of any older libraries.
- However, the upgrade command will perform other actions automatically to upgrade the PagesJS version; depending on your setup, other issues may arise that need to be fixed.
You can use the HoursStatus component from @yext/pages-components without updating other components specifically for this issue. However, it is recommended that you upgrade all corresponding components to the @yext/pages-components ones.
1. Add @yext/pages-components to the package.json file if it is not already there.
2. Update the import of HoursStatus to use the @yext/pages-components library.

Back

< Pages Product Architecture

Repo Structure >

<% elem.innerText %>