Page Generation Error after complete module 4

Pages
1

Anyone can help me with this error?

Failed to generate page for feature locator with locale en, in stream cog-internal-feature-static-file-generation-locator, due to the following error: window is not defined: [at nx (Generator-mixwku6ukr:src/assets/server/locator.c205a663.js:1376:7239) at QP (Generator-mixwku6ukr:src/assets/server/locator.c205a663.js:1376:7317) at eD (Generator-mixwku6ukr:src/assets/server/locator.c205a663.js:1376:7521) at o (Generator-mixwku6ukr:src/assets/static/server.browser-c4f1fd8f.js:8:11357) at Ke (Generator-mixwku6ukr:src/assets/static/server.browser-c4f1fd8f.js:8:12379) at e.r.render (Generator-mixwku6ukr:src/assets/static/server.browser-c4f1fd8f.js:8:14950) at e.r.read (Generator-mixwku6ukr:src/assets/static/server.browser-c4f1fd8f.js:8:14531) at Object.z.renderToString (Generator-mixwku6ukr:src/assets/static/server.browser-c4f1fd8f.js:10:566) at H (Generator-mixwku6ukr:src/assets/renderer/templateRenderer.js:19:2225) at k (Generator-mixwku6ukr:src/assets/renderer/templateRenderer.js:19:1792)]

It happens after adding the locator to the repo.

2

Hi Joesph,

Did you see this issue in unit 8 of Module 4 in the Pages track? This is where the window object is introduced so I want to make sure we are on the same page.

For some more context, Yext pages are statically generated on the server. The window object is only available in the browser so trying to access it on the server will cause the error that you are seeing. The way to prevent this from happening is to make sure that the window object is not used server-side, like in the following code sample from unit 8:

function getWindowDimensions() {
  if (!getRuntime().isServerSide) {
    const { innerWidth: width, innerHeight: height } = window;
    return {
      width,
      height,
    };
  } else {
    return;
  }
}

Let me know if this helps.

Aaron

3

Hi Aaron,

Thank you so much for the help.

I just removed this code and now is working.

image
image1559×170 37 KB

4

Hi Aaron,
I’m also seeing the same error when deploying.

I commented out the function etc but had errors when compiling. Is it possible to supply an alternative complete code block to replace the useWindowsDimensions.ts code we are copying and pasting in Pages Module 4 Unit 8, as I think that would be really beneficial to the community if so?

Many thanks,

Sam

5

Hi Sam,

I just went through the module again and it seems like the useWindowDimensions hook should be removed from the module.

The idea behind the hook was to show the results rather than the map by default when the viewport is mobile sized. This doesn’t seem to be a necessary UX and adding the hook distracts from the point of the module. I still need to look into why the hook causes the build to fail, but for now I will work with the HH team to remove that code reference from the module.

You can view the repo that I was able to deploy successfully after removing the hook here.

Thanks for bringing this to our attention!

Aaron

6

Thanks Aaron, this is great. FYI I removed the useWindowDimensions hook and replaced the Store Locator component with the code in your repo. All works as expected now, with no errors.

Thanks for the response, really appreciated.

Cheers

Sam