Plasmic codegen providers

I’m using codegen with next.js. But It wrap all my pages with these providers in server component. That doesn’t work on server side. Next.js with app router. How to avoid it?

Hey @uladzislau_bairash

Could you please explain specifically what doesn’t work on server side and if you are receiving any specific errors?

Thanks

UnnamedGlobalGroupOfVariantsContext, SegmentContext - doesn’t work on server side. I need to move it to layout.tsx or client-page.tsx manually for each pages.

Check your code at page.tsx:35.
⨯ Error: Unsupported Server Component type: undefined
at stringify ()
⨯ Error: Unsupported Server Component type: undefined
at stringify ()
digest: “2163256224”

Hi @uladzislau_bairash

Could you please share your plasmic.json file so I can review the configuration accordingly.

{
  "platform": "nextjs",
  "code": {
    "lang": "ts",
    "scheme": "blackbox",
    "reactRuntime": "classic"
  },
  "style": {
    "scheme": "css",
    "defaultStyleCssFilePath": "../styles/plasmic__default_style.css"
  },
  "images": {
    "scheme": "public-files",
    "publicDir": "../public",
    "publicUrlPrefix": "/"
  },
  "tokens": {
    "scheme": "theo",
    "tokensFilePath": "plasmic-tokens.theo.json"
  },
  "srcDir": "./components",
  "defaultPlasmicDir": "./plasmic",
  "projects": [
    {
      "projectId": "mi43zEdS25m4jJJB4fWzDF",
      "projectName": "LiveArt Web3 Platform | Dev - Vlad",
      "version": "latest",
      "components": [
        {
          "id": "z2cNgGnyr5S-",
          "name": "CreatorHub",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCreatorHub.tsx",
          "importSpec": {
            "modulePath": "../app/creatorhub/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCreatorHub.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/creatorhub",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCreatorHubServer.tsx",
            "clientModulePath": "../app/creatorhub/page-client.tsx"
          }
        },
        {
          "id": "qn1mKObfJgwv",
          "name": "ArtToken",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicArtToken.tsx",
          "importSpec": {
            "modulePath": "../app/art-token/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicArtToken.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/art-token",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicArtTokenServer.tsx",
            "clientModulePath": "../app/art-token/page-client.tsx"
          }
        },
        {
          "id": "9CMmwp_HE0o9",
          "name": "Dashboard",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicDashboard.tsx",
          "importSpec": {
            "modulePath": "../app/dashboard/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicDashboard.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/dashboard",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicDashboardServer.tsx",
            "clientModulePath": "../app/dashboard/page-client.tsx"
          }
        },
        {
          "id": "22ZgElETBvB1",
          "name": "DigitalArtCollections",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicDigitalArtCollections.tsx",
          "importSpec": {
            "modulePath": "../app/collections-all/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicDigitalArtCollections.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/collections-all",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicDigitalArtCollectionsServer.tsx",
            "clientModulePath": "../app/collections-all/page-client.tsx"
          }
        },
        {
          "id": "QwrhB3F3onDz",
          "name": "CardChenMan01",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardChenMan01.tsx",
          "importSpec": {
            "modulePath": "CardChenMan01.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardChenMan01.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "Fmso8-QbFldQ",
          "name": "CardAdamSpizak",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardAdamSpizak.tsx",
          "importSpec": {
            "modulePath": "CardAdamSpizak.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardAdamSpizak.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "7hGWMCArv0qG",
          "name": "CardHuangYuxing",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardHuangYuxing.tsx",
          "importSpec": {
            "modulePath": "CardHuangYuxing.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardHuangYuxing.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "3pxJjSOn9YEM",
          "name": "XCard",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicXCard.tsx",
          "importSpec": {
            "modulePath": "../app/liveart-pass/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicXCard.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/liveart-pass",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicXCardServer.tsx",
            "clientModulePath": "../app/liveart-pass/page-client.tsx"
          }
        },
        {
          "id": "PBHeHySu2QNW",
          "name": "Terms",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicTerms.tsx",
          "importSpec": {
            "modulePath": "../app/terms/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicTerms.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/terms",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicTermsServer.tsx",
            "clientModulePath": "../app/terms/page-client.tsx"
          }
        },
        {
          "id": "iOupCkl8E9gk",
          "name": "TBuyerRegistration",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicTBuyerRegistration.tsx",
          "importSpec": {
            "modulePath": "../app/buyer-agreement/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicTBuyerRegistration.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/buyer-agreement",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicTBuyerRegistrationServer.tsx",
            "clientModulePath": "../app/buyer-agreement/page-client.tsx"
          }
        },
        {
          "id": "QfT559myzO5d",
          "name": "CreatorhubSection",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCreatorhubSection.tsx",
          "importSpec": {
            "modulePath": "CreatorhubSection.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCreatorhubSection.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "aFYb5Alr7YuA",
          "name": "Partnerwithus",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPartnerwithus.tsx",
          "importSpec": {
            "modulePath": "Partnerwithus.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPartnerwithus.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "2m6NECQxXpoM",
          "name": "TAda",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicTAda.tsx",
          "importSpec": {
            "modulePath": "../app/ada/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicTAda.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/ada",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicTAdaServer.tsx",
            "clientModulePath": "../app/ada/page-client.tsx"
          }
        },
        {
          "id": "zxvSL8iUidvR",
          "name": "CardYmj01",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardYmj01.tsx",
          "importSpec": {
            "modulePath": "CardYmj01.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardYmj01.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "1k_1Wg2BXPSB",
          "name": "CardIcaCorey",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardIcaCorey.tsx",
          "importSpec": {
            "modulePath": "CardIcaCorey.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardIcaCorey.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "TX3xog99fA49",
          "name": "CardEDigital",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardEDigital.tsx",
          "importSpec": {
            "modulePath": "CardEDigital.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardEDigital.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "5fynuWAc8Irl",
          "name": "CardBdWhiteXJpo",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardBdWhiteXJpo.tsx",
          "importSpec": {
            "modulePath": "CardBdWhiteXJpo.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardBdWhiteXJpo.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "VO_-xcyM9la9",
          "name": "CardCosmicGold",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardCosmicGold.tsx",
          "importSpec": {
            "modulePath": "CardCosmicGold.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardCosmicGold.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "WGN4hjkOL9l1",
          "name": "CardLcoa",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardLcoa.tsx",
          "importSpec": {
            "modulePath": "CardLcoa.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardLcoa.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "-K2iC9J1oUjE",
          "name": "CardChenMan2",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardChenMan2.tsx",
          "importSpec": {
            "modulePath": "CardChenMan2.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCardChenMan2.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "kPoPnOrKWSHw",
          "name": "Button",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicButton.tsx",
          "importSpec": {
            "modulePath": "Button.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicButton.css",
          "scheme": "blackbox",
          "componentType": "component",
          "plumeType": "button"
        },
        {
          "id": "d7j9eisy77F7",
          "name": "PressImages",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPressImages.tsx",
          "importSpec": {
            "modulePath": "PressImages.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPressImages.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "-a107e0g3GUW",
          "name": "Card",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCard.tsx",
          "importSpec": {
            "modulePath": "Card.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicCard.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "YkDsOtsJI39T",
          "name": "Press",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPress.tsx",
          "importSpec": {
            "modulePath": "../app/press/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPress.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/press",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPressServer.tsx",
            "clientModulePath": "../app/press/page-client.tsx"
          }
        },
        {
          "id": "aH660rPtKRDa",
          "name": "Partners",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPartners.tsx",
          "importSpec": {
            "modulePath": "../app/partners-old/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPartners.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/partners-old",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPartnersServer.tsx",
            "clientModulePath": "../app/partners-old/page-client.tsx"
          }
        },
        {
          "id": "JSXSMGT2CX7y",
          "name": "ButtonsYmjPrints",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicButtonsYmjPrints.tsx",
          "importSpec": {
            "modulePath": "ButtonsYmjPrints.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicButtonsYmjPrints.css",
          "scheme": "blackbox",
          "componentType": "component"
        },
        {
          "id": "f_-FcS7ERHkU",
          "name": "YueMinjunPrints",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicYueMinjunPrints.tsx",
          "importSpec": {
            "modulePath": "../app/yue-minjun/prints/boundless/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicYueMinjunPrints.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/yue-minjun/prints/boundless",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicYueMinjunPrintsServer.tsx",
            "clientModulePath": "../app/yue-minjun/prints/boundless/page-client.tsx"
          }
        },
        {
          "id": "nXtnEIsbvYGQ",
          "name": "Christies",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicChristies.tsx",
          "importSpec": {
            "modulePath": "../app/partnerships/christies/web3-renaissance-course/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicChristies.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/partnerships/christies/web3-renaissance-course",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicChristiesServer.tsx",
            "clientModulePath": "../app/partnerships/christies/web3-renaissance-course/page-client.tsx"
          }
        },
        {
          "id": "2WxI1N-qMvCA",
          "name": "PrivateSales",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPrivateSales.tsx",
          "importSpec": {
            "modulePath": "../app/private-sales/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPrivateSales.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/private-sales",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicPrivateSalesServer.tsx",
            "clientModulePath": "../app/private-sales/page-client.tsx"
          }
        },
        {
          "id": "embmr9Vb-F9W",
          "name": "YmjHuman",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicYmjHuman.tsx",
          "importSpec": {
            "modulePath": "../app/yue-minjun/human/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicYmjHuman.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/yue-minjun/human",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicYmjHumanServer.tsx",
            "clientModulePath": "../app/yue-minjun/human/page-client.tsx"
          }
        },
        {
          "id": "hIcFAZ3YretP",
          "name": "AirDrop",
          "type": "managed",
          "projectId": "mi43zEdS25m4jJJB4fWzDF",
          "renderModuleFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicAirDrop.tsx",
          "importSpec": {
            "modulePath": "../app/airdrop/page.tsx"
          },
          "cssFilePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicAirDrop.css",
          "scheme": "blackbox",
          "componentType": "page",
          "path": "/airdrop",
          "rsc": {
            "serverModulePath": "plasmic/live_art_web_3_platform_dev_vlad/PlasmicAirDropServer.tsx",
            "clientModulePath": "../app/airdrop/page-client.tsx"
          }
        },
    ]
  },
  "wrapPagesWithGlobalContexts": false,
  "nextjsConfig": {
    "pagesDir": "../app"
  },
  "cliVersion": "0.1.338",
  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.338/dist/plasmic.schema.json"
}

Hi @uladzislau_bairash, I’ve confirmed seeing a similar issue concerning the generated context files (though not the exact same). Do you mind trying to edit the context files and adding the following component, then using <SegmentContextProvider> in place of <SegmentContext.Provider>?

export function SegmentContextProvider(props: React.PropsWithChildren<{
  value: SegmentValue | undefined;
}>) {
  return (
    <SegmentContext.Provider value={props.value}>
      {props.children}
    </SegmentContext.Provider>
  );
}

I believe Next.js introduced this bug recently… Error when using namespace/compound components in React Server Component · Issue #75192 · vercel/next.js · GitHub

Thanks. I did with different approach. I removed this context in generated pages.tsx. And moved it to layout.tsx. But I believe that it will be fixed. Then it will generate automatically without manipulations

Hi @uladzislau_bairash, we have fixed the issue so it works out-of-the-box when you generate now. The context provider component is now generated alongside the context to workaround the Next.js issue.