Internal Server Error on reload Post single view page

Hello Frontity team,

I get an Internal Server Error when i try to reload the Post single view page.
Steps to reproduce:

  1. Go to
  2. Reload the page

Thank you very much for your help.

Hi @dejangeorgiev

Can you provide a repository with the code of your project?
By doing so, the community (or any member of the Frontity team) will be able to clone your project and try to reproduce the error you’re having
With this info, it’ll be much easier to help you with your issue


1 Like

Hi @juanma

Sure. Here you go:

Thank you very much.

Hi @dejangeorgiev

The error you’re getting is this one

 ReferenceError: window is not defined
      at Post (webpack-internal:///./packages/twentytwenty-theme/src/components/post/post.js:32:59)
      at runAsReaction (webpack-internal:///./node_modules/@frontity/connect/src/reactionRunner.js:16:45)
      at reaction (webpack-internal:///./node_modules/@frontity/connect/src/observer.js:7:131)
      at props (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:18:8)
      at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:505:2392)
      at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:504:122)
      at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:541:855)
      at (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:541:55)
      at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:576:116)
      at app.use (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:46:243)

Being more specific, you’re getting the error ReferenceError: window is not defined because of

const postUrl = window.location.href;

at /packages/twentytwenty-theme/src/components/post/post.js:38

The window object is only available in the browser so you’ll have it available only if the route is rendered in the client

With Frontity you create what is called an isomorphic app…

Isomorphic React apps in Frontity

When developing a Frontity project or package the React code (used in your custom theme) should be isomorphic (also called universal)

This means that all the code in a Frontity project should be prepared to be executed both on the server-side and in the client-side.

Every time we access a page the first load is rendered from the server and from there the navigation is done in the client-side (this allows a SEO friendly behavior while maintaining a good UX)

Let’s take an example of an isomorphic react app:

If we enter the URL of the pageA and press Enter, then pageA is rendered in the server and served to the client
If we enter the URL of the pageB and press Enter then pageB is rendered in the server and served to the client

In these two cases, a SSR (Server Side Render) process has taken the React code and created the proper HTML with the proper content that is “served” to the client so it can be displayed to the user

But if we enter the URL of the pageA , press Enter and from any some link in our app we go to pageB what is happening is:

  • pageA was rendered in the server and served to the client
  • pageB was rendered in the client and displayed to the user

So, as you can see, we have to keep in mind this when developing a React theme with Frontity

Open drawing

Luckily, ALL the tools provided by Frontity provide an isomorphic behavior (they assure a behavior that works in both the server-side & the client-side)

Taking this into account…

You have to assure that all your React components can be executed in both the Server Side and the Client Side because any route can be generated from the server or from the client

Some typical actions that should be “isomorphic” are:

Isomorphic actions & info with Frontity

If you use the connect method over any component, Frontity will be able to pass to the components (as props) all the info from the packages and the core

const Post = ({state, actions, libraries}) => {
  // code of your component

export default connect(Post);

In state & actions you’ll have available isomorphic properties and methods from the Frontity packages

Doing a request to an URL

To do so, the package @frontity/wp-source provides you isomorphic methods to do this like actions.source.fetch or libraries.source.api.get

Getting the current URL

The package @frontity/tiny-router provides this info in an isomorphic way in

Coming back to your issue, you should use to get the current link and not window.location.href; because window object will not be available on the Server Side Rendered version of the page and you’ll get this error

Hope this helps!

Hello @juanma,

Wow, first of all thank you so much for taking the effort to reproduce the cause of the Issue and explaining it so well!
You helped me a lot in terms of understand the Frontity lifecycle, so in the future i can navigate easy through components and pass props through.

However, i changed the postUrl as you mentioned before and the Problem still occurs. I think this might be something different that cause this Issue. Every time when i call the URL or reload the page it returns 500 Error with message “Internal Server Error”.

And instead of, i need the full path / url. Something like state.frontity.url, but this one returns the WordPress Url…

Thank you very much for your help!


Hi @dejangeorgiev,

Please provide the specific error you’re getting.
In your repo, you sill have the line that would cause the error i explained above

By changing this line to

    const postUrl =;

You shouldn’t get this window error (that provokes this Internal error message in the browser)

Please, check your terminal and share the error you’re getting.
Also, update your repo so we can do the test with the latest version of your code.

Cheers! returns the url of the frontity project without the domain so you could easily generate the full URL by adding the proper domain before the relative url your get

1 Like

Hi @juanma

Yes, i already changed the postUrl, please see this on the screenshot and on the following repository link:

In the terminal i get this message TypeError: Cannot read property categories of undefined.

@juanma Thank you very much!


You’re having the same problem but in another part of the code

This page /italian-salad-perfect-explained/ is working fine when rendered on the Cliente Side but is failing when rendered on the Server Side

This new error comes from your post-item-preview as it is indicated in the error. And the error says Cannot read property 'categories' of undefined

So, the problem is in this line

const categories =
        item.categories && => allCategories[catId]);

item is undefined when this page is rendered on the Server Side, which means that this component is receiving undefined as the value of the prop item.

Just follow the lead and check your code to find out which part of your code is causing this

As a general thing to be taken into account, all the react hooks will be executed only on the Client Side so check those you’re using to fetch data and that may provide data to this component

Hope this helps