Vite/postCSS error with Locator Hitchhikers code example

Pages
1

I’m getting a Vite error when attempting to run build after adding in the Locators.tsx code from the Pages Hitchhikers track. Specifically the @yext/search-ui-react component include in the tailwind.config.js file.

Here is the error I get when running build

[vite:css] [postcss] require() of ES Module /Users/<user>/Localhost/yext-sept-pages/node_modules/@yext/search-ui-react/lib/commonjs/index.js from /Users/<user>/Localhost/yext-sept-pages/tailwind.config.cjs not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/<user>/Localhost/yext-sept-pages/node_modules/@yext/search-ui-react/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

PostCSS seems to expecting index.cjs instead of index.js.

below is my specs

System:
    OS: macOS 13.5.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 62.66 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
  Browsers:
    Brave Browser: 114.1.52.129
    Chrome: 116.0.5845.179
    Edge: 114.0.1823.51
    Safari: 16.6
  npmPackages:
    @yext/pages: 1.0.0-beta.21 => 1.0.0-beta.21

Any idea on a fix as this is a blocker in completing the pages track

2

Hi David,

I went through the track this morning and I saw the same issue. It appears there is an issue with the latest version of Search UI React. To resolve this issue, in your package.json, set your Search Headless React and Search UI React dependencies to the following:

"@yext/search-headless-react": "2.3.0",
"@yext/search-ui-react": "1.3.0",

Then, run npm install before trying npm run dev again. At this point, you site should run locally.

I apologize for the inconvenience.

Aaron