Help with Rendering Custom Pages

I was reading through your documentation on how to render custom pages. I am trying to take specific published page content and then render it with added custom code on the Site side (E.g. iframe, other js stuff). I have noticed that a component is missing @webiny/app-page-builder/components/Page that is referred to in the documentation.

Below is the code I think should work but what happens is that I see it for a brief second and then I am shown a 404 page. What am I doing wrong? Is this because of the missing component?

Thanks

    import React from "react";
    import { Route } from "@webiny/react-router";
    import { Page } from "@webiny/app-page-builder/site/components/Page";

    function MyComponent() {
      return (
        <div>
          <h1>This is my page</h1>
          <div>
            <Page url="/jacob-page" />
          </div>
        </div>
      );
    }

       
    export default {
            type: "route",
            name: "pb-route-test",
            route: (
                <Route
                exact
                path="/static/test-page"
                render={({ location }) => MyComponent()}
                />
            )
        }

Hi @JCravinho,

regarding the missing component, you’re right. The import path was actually incorrect in the docs article and I’ve made the necessary amends immediately (docs article).

Moving on to the code (BTW, in which you’ve used the correct import statement for the Page component), this looks alright to me.

But I think what’s wrong here is that you’re including all of the page builder plugins. The problem with this is it automatically enables automatic loading of pages (on every URL change), and if you’re rendering pages on your own via the mentioned Page component, you don’t need it really (and it kinda conflicts with what you’re trying to do).

In short, in the apps/site/src/plugins/index.js file, try replacing the import pageBuilderPlugins from "@webiny/app-page-builder/site/plugins"; with the following import: import renderPlugins from "@webiny/app-page-builder/render/presets/default";.

So basically, we won’t be including all of the plugins, but just plugins related to rendering page elements.

Oh BTW, I just realized the thing I just explained here is missing in the docs, so I will add it ASAP.

Can you try that, please?

Let me know how that went and if it still doesn’t work, let me know. You can also catch me on Gitter (profile name doitadrian).

Thanks a lot!