Problems have appeared when raising the back and the front to production

🙋Get Help
1

Hi,

I have problems that I am not able to solve, frontity is going to kill me :frowning:

My website is the following: https://manuwweb.com/ so you can see the problems on the console.

I have these two components:

const Projects = ({ state }) => {
    const data = state.source.get('/');

    return ( data.isReady &&
        <section className="projects-cont">
            <StylePortfolio />
            <h1>Portfolio</h1>
            <div className="projects">
            {
                
                    data.items.map(({ id }) => {
                        const post = state.source.post[id];

                        return (
                            <>
                                <div className="article_cont">

                                    <article className="projects__article" key={id}>
                                        <Link link={post.link} >
                                            <Featured
                                                imgID={post.featured_media}
                                                element={"post"}
                                            />
                                            <BsEye className="eye-portfolio" />

                                        </Link>
                                    </article>
                                    <Link link={post.link}>
                                        <h3
                                            dangerouslySetInnerHTML={{ __html: post.title.rendered }}
                                        ></h3>
                                    </Link>
                                </div>
                            </>
                        )
                    })
                }
            </div>
        </section>
    );
}

export default connect(Projects);

import { connect } from 'frontity';

const Featured = ({state, imgID, element}) => {
    const media = state.source.attachment[imgID];
    
    const data = state.source.get('/');

    return ( data.isReady &&
        <>
            { element === "post" &&
                <img
                    key={imgID}
                    src={media.media_details.sizes.medium_large.source_url}
                    alt={media.alt_text}>
                </img>
            }
        </>
    );
}
 
export default connect(Featured);

As you can see on the console: Cannot read property ‘media_details’ of undefined

but if I pass a console.log () in the same component, this correctly prints the information

console.log(media.media_details.sizes.medium_large.source_url)

I do not know what could be causing all this, I can give access to repository so that I can see the code better.

Thank you.

2

try visit this page directly

https://manuwweb.com/portfolio/

there are no attachments in the state.
(go to your console and type frontity.state.source and you will see)

I suggest fixing that first

3

There is already response when querying with frontity.state.source.

but the error persists.

4

look at this line in the original mars theme

const FeaturedMedia = ({ state, id }) => {
  const media = state.source.attachment[id];

  if (!media) return null;  // <= stops it breaking

you need to allow the data time to finish loading. Remember react re-renders when incoming data changes.

I would probably also swap these 2 lines around

  const media = state.source.attachment[imgID];
  const data = state.source.get('/');

although I’m assuming the attachments get populated from the index page