Styles are missing when navigating via link

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

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

 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 (<>{{node:product}:ProductHolder,index:number)=>{
                        return (<PlasmicComponent key={index} component='Column' componentProps={{root:{wrapChildren:(card:any)=>{
                            return (<PlasmicComponent component='ProductCard' 
                                  return (<Link passHref={true} href={`/item/${product.handle}`}  ><a>{children}</a></Link>)
                                productPrice:`GHS ${product.priceRange.maxVariantPrice.amount}`,
                                productImage:<img style={{width:'100%',height:'auto'}}src={product.images.edges[0].node.transformedSrc} 
            }} />

I’m no longer using the catch all page

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

ok … ill try that .

that didn’t help

though the issue seems to only affect the dynamic routes

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


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

import {
} 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[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: {
            productPrice:`GHS ${props.shopifyData.priceRange.maxVariantPrice.amount}`,
            color: props.shopifyData.options.filter((e:any)=>"Color")[0].values[0],
            fabric: props.shopifyData.options.filter((e:any)=>"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} />
      }} />

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

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


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


the fetchComponentData call has the wrong component

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

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