Rendering content not correct (missing functions, images)

Builder content link
Both pages are the same - but one is rendered correctly. One is on our frontend site and loaded as raw html between our react header an footer. and the other page is rendered as stand alone page.

Builder public api key
d0689e89408f48c29d9edda8d29a6894

What are you trying to accomplish
We want to integrate builder in our react frontend site. So that all the builder content is being loaded between the react footer and header which we created in code.
But at the moment the page isn’t rendered 100% correctly, some styles + error with js functions (they are not working). For example a slider doesn’t go to the next slide and blocks are not rendered fully, images src are missing.
In the video link it will explained in more details.

Would it be possible to have a call about this problem with our developers?

Screenshots or video link

Code stack you are integrating Builder with
react

Hi @Geert,

Since you are running on localhost, I am unable to see the published content to reproduce these issues on my end. Do you have a deployed version that you can share? If not, you could deploy with Vercel or share your code so we can test it on our end. We do not offer video/phone support for our free, basic, and growth plan subscriptions but if you can share the details above we would be happy to help investigate!

Hi Maddy,

We have the page deployed on https://dev.uwassistent.nl/
Where you can see the page and. problems mentioned in the video earlier. Thanks for looking into it.

Thanks for sharing the live page! I am able to reproduce the styling issues as well. If you could share your code so we can see how you are passing in content too, that would be great!

While inspecting the live page I noticed, specifically in the Populaire diensten section, that the content is not nested correctly which is causing the text to not be within the box under the image. I also noticed that there are a ton of emotion css divs being added throughout the Builder content. It is possible that this could be contributing towards some of the issues you’re seeing on the page but we will be able to investigate further once you share your code.

Your Builder entry doesn’t use your live site as the preview URL. I would recommend adding your live site as the preview URL, it will allow for accurate previewing and editing in Builder and also inherit your sites styles.

Hi Maddy,

Sorry for my very late reply.

I changed the preview url for the page model now to our current live site: dev.uwassistent.nl. Now it only shows a lot of time error with loading / slow reaction when I try to edit an element on a page.

I didn’t saw an option to add an attachment in this reply, so below will be the code from our frontend and backend of builder integration.

The problem is only with our content in the model called page. Those pages are rendered without the js functions and images. The content in the model called landingpages are rendered correctly.

Frontend 2 files:

import React from 'react';
import { useLocation } from 'react-router-dom';
import { useQuery } from '@apollo/client';

import ErrorQuery from 'core/ErrorQuery/ErrorQuery';
import Loader from 'core/Loader/Loader';
import RawHtml from 'core/RawHtml/RawHtml';

import { GET_BUILDER_IO_PAGE } from './api/query';

const BuilderPage = () => {
  // Data type from query
  const dataType = 'builderIo';

  const location = useLocation();
  const builderUrl = location.pathname;

  const { data, loading, error } = useQuery(GET_BUILDER_IO_PAGE, {
    variables: { builderUrl },
    fetchPolicy: 'no-cache',
  });

  const dataFromRequest = data?.[dataType] || '';

  // If graphQL returned error
  if (error) return <ErrorQuery error={error} />;

  return (
    <div className="builder">
      {loading && <Loader />}
      {!loading && (
        <div>
          <RawHtml>{dataFromRequest}</RawHtml>
        </div>
      )}
    </div>
  );
};

export default BuilderPage;


/// Second file frontend:
import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_BUILDER_IO_PAGE } from '../BuilderPage/api/query';
import { builderIoContentRoutes } from '../../config/builderIoContentRoutes';
import ErrorQuery from 'core/ErrorQuery/ErrorQuery';
import RawHtml from 'core/RawHtml/RawHtml';
import Loader from 'core/Loader/Loader';

const Home = () => {
  // Data type from query
  const dataType = 'builderIo';

  const builderUrl = `/${builderIoContentRoutes[0]}`;

  const { data, loading, error } = useQuery(GET_BUILDER_IO_PAGE, {
    variables: { builderUrl },
    fetchPolicy: 'no-cache',
  });

  const dataFromRequest = data?.[dataType] || '';

  // If graphQL returned error
  if (error) return <ErrorQuery error={error} />;

  return (
    <div className="builder">
      {loading && <Loader />}
      {!loading && (
        <div>
          <RawHtml>{dataFromRequest}</RawHtml>
        </div>
      )}
    </div>
  );
};

export default Home;


// Backend
import dotenv from 'dotenv';
import { GraphQLError } from 'graphql';

import { STATUS_200 } from '../dicts/server-statuses-dict.mjs';
import builderIoService, { BUILDER_LANDING_TYPE } from '../services/core/builder-io-service.mjs';
import { logger } from '../config/logger.config.mjs';

dotenv.config();

/**
 * Landing controller
 */
const LandingController = {
  // GET landing-builder
  landingBuilder: async (request, res) => {
    let html = '';
    const builderUrl = request.query?.url;

    try {
      // Get page from builder.io
      html = await builderIoService({ builderUrl, builderType: BUILDER_LANDING_TYPE });
    } catch (error) {
      logger.log({
        level: 'error',
        message: `builderUrl: ${error.message}`
      });

      throw new GraphQLError(error.message);
    }

    res.status(STATUS_200).type('text/html');
    return res.send(html);
  }
};

export default LandingController;


// Second file
import dotenv from 'dotenv';
import axios from 'axios';
import { getFromRedis, putToRedis } from './redis-service.mjs';

dotenv.config();
const { BUILDER_IO_PAGE_URL, BUILDER_IO_LANDING_URL, BUILDER_IO_KEY } = process.env;

export const BUILDER_LANDING_TYPE = 'landing';
export const BUILDER_PAGE_TYPE = 'page';

export const BUILDER_KEY = 'builder';

// How many days need to keep data in cache
const CACHE_DAYS_BUILDER = 30;
const CACHE_SECONDS_BUILDER = CACHE_DAYS_BUILDER * 60 * 60 * 24;

/**
 * BuilderIo service (get pages from builder.io)
 *
 * @param builderUrl string builder.io URL
 * @param builderType string type of page (landing, page)
 */
const builderIoService = async ({ builderUrl, builderType = BUILDER_PAGE_TYPE }) => {
  let html = null;
  const builderIoParams = `?apiKey=${BUILDER_IO_KEY}&url=${builderUrl}`;
  let builderLink = `${BUILDER_IO_PAGE_URL}${builderIoParams}`;

  if (builderType === BUILDER_LANDING_TYPE) builderLink = `${BUILDER_IO_LANDING_URL}${builderIoParams}`;

  try {
    // Get page from cache
    const htmlData = await getFromRedis({ prefix: BUILDER_KEY, key: builderUrl });

    html = htmlData.value;

    // If don't get from cache then get page from builder.io
    if (!html) {
      const response = await axios.get(builderLink);
      html = response?.data?.data?.html;

      // Put page to cache
      if (html) await putToRedis({ prefix: BUILDER_KEY, key: builderUrl, value: html, options: { EX: CACHE_SECONDS_BUILDER } });
    }

    return html;
  } catch (error) {
    throw new Error(error.message);
  }
};

export default builderIoService;

When I try to edit the homepage I only get errors and troubleshoot warning since I adjust the preview. See page:

Can you look into the code I sent and see how we can fix our layout erros + integrate the page content model. So the pages that are listed there are rendered correctly + have a working Javascript functionallity. So the slider / layout and other functions are working again.

Thanks in advance.

Kind regards,

Geert