Adding <Page /> Component breaks front page behavior

I recently added the following logic to my index.js in order to differentiate between the Page and Post components:

              {data.isFetching && <Loading />}
              {data.isArchive && <Archive />}
              {data.isPage && <Page />}
              {data.isPostType &&  />}
              {data.is404 && <Page404 />}

The data={data} stuff is just there because I added page transitions. The problem is the addition of data.isPage. When I add that in I get a bug.

If I’m on the front page <Archive /> and I click a link to a <Post /> then it works fine. If I a menu button that is linked to a specific page then it works. But if after clicking any of these I click the logo in the top left hand corner to take me back to the homepage I get a blank page as a response.

This is the Error I get from the Console:

Page.js?486c:27 Uncaught TypeError: Cannot read property 'title' of undefined
    at Page (Page.js?486c:27)
    at runAsReaction (reactionRunner.js?30ae:55)
    at reaction (observer.js?724e:11)
    at eval (connect.js?84b5:70)
    at renderWithHooks (react-dom.development.js?61bb:16241)
    at updateFunctionComponent (react-dom.development.js?61bb:18328)
    at updateSimpleMemoComponent (react-dom.development.js?61bb:18266)
    at beginWork$1 (react-dom.development.js?61bb:20228)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:336)
    at eval (scheduler.js?f1c4:10)
Page @ Page.js?486c:27
runAsReaction @ reactionRunner.js?30ae:55
reaction @ observer.js?724e:11
eval @ connect.js?84b5:70
renderWithHooks @ react-dom.development.js?61bb:16241
updateFunctionComponent @ react-dom.development.js?61bb:18328
updateSimpleMemoComponent @ react-dom.development.js?61bb:18266
beginWork$1 @ react-dom.development.js?61bb:20228
callCallback @ react-dom.development.js?61bb:336
eval @ scheduler.js?f1c4:10
batchedUpdates$1 @ react-dom.development.js?61bb:24353
batch @ scheduler.js?f1c4:10
batched @ scheduler.js?f1c4:25
invokeGuardedCallbackDev @ react-dom.development.js?61bb:385
invokeGuardedCallback @ react-dom.development.js?61bb:440
beginWork$$1 @ react-dom.development.js?61bb:25738
performUnitOfWork @ react-dom.development.js?61bb:24662
workLoopSync @ react-dom.development.js?61bb:24638
performSyncWorkOnRoot @ react-dom.development.js?61bb:24237
eval @ react-dom.development.js?61bb:12180
unstable_runWithPriority @ scheduler.development.js?3069:818
runWithPriority$2 @ react-dom.development.js?61bb:12130
flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:12175
flushSyncCallbackQueue @ react-dom.development.js?61bb:12163
batchedUpdates$1 @ react-dom.development.js?61bb:24359
batch @ scheduler.js?f1c4:10
batched @ scheduler.js?f1c4:25
backend.js:6 The above error occurred in one of your React components:
    in Unknown
    in div (created by Context.Consumer)
    in Absolute
    in div (created by ForwardRef)
    in ForwardRef
    in Unknown (created by App)
    in HelmetProvider (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
r @ backend.js:6
logCapturedError @ react-dom.development.js?61bb:21810
logError @ react-dom.development.js?61bb:21847
update.callback @ react-dom.development.js?61bb:23199
callCallback @ react-dom.development.js?61bb:13810
commitUpdateEffects @ react-dom.development.js?61bb:13848
commitUpdateQueue @ react-dom.development.js?61bb:13838
commitLifeCycles @ react-dom.development.js?61bb:22127
commitLayoutEffects @ react-dom.development.js?61bb:25302
callCallback @ react-dom.development.js?61bb:336
eval @ scheduler.js?f1c4:10
batchedUpdates$1 @ react-dom.development.js?61bb:24353
batch @ scheduler.js?f1c4:10
batched @ scheduler.js?f1c4:25
invokeGuardedCallbackDev @ react-dom.development.js?61bb:385
invokeGuardedCallback @ react-dom.development.js?61bb:440
commitRootImpl @ react-dom.development.js?61bb:25040
unstable_runWithPriority @ scheduler.development.js?3069:818
runWithPriority$2 @ react-dom.development.js?61bb:12130
commitRoot @ react-dom.development.js?61bb:24889
finishSyncRender @ react-dom.development.js?61bb:24296
performSyncWorkOnRoot @ react-dom.development.js?61bb:24274
eval @ react-dom.development.js?61bb:12180
unstable_runWithPriority @ scheduler.development.js?3069:818
runWithPriority$2 @ react-dom.development.js?61bb:12130
flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:12175
flushSyncCallbackQueue @ react-dom.development.js?61bb:12163
batchedUpdates$1 @ react-dom.development.js?61bb:24359
batch @ scheduler.js?f1c4:10
batched @ scheduler.js?f1c4:25
react-dom.development.js?61bb:12193 Uncaught TypeError: Cannot read property 'title' of undefined
    at Page (Page.js?486c:27)
    at runAsReaction (reactionRunner.js?30ae:55)
    at reaction (observer.js?724e:11)
    at eval (connect.js?84b5:70)
    at renderWithHooks (react-dom.development.js?61bb:16241)
    at updateFunctionComponent (react-dom.development.js?61bb:18328)
    at updateSimpleMemoComponent (react-dom.development.js?61bb:18266)
    at beginWork$1 (react-dom.development.js?61bb:20228)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:336)
    at eval (scheduler.js?f1c4:10)

I’m guessing the problem here is that it thinks that the frontpage archive is a Page and not an Archive component?

I seem to have fixed it when I refactored it to this:

{(data.isFetching && <Loading />) ||
                (data.isArchive && <Archive data={data} />) ||
                (data.isPage && <Page data={data} />) ||
                (data.isPostType && <Post data={data} />) ||
                (data.is404 && <Page404 />)}
1 Like

Yes, we have moved to the || format so they are OR and not AND too.

I’ve added a <Switch> component to our roadmap that will work like this:

<Switch>
  <Loading when={data.isFetching} />
  <Archive when={data.isArchive} />
  <Page when={data.isPage} />
  <Post when={data.isPostType} />
  <Page404 />
</Switch>
2 Likes

unfortunately I’m having the same problems again even though I have the refactored component.

You can see a live version of the website I’m working on at hire-me.jackalope.tech and the repo for it is: https://github.com/jcklpe/desert-jackalope

I only see a CORS problem in https://www.jackalope.tech/wp-json/.

To solve it add the CORS header to the REST API:

	add_filter( 'rest_pre_serve_request', function( $value ) {
		header( 'Access-Control-Allow-Origin: *' );
		header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' );
		header( 'Access-Control-Allow-Credentials: true' );
		return $value;
	});

Could you please share the required steps to get to the Cannot read property 'title' of undefined problem?

1 Like

Do I add that to my functions.php file in my wordpress website? I tried that but that doesn’t seem to have worked. Or perhaps I need to add it to my php.ini ?

Researching the CORS problem, MDN says:

Other possible causes include:

  • Trying to access an https resource that has an invalid certificate will cause this error.
  • Trying to access an http resource from a page with an https origin will also cause this error.

Would that perhaps be the result of some kind of ssl setting on my server? Or perhaps that I’m using WP-rocket to php cache my website?

I’m going to go test that second theory real quick.

EDIT:

Okay I think I get it. Looking over the error in Chrome, I think the issue is that it’s trying to grab posts but those pages it fails on are pages, not posts. I think I have an idea how to fix it, just a sec.

EDIT 2:

Okay looks like that didn’t fix it. I thought maybe if I made sure to put the component before the component that maybe that would fix stuff but doesn’t look like it has.

Yes, adding that to functions.php or a custom plugin solves the CORS problem.

If that’s not the problem, then we’re going to need the project (not the theme) repository and detailed steps on how to reproduce the problem.

cool, I think it’s an issue with my host. I’m checking in with support there and I’ll report back. Found an article by them here: https://help.dreamhost.com/hc/en-us/articles/216201557-How-to-setup-Cross-Origin-Resource-Sharing-CORS-on-DreamObjects

That I think addresses the issue. It at least helped me understand what the nature of the issue was, and I’m pretty sure it’s something they are putting on their own system.

Weird, yeah so I’ve added the stuff that needs to be added to the .htaccess file (which I’m guessing is what the filter function was supposed to do) and yet it’s still giving me a cors error. I run a test here and it returns back information that seems like stuff should be fixed.

Header Value
Date Tue, 03 Dec 2019 23:21:36 GMT
Content-Type text/html; charset=UTF-8
Transfer-Encoding chunked
Connection keep-alive
Access-Control-Allow-Headers *
Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE,PUT
Access-Control-Allow-Origin *
Cf-Railgun direct (waiting for pending WAN connection)
Link https://www.jackalope.tech/wp-json/; rel=“https://api.w.org/”, https://www.jackalope.tech/; rel=shortlink
CF-Cache-Status DYNAMIC
Expect-CT max-age=604800, report-uri=“https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct”
Server cloudflare
CF-RAY 53f947156fb9e376-SEA

EDIT:

Okay so I’m getting the expected response header… and I’ve checked a direct JSON request via the browser like so: https://www.jackalope.tech/wp-json/wp/v2/pages?embed=true&slug=about

So what does that mean? Is this actually a problem with server config, or is it something funky going on with frontity?

It seems weird to me that I don’t get CORS errors when I load the front page but when I click to the About page I get errors. On the other hand if I load the About page fresh, then I don’t get any errors but I do get errors clicking to the front page. It seems the issue isn’t it requesting the data, but rather it requesting it through the click process?

EDIT2:

The issue does not seem to be with the server. See curl response:

  ⚡  /mnt/c/Users/aslan/home/work/server-front 
    â­„>>  *   Trying 2606:4700:30::6812:39bc... 
* TCP_NODELAY set
* Connected to www.jackalope.tech (2606:4700:30::6812:39bc) port 443 (#0) 
* ALPN, offering h2 
* ALPN, offering http/1.1
* successfully set certificate verify locations: 
*   CAfile: /etc/ssl/certs/ca-certificates.crt
  CApath: /etc/ssl/certs
* TLSv1.3 (OUT), TLS handshake, Client hello (1):
* TLSv1.3 (IN), TLS handshake, Server hello (2): 
* TLSv1.3 (IN), TLS Unknown, Certificate Status (22):
* TLSv1.3 (IN), TLS handshake, Unknown (8):
* TLSv1.3 (IN), TLS handshake, Certificate (11):
* TLSv1.3 (IN), TLS handshake, CERT verify (15): 
* TLSv1.3 (IN), TLS handshake, Finished (20):
* TLSv1.3 (OUT), TLS change cipher, Client hello (1):
* TLSv1.3 (OUT), TLS Unknown, Certificate Status (22):
* TLSv1.3 (OUT), TLS handshake, Finished (20):
* SSL connection using TLSv1.3 / TLS_AES_256_GCM_SHA384
* ALPN, server accepted to use h2
* Server certificate:
*  subject: OU=Domain Control Validated; OU=PositiveSSL Multi-Domain; CN=sni189918.cloudflaressl.com
*  start date: Oct 11 00:00:00 2019 GMT 
*  expire date: Apr 18 23:59:59 2020 GMT
*  subjectAltName: host "www.jackalope.tech" matched cert's "*.jackalope.tech"
*  issuer: C=GB; ST=Greater Manchester; L=Salford; O=COMODO CA Limited; CN=COMODO ECC Domain Validation Secure Server CA 2
*  SSL certificate verify ok.
* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0 
* TLSv1.3 (OUT), TLS Unknown, Unknown (23):
* TLSv1.3 (OUT), TLS Unknown, Unknown (23):
* TLSv1.3 (OUT), TLS Unknown, Unknown (23):
* Using Stream ID: 1 (easy handle 0x7fffdd311580)
* TLSv1.3 (OUT), TLS Unknown, Unknown (23):
> GET /wp-json/wp/v2/pages?embed=true HTTP/2
> Host: www.jackalope.tech
> User-Agent: curl/7.58.0
> Accept: */* 
> Origin: http://test.com
> 
* TLSv1.3 (IN), TLS Unknown, Certificate Status (22):
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
* TLSv1.3 (IN), TLS Unknown, Unknown (23):
* Connection state changed (MAX_CONCURRENT_STREAMS updated)! 
* TLSv1.3 (OUT), TLS Unknown, Unknown (23):
* TLSv1.3 (IN), TLS Unknown, Unknown (23):
* TLSv1.3 (IN), TLS Unknown, Unknown (23): 
< HTTP/2 200 
< date: Wed, 04 Dec 2019 01:48:57 GMT
< content-type: application/json; charset=UTF-8 
< set-cookie: __cfduid=db1e114557c4065c3d0c55160e48acce71575424137; expires=Fri, 03-Jan-20 01:48:57 GMT; path=/; domain=.jackalope.tech; HttpOnly; Secure
< access-control-allow-credentials: true 
< access-control-allow-headers: Authorization, Content-Type
< access-control-allow-headers: *
< access-control-allow-methods: OPTIONS, GET, POST, PUT, PATCH, DELETE 
< access-control-allow-methods: GET,POST,OPTIONS,PUT
< access-control-allow-origin: http://test.com
< access-control-allow-origin: *
< access-control-expose-headers: X-WP-Total, X-WP-TotalPages
< allow: GET
< cf-railgun: direct (waiting for pending WAN connection)
< link: <https://www.jackalope.tech/wp-json/>; rel="https://api.w.org/" 
< set-cookie: mSLnQR=Lbz%40Au; expires=Thu, 05-Dec-2019 01:48:57 GMT; Max-Age=86400; path=/
< vary: Origin
< x-content-type-options: nosniff
< x-robots-tag: noindex
< x-wp-total: 4
< x-wp-totalpages: 1
< cf-cache-status: DYNAMIC
< set-cookie: VoatHl_fi=T3pHfNcsG; expires=Thu, 05-Dec-2019 01:48:57 GMT; Max-Age=86400; path=/
< set-cookie: xlGehNFCWs=V0v4ZowWna; expires=Thu, 05-Dec-2019 01:48:57 GMT; Max-Age=86400; path=/
< expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct" 
< server: cloudflare
< cf-ray: 53fa1efb4a85ecbb-DFW
< 
* TLSv1.3 (IN), TLS Unknown, Unknown (23):
* TLSv1.3 (IN), TLS Unknown, Unknown (23):
* TLSv1.3 (IN), TLS Unknown, Unknown (23):
* TLSv1.3 (IN), TLS Unknown, Unknown (23):
[{"id":3470,"date":"2019-11-28T05:49:33","date_gmt":"2019-11-28T05:49:33","guid":{"rendered":"https:\/\/www.jackalope.tech\/?page_id=3470"},"modified":"2019-11-29T04:06:36","modified_gmt":"2019-11-29T04:06:36","slug":"about","status":"publish","type":"page","link":"https:\/\/www.jackalope.tech\/about\/","title":{"rendered":"About"},"content":{"rendered":"\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile\"><figure class=\"wp-block-media-text__media\"><img src=\"https:\/\/www.jackalope.tech\/wp-content\/uploads\/system\/3_David_bc-e1512358889475-674x900.jpg\" alt=\"\" class=\"wp-image-1218\" srcset=\"https:\/\/www.jackalope.tech\/wp-content\/uploads\/3_David_bc-e1512358889475-674x900.jpg 674w, https:\/\/www.jackalope.tech\/wp-content\/uploads\/3_David_bc-e1512358889475-449x600.jpg 449w, https:\/\/www.jackalope.tech\/wp-content\/uploads\/3_David_bc-e1512358889475-768x1025.jpg 768w, https:\/\/www.jackalope.tech\/wp-content\/uploads\/3_David_bc-e1512358889475.jpg 800w\" sizes=\"(max-width: 674px) 100vw, 674px\" \/><\/figure><div class=\"wp-block-media-text__content\">\n<p> Hey, my name is Aslan. I&#8217;m a creative technologist living and working in  Austin, Texas. I am always refining my craft, and enjoy striving 
for  creative and innovative solutions to problems. At heart I view myself as  a craftsman, whether I&#8217;m working in code, or with pixels (or something  else!). My vocation is in civic tech, with a focus on  designing\/developing scalable systems that improve people&#8217;s lives and  empower citizens. I&#8217;m also interested in the contemporary edges of  creative expression in technology and in my spare time I work on  physical electronic art installations with my art collective, create  paintings using neural networks, or ramble about the button layouts of  microwaves at parties. <\/p>\n<\/div><\/div>\n\n\n\n<h3>Skills<\/h3>\n\n\n\n<h4>Development:<\/h4>\n\n\n\n<p>HTML5, CSS3, jQuery, Javascript, JSX, PHP, WordPress, Shader Forge, Bootstrap, Flexbox, and CSS Grid.<\/p>\n\n\n\n<h4>Design:<\/h4>\n\n\n\n<p>Interaction design, user research, visual design, art direction, creative and copy writing, prototyping, CSS animation, VR design and prototyping, 3D modeling and animation, texturing, illustration, concept art, and neural network mixed medium art.<\/p>\n\n\n\n<h4>Tools:<\/h4>\n\n\n\n<p>Adobe XD, Photoshop, Illustrator, Premiere, Lightroom, After Effects, Vscode, PHPstorm, WebStorm, Hyper.js, Git, Blender, zBrush, JIRA, Trello, Agisoft Photoscan, Meshlab, and Invision<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hey, my name is Aslan. I&#8217;m a creative technologist living and working in Austin, Texas. I am always refining my craft, and enjoy striving for creative and innovative solutions to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-parts\/plain.php","meta":[],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/3470"}],"collection":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/comments?post=3470"}],"version-history":[{"count":2,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/3470\/revisions"}],"predecessor-version":[{"id":3475,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/3470\/revisions\/3475"}],"wp:attachment":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/media?parent=3470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":15,"date":"2017-03-30T23:40:49","date_gmt":"2017-03-30T23:40:49","guid":{"rendered":"http:\/\/jackalopelocal.local\/?page_id=15"},"modified":"2017-05-27T00:15:56","modified_gmt":"* TLSv1.3 (IN), TLS Unknown, Unknown (23): 
* TLSv1.3 (IN), TLS Unknown, Unknown (23):
* TLSv1.3 (IN), TLS Unknown, Unknown (23):
2017-05-27T00:15:56","slug":"consultation","status":"publish","type":"page","link":"https:\/\/www.jackalope.tech\/consultation\/","title":{"rendered":"Free Consultation!"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-freelance.php","meta":[],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/15"}],"collection":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":0,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":11,"date":"2017-03-30T23:36:35","date_gmt":"2017-03-30T23:36:35","guid":{"rendered":"http:\/\/jackalopelocal.local\/?page_id=11"},"modified":"2017-05-10T00:35:03","modified_gmt":"2017-05-10T00:35:03","slug":"blog","status":"publish","type":"page","link":"https:\/\/www.jackalope.tech\/blog\/","title":{"rendered":"Blog"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"archive.php","meta":[],"featured_image_src":null,"featured_image_src_square":null,"_links":{"self":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/11"}],"collection":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":0,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":8,"date":"2017-03-30T19:33:04","date_gmt":"2017-03-30T19:33:04","guid":{"rendered":"http:\/\/jackalopelocal.local\/?page_id=8"},"modified":"2019-11-29T00:40:16","modified_gmt":"2019-11-29T00:40:16","slug":"home","status":"publish","type":"page","link":"https:\/\/www.jackalope.tech\/","title":{"rendered":"Home"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1258,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"index.php","meta":[],"featured_image_src":"https:\/\/www.jackalope.tech\/wp-content\/uploads\/DeepDimension\/JackalopeLogo.jpg","featured_image_src_square":"https:\/\/www.jackalope.tech\/wp-content\/uploads\/DeepDimension\/JackalopeLogo.jpg","_links":{"self":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/8"}],"collection":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":1,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":3474,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/pages\/8\/revisions\/3474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/media\/1258"}],"wp:attachm* TLSv1.3 (IN), TLS Unknown, Unknown (23): 
* Connection #0 to host www.jackalope.tech left intact
ent":[{"href":"https:\/\/www.jackalope.tech\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}]^C 
[1]+  Done                    curl -H "Origin: http://test.com" --verbose https://www.jackalope.tech/wp-json/wp/v2/pages?embed=true

EDT 2.5:

Also to answer your question about the undefined issue I get this

console.log(e),
r.data[o] = {
is404: !0,
isFetching: !1,
isReady: !1
}

Which seems to be a console log that gets thrown on a page 404 or something?

I cannot tell. If you want us to have a look at the error please provide us with this information:

It’s going to be much faster that way.

Do you mean the WordPress theme that the frontity theme is getting its info from?

The repo for that is here: https://github.com/jcklpe/Jackalope

But if you mean the WordPress installation itself that’s on a server. Iraq just a standard WordPress installation. Nothing special.

I do notice one thing: the cors error is from a request to post. But the link isn’t a post. It’s a page. Shouldn’t the routing for the page component makes its rest api request to a page?

I mean the Frontity project (not the Frontity theme) so we have the exact same environment than you. We don’t need the WordPress.

There’s no way to distinguish between a page or a post so Frontity tries both.

I’m testing on both a live server environment at hire-me.jackalope.tech and a local server environment on my local machine.

I just received a response from Dreamhost tech support and they said the issue was that stuff is getting routed through cloudflare and that I should do my fetch requests with https://www.jackalope.tech instead of https://jackalope.tech but I just changed that and it doesn’t seem to work. It also doesn’t make any sense as the issue sense I was able to successfully curl the https yesterday without issue.

I think the issue is because the json request is attempting post rather than page, because I’m not having any issues with posts.

This is weird because I set the page component in my logic before the Post component so I would assume that it would have checked for the data=Page conditional before checking for Post.

Is there some other reason the Page component might be making a request for posts instead of pages then?

I can’t know until you share with us your whole Frontity project. If there’s a reason for not doing so, please let us know.

Just a quick point:

I took a quick look at hire-me.jackalope.tech and it doesn’t seem to be a problem with pages. It seems that all the client calls are failing. You are not having any issues with posts if you go directly to the home because they are fetched in the server too, but if you start at https://hire-me.jackalope.tech/about/ it loads and if try to navigate to the home/posts it gives the same error.

Sorry, I don’t know what you mean exactly. It’s just a standard frontity server created using using npx frontity create {{server name}}. I just created a fresh server and installed my package locally (using npm install ./packages/desert-jackalope ) and was able to replicate the issue. The only thing I change in the server from the default install are the frontity settings which look like this:

const settings = {
  name: "test",
  state: {
    frontity: {
      url: "https://hire-me.jackalope.tech",
      title: "Aslan French",
      description: ""
    }
  },
  packages: [
    {
      name: "desert-jackalope",
      state: {
        theme: {
          menu: [
            ["personal blog", " https://www.jackalope.tech/"],
            ["about/contact", "/about/"]
          ],
          featured: {
            showOnList: true,
            showOnPost: true
          }
        }
      }
    },
    {
      //beginning of custom post types section
      name: "@frontity/wp-source",
      state: {
        source: {
          api: "https://www.jackalope.tech/wp-json",
          postTypes: [
            {
              type: "test_posts", // type slug
              endpoint: "test_posts", // REST API endpoint
              archive: "/" // link where this custom posts are listed
            }
          ]
          // taxonomies: [
          //   {
          //     taxonomy: "actors", // taxonomy slug
          //     endpoint: "actor", // REST API endpoint
          //     postTypeEndpoint: "movies" // endpoint from which posts from this taxonomy are fetched
          //   }
          // ]
        }
      }
    }, //end of custom post types section
    // {
    //   name: "@frontity/wp-source",
    //   state: {
    //     source: {
    //       api: "https://test.frontity.io/wp-json"
    //     }
    //   }
    // },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
};

export default settings;

And the package.json which looks like this:

{
  "name": "test-server",
  "version": "1.0.0",
  "private": true,
  "description": "Frontity project",
  "keywords": [
    "frontity"
  ],
  "scripts": {
    "dev": "frontity dev",
    "build": "frontity build",
    "serve": "frontity serve"
  },
  "prettier": {},
  "dependencies": {
    "@frontity/core": "^1.4.0",
    "@frontity/html2react": "^1.1.14",
    "@frontity/mars-theme": "./packages/mars-theme",
    "@frontity/tiny-router": "^1.0.17",
    "@frontity/wp-source": "^1.4.2",
    "desert-jackalope": "file:packages/desert-jackalope",
    "frontity": "^1.4.2"
  }
}

Everything else is just a standard install.

Right, and when you navigate from about to the home/posts archive it’s loading a page right?

Looking at the CORS error it says the url for the request that failed was:

https://jackalope.tech/wp-json/wp/v2/posts?_embed=true&slug=about

If you visit https://jackalope.tech/wp-json/wp/v2/posts?_embed=true&slug=about in your browser you get the following:

But if you go to https://jackalope.tech/wp-json/wp/v2/pages?_embed=true&slug=about

you get the following:

Which is why I think the issue has to do with Frontity trying to make a request for a post rather than for a page.

Yeah… this is def some kind of issue related to the pages versus posts distinction, because

  1. I have completely stripped the VPS apache server of redirects, and I’ve put all the necessary stuff to allow for CORS.
  2. I know I’ve done this correctly because I can curl or visit in my browser https://jackalope.tech/wp-json/wp/v2/pages?_embed=true&slug=about no problem
  3. but I get nothing back when I try to curl or visit in my browser https://jackalope.tech/wp-json/wp/v2/posts?_embed=true&slug=about (which is the url that the CORS error contains).

And I can see in the WP API documentation here that there’s a clear difference between page and post calls:

https://developer.wordpress.org/rest-api/reference/posts/
https://developer.wordpress.org/rest-api/reference/pages/

And this isn’t just my set up. It’s also true of the test frontity server, see:

this returns nothing:
https://test.frontity.io/wp-json/wp/v2/posts?_embed=true&slug=contact-form

while this returns the proper content:
https://test.frontity.io/wp-json/wp/v2/pages?_embed=true&slug=contact-form

I’m going to point my theme at the test server and have it try to hit one of the pages and I bet it will result in the same errors.

EDIT:

It doesn’t give the same errors. Except, not quite!

I changed it over to the test server and it won’t load the archive page (because I have it targeting “test_posts” but it is loading the “about us” page correctly.

Looking over the frontity settings though I realize that the syntax for specifying test posts goes like this:

state: {
        source: {
          api: "https://www.jackalope.tech/wp-json",
          postTypes: [
            {
              type: "test_posts", // type slug
              endpoint: "test_posts", // REST API endpoint
              archive: "/" // link where this custom posts are listed
            }
          ]
          // taxonomies: [
          //   {
          //     taxonomy: "actors", // taxonomy slug
          //     endpoint: "actor", // REST API endpoint
          //     postTypeEndpoint: "movies" // endpoint from which posts from this taxonomy are fetched
          //   }
          // ]
        }
      }
    }, //end of custom post types section

And I see in the wp-source documentation:

  • archives: isArchive

  • taxonomy: isTaxonomy

    • category: isCategory

    • tag: isTag

    • deal: isDeal

  • author: isAuthor

  • postTypeArchive: isPostTypeArchive

    • post: isHome , isPostArchive ( isFrontPage optional)

    • product: isProductArchive

  • date: isDate

  • postTypes: isPostType

    • post: isPost

    • page: isPage ( isFrontPage optional)

    • product: isProduct

    • media: isMedia , isAttachment

  • 404: is404

I notice that IsPost and isPage are sub categories it looks like of isPostType (at least that’s what the bullets seem to imply to me).

So I take this to mean that perhaps the reason why isPage is not grabbing a page is because that hasn’t been specified in the frontity.settings.js file perhaps?

EDIT2:

Yeah… so I’ve got my app pointed to frontity’s test server and it’s having zero problem with posts and pages.

It’s gotta be something with my server but I can’t figure it out.

Found the problem! Having tested things against the test site API, I pushed support to really dig into the issue and they finally fixed the problem! I had this in my .htaccess:

 1 Header add Access-Control-Allow-Origin: "*"
 2 Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,PUT"
 3 Header add Access-Control-Allow-Headers: "*"

and the commented out Header add Access-Control-Allow-Origin: "*" and that fixed it!

So now my .httaccess contains this:

 1 # Header add Access-Control-Allow-Origin: "*"
 2 Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,PUT"
 3 Header add Access-Control-Allow-Headers: "*"
1 Like

I’m glad you’ve finally found the issue :slight_smile:

CORS issues are always though.

We are going to include an option to add the CORS headers to our PHP plugin, but sometimes those headers get overwritten by the hosting.

1 Like