Partially white page for custom content type

Plone Support Customizing Plone
1

I have a problem here that I just can't get any further, maybe someone can give me a tip on what I can look into.

I created a content type "Publications" with all possible fields such as title, authors, abstract, publication_year and many more.
For the list I created a variation of the listing block in which each publication is listed in a semantic-ui card element. The title then refers to the respective item using UniversalLink:

<UniversalLink href={item['@id']} title={item['@type']}>
<h3 className='PublicationsTitle'>{item.title ? item.title : item.id}</h3>
</UniversalLink>

When I click on this link it often happens that the correct page opens according to the URL, but the page is displayed blank. One or sometimes several reloads are necessary for the page to be displayed.
What's noticeable is that it's much worse on a Mac with Safari. When you reload the page you see the page flash very briefly and then you see nothing again with each reload.

The browser cache was repeatedly deleted for testing purposes, unfortunately without any improvement.

The query via the API (with ++api++) IMHO delivers the expected answer with all fields of the item.

To be on the safe side, here is the component for displaying the publication item that is registered in the config.cs as contentTypesViews:

config.js

 config.views = {
     ...config.views,
     contentTypesViews: {
       ...config.views.contentTypesViews,
       people: PeopleView,
       publication: PublicationView,
     },
   };

import React from 'react';
import { DefaultView } from '@plone/volto/components';
import { flattenToAppURL } from '@plone/volto/helpers';
import { Container, Grid, Image, Segment } from 'semantic-ui-react';

import './Publication.css';

const PublicationView = (props) => {
  const { content } = props;
  
  if (!content.abstract) {
    content.abstract = ' ';
    return null;
  }
  
  
  return (
    <Container id="view-wrapper" className="PublicationView">
      <Grid columns={2}>
        
        <Grid.Row>
            <Grid.Column>

            <h2 className='PublicationsTitle'>{content.title ? content.title : content.id}</h2>
            <br></br>
      
        
        <hr></hr>
        
        
        <span className="PublicationsInfo">
        <p> 
            <h3> Authors: <br></br>
                {content.publication_authors && content.publication_authors.join(', ')} <br></br>
            </h3>
        </p>
        <p>
            <h3>
                Type:  <br></br>
                {content.type_of_publication && content.type_of_publication.title}
            </h3>
        </p>
        <p>
            <h3>
                Published in: <br></br>
                {content.publication_published_in && content.publication_published_in}
            </h3>      

        </p>            
        <p>
            <h3>
                Year: <br></br>
                  {content.publication_year && content.publication_year.title }
            </h3>      

        </p>            
        </span>
        <hr></hr>
        <span>

          {content.publication_doi && 
            <h3>
              DOI: <br></br>
               {content.publication_doi}
            </h3>
          }

          {content.publication_bibtex_string && 
            <h3>
              BibTeX string: <br></br>
               {content.publication_bibtex_string}
            </h3>
          }

          {content.publication_pdf_file && 
            <h3>
              <a href={content.publication_pdf_file + '/@@display-file/file' }> Publication PDF</a>
            </h3>
          }

          {content.publication_funding && 
            <h3>
              Funding: <br></br>
               {content.publication_funding}
            </h3>
          }


        </span>
        </Grid.Column>
        <Grid.Column>
          <Grid>
            <Grid.Row className='PublicationTeaserImage'>
                <Grid.Column width={6}>
                  {content.publication_teaser_image1 && (
                    <Image 
                      src={flattenToAppURL(content.publication_teaser_image1.scales.preview.download)}
                      size="medium"
                      floated="left"
                    />
                )}
                </Grid.Column>
                
                <Grid.Column width={6}>
                {content.publication_teaser_image2 && (
                    <Image 
                      src={flattenToAppURL(content.publication_teaser_image2.scales.preview.download)}
                      size="medium"
                      floated="left"
                    />
                )}
                </Grid.Column>
              
            </Grid.Row>

            <Grid.Row>

                    
          <Segment className='PublicationAbstract'>
            {content.publication_abstract.data && <div dangerouslySetInnerHTML={{ __html: content.publication_abstract.data }} />}
          </Segment>
          
          </Grid.Row>
            </Grid>
          </Grid.Column>
        </Grid.Row>
      </Grid>
      <DefaultView {...props} />
    </Container>
  );
};
export default PublicationView;

What else can I look for?

2

Are there any clues in the console in the browser dev tools?
You might also be able to use the React Dev Tools (React Developer Tools - Chrome Web Store) to check what components are rendered.

3

You have a condition there for the content.abstract.

Do you have any errors in the browser inspector developer console?

4

This little workaround for content.abstract dates back to the beginning of the development of this component. I can actually remove it now.

I also regularly use the React Developer tools to check the available fields and the paths within content or item. But I have to admit that I probably haven't used all the options yet.

I don't see any obvious errors and I don't see any difference in the tools between the state when the page is displayed correctly and the state when the page is displayed blank.

But I remember seeing PublicationView and publicationListingTemplate in the tree and was also able to search for these components.
Currently, I no longer get any results when searching for these, neither when the page is displayed correctly nor when it is empty.

But I actually always find a component whose content contains the data of the respective publication.

5

Oops, after I removed the condition for content.abstract everything seems to work and I see the PublicationView component again in the developer tools... Thank you for the tip, I could have searched for a long time