Styles are missing when navigating via link

Issues
1

I’m running into an issue with styling … i’m not sure if its a NextJS or Plasmic issue but I’m hoping someone can provide some pointers. I have pages that load just fine with correct styling if I access them via a url directly, but the styling is missing if I navigate to the page via a link. Everything goes back to normal if i refresh the entire page. (I’m using plasmic loader and overriding slot props) I’m guessing the issue is due to how client side navigation is being handled but not sure what exactly the issue is

2

Can you share a snippet of your page rendering code? Are you using the catchall page code in the docs?

3 
 export default function Shop(props: { plasmicData: ComponentRenderData, shopifyData: any }) { <PlasmicRootProvider loader={PLASMIC} prefetchedData={props.plasmicData}>
            <PlasmicComponent component='Shop' componentProps={{
                productListing: {
                    root: { render: () => <PlasmicComponent component='ColumnContainer' componentProps={{root:{wrapChildren:(children:any)=>{return (<>{props.shopifyData.products.edges.map(({node:product}:ProductHolder,index:number)=>{
                        console.dir(product,{depth:2})
                        return (<PlasmicComponent key={index} component='Column' componentProps={{root:{wrapChildren:(card:any)=>{
                            return (<PlasmicComponent component='ProductCard' 
                            componentProps={{
                              root:{
                                wrapChildren:(children:any)=>{
                                  return (<Link passHref={true} href={`/item/${product.handle}`}  ><a>{children}</a></Link>)
                                }
                              },
                                cardSize:"medium",
                                productName:product.title,
                                productPrice:`GHS ${product.priceRange.maxVariantPrice.amount}`,
                                productImage:<img style={{width:'100%',height:'auto'}}src={product.images.edges[0].node.transformedSrc} 
                                />
                            }}/>)
                        }}}}/>)
                    })}</>)}}}}/>}
                }
            }} />
        </PlasmicRootProvider>}
4

I’m no longer using the catch all page

5

:thinking_face: Can you try blowing away the .next folder in the project root and see if it helps?

6

ok … ill try that .

7

that didn’t help

8

though the issue seems to only affect the dynamic routes

9

hmm do you mean the [...] pages? Like if you go from a static to a dynamic route?

10

yes

11

thanks; can you paste in some code for the dynamic route?

12 
import {
  PlasmicRootProvider,
  PlasmicComponent,
  ComponentRenderData
} from '@plasmicapp/loader-nextjs';

import { exampleProductData } from '../../utils/exampleData';
import { PLASMIC } from '../../plasmic-init';
import * as React from 'react'

import { GetStaticProps } from "next";
import { doGraphqlQuery } from '../../utils/graphqlQuery';

// import "../../styles/empty"

export type ProductData = typeof exampleProductData.data.products.edges[number]["node"];
export type ProductHolder = { node: ProductData }



export default function Item(props: { plasmicData: ComponentRenderData, shopifyData: any }) {
  
  return (
    <PlasmicRootProvider loader={PLASMIC} prefetchedData={props.plasmicData}>
      <PlasmicComponent component='Item' componentProps={{
        singleProduct: {
          props: {
            productName:props.shopifyData.title,
            productPrice:`GHS ${props.shopifyData.priceRange.maxVariantPrice.amount}`,
            color: props.shopifyData.options.filter((e:any)=>e.name==="Color")[0].values[0],
            fabric: props.shopifyData.options.filter((e:any)=>e.name==="Fabric")[0].values[0],
            image1: <img style={{ width: '100%' }} src={props.shopifyData.images.edges[0].node.transformedSrc} />,
            image2: <img style={{ width: '50%' }} src={props.shopifyData.images.edges[1].node.transformedSrc} />,
            image3: <img style={{ width: '50%' }} src={props.shopifyData.images.edges[2].node.transformedSrc} />
          }
        }
      }} />
    </PlasmicRootProvider>
  )
}
13

this page ([handle].tsx) is responsible for rendering the Links from the previous snippet

14

can you show the getStaticProps() of this page too?

15

:face_palm::skin-tone-5:

16 
export const getStaticProps: GetStaticProps = async (context) => {
  // You can pass in multiple page paths or component names.
  console.dir(context.params?.handle)
  const plasmicData = await PLASMIC.fetchComponentData('Shop');
  let p = context.params?.handle as string
  const shopifyData = await getProduct(p);
  console.log(shopifyData);
  return {
    props: {
      plasmicData,
      shopifyData

    }
  };
};
17

the fetchComponentData call has the wrong component

18

i’ve just changed that in my code and it seems to work now

19

though I’m surprised that the page was ever able to load

20

:open_mouth: