Feedback on getting started with the usage on Shopify

Issues
1

Hi Guys. We are just getting started with Plasmic, and very excited about the potential.
Our initial usecase is to render plasmic pages on the backend, and inject into shopify templates / pages, as that is our current front-end platform

Issues we have seen so far:
• PlasmicRootProvider fails if loader is not provided. In our case we are prefetching the asset, and only want to use prefetched data for rendering. This line fails in loader-react: var loader = props.loader.__internal;, which is in PlasmicRootProvider
• Prefetched code bundles have all code in the modules.browser array. When rendering on server-side, this code needs to be in modules.server. Was easy to mod the bundle to move them over, but I probably spent 2-3 hours debugging your software before I found this…
◦ Some extra context: We are using React renderToString, and this will not wait for any component load… This is one of the reasons all data must be prefetched
• We created a minimal “Hello World” bundle, and it is larger than we expected. Seems like e.g. react is bundled in.
◦ Is there any way to un-bundle React (and possibly other libs) that we are already including on “the outside”, to prevent them from being included multiple times?
We are able to get around all of these, but wanted to give feedback, because the “getting started” experience was a bit rough.

Anyways, thanks for a great product!

2

Hi! Could you go into more specifics about what you’re trying to do here? Like what is your set up / framework / etc.?

3

I’m having a very similar problem to the first bullet point here, I’m trying to use PlasmicRootProvider for a codegen project that needs component-level SSR but getting the __internal error due to not calling the Loader

Our setup is something like: Using Plasmic Sync to publish components and pages to our Next.js repo. Then wrapping the _app.js with a PlasmicRootProvider as seen in the code below in order to use Prepass

This page hints that the PlasmicRootProvider should work without a loader, not sure if I’m missing something?

Much love to Plasmic :purple_heart:

import {
PlasmicRootProvider,
extractPlasmicQueryData
} from '@plasmicapp/loader-nextjs';

function Page(props) {
let { Component, pageProps } = props;

return (
<PlasmicRootProvider>
<Component {...pageProps} />
</PlasmicRootProvider>
);
}

export default Page;

4

Got around this by adding a loader={PLASMIC} prop to the Provider, although I’m not sure what the loader is doing since the code is already imported into the filesystem :thinking_face:

5

Hi! You shouldn’t need @plasmicapp/loader-nextjs at all if you are using codegen… instead, you should use the PlasmicRootProvider from react-web:

import {PlasmicRootProvider} from "@plasmicapp/react-web";

...
6

I see, thanks for the info @chungwu!