Hello Frontity team,
I get an Internal Server Error when i try to reload the Post single view page.
Steps to reproduce:
Thank you very much for your help.
Best,
Dejan
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
Thanks!
Hi @juanma
Sure. Here you go: https://github.com/dejangeorgiev/ruthgeorgiev-frontity
Thank you very much.
Best,
Dejan
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 ReactDOMServerRenderer.read (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…
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 clientpageB was rendered in the client and displayed to the userSo, as you can see, we have to keep in mind this when developing a React theme with Frontity
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:
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
To do so, the package @frontity/wp-source provides you isomorphic methods to do this like actions.source.fetch or libraries.source.api.get
The package @frontity/tiny-router provides this info in an isomorphic way in state.router.link
Coming back to your issue, you should use state.router.link 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 state.router.link, 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!
Best,
Dejan
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 = state.router.link;
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!
state.router.link 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
Hi @juanma
Yes, i already changed the postUrl, please see this on the screenshot and on the following repository link: https://github.com/dejangeorgiev/ruthgeorgiev-frontity/blob/master/packages/twentytwenty-theme/src/components/post/post.js
In the terminal i get this message TypeError: Cannot read property categories of undefined.
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 && item.categories.map((catId) => 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