Dynamic component in production issue

Technical Questions
, ,
1

Hi!

I have a component which would be a dynamic component using next.js.
(It must be dynamic component, otherwise will be an error)

On my localhost it appears great, and I can see the component in the Builder.io as well, but on my deployed vercel app, the block does not appear.

Difference between my localhost and vercel app:

image
image1162×754 57.1 KB

image
image1185×649 63.4 KB

And in the html file I can see my builder component there, so I don’t know what could go wrong:

image
image1269×128 12.3 KB

In my code I registered like that:

image
image771×171 7.69 KB

And as you can see, it is visible in builder as well:

image
image1083×622 41.1 KB

Please let me know what could go wrong and how can I make this right.

2

hmm @radikris are there any errors in the console? Looks like the element is being rendered empty on your live page, so probably not a CSS issue…

Is there any deployed version of your app or a fiddle I can look at? It is hard to troubleshoot since looking through your Builder space it seems most of the pages and logic is coming from within your app, for me I only see blank pages.

If you have a deployed vercel app, you can update your Builder previewing URLs to that app URL so that the page within builder is more accurate to your actual site!

3

hi @TimG!

Here is the vercel app: https://2022-barion-com.vercel.app/

And the page I have this dynamic component in builder:

It is strange behaviour because on my localhost it is showing up.

4

@radikris Not sure what is going on here, but we did notice that if you resize the window on the production site, then the element will appear on rerender. I think there might be something with the SSR or perhaps how the component itself is implemented?

Could you share the component code itself and how you have implemented it?

5

ssr is not supported by this component:

I implemented it the same way:

import React, { useState } from 'react'
import AceEditor from 'react-ace'
import CodeLanguage from './CodeLanguage'
import { Builder } from '@builder.io/react'
import 'ace-builds/src-noconflict/mode-json'

//TODO value can only be used with '\n' linebreak
const CodeEditor = ({ codeList, height, width }) => {
  const [activeCode, setActiveCode] = useState(0)

  return (
    <div className="w-fit">
      <div className="pb-4 m-2 bg-Barion-medium-blue w-full rounded-md">
        <div className="w-full h-full bg-Barion-medium-darkblue mb-4 flex  align-items-center justify-evenly rounded-tl-md rounded-tr-md">
          {codeList.map((item, index) => (
            <CodeLanguage
              key={index}
              language={item.code.language}
              isActive={index == activeCode}
              onClick={() => {
                setActiveCode(index)
              }}
            />
          ))}
        </div>
        <AceEditor
          mode={'json'}
          className="code_editor"
          editorProps={{ $blockScrolling: true }}
          vScrollBarAlwaysVisible={false}
          readOnly={true}
          value={codeList[activeCode].code.code}
          wrapEnabled={true}
          highlightActiveLine={false}
          onSelectionChange={() => {}}
          style={{
            height: `${height}px`,
            width: `${width ?? 'auto'}`,
          }}
        />
      </div>
    </div>
  )
}

export default CodeEditor

Builder.registerComponent(CodeEditor, {
  name: 'CodeEditor',
  inputs: [
    { name: 'height', type: 'number', defaultValue: 300 },
    { name: 'width', type: 'number', defaultValue: 450 },
    {
      name: 'codeList',
      type: 'list',
      defaultValue: [
        {
          code: {
            code: `alma sjbsa ajafbjks\nkorte sfasfs f sf\nasdasdd\nasndas sa fs ffsfsfsfsa j\nasdasdjk\n fs fsffsnasadsjk\nasjasnjkadsasdassdas dssfs ssdn\nnnjfsf sasass js\nas sff fassa asjka\nal f asfass sfa ma\nko sfafasasffsa f rte\nasdsfasfsaf  s asdd\nasnd sfsf  sf sasj\nasda sfas f s sdjk\nas sf assf adsjk\nasja fs fssfsnjkassdn\nnnjjs`,
          },
        },
      ],
      subFields: [
        {
          name: 'code',
          type: 'object',
          defaultValue: [{}],
          subFields: [
            {
              name: 'code',
              type: 'string',
              helperText: `code can only be used with 'backslash n' linebreak\nHelp link: https://www.gillmeister-software.com/online-tools/text/remove-line-breaks.aspx`,
            },
            {
              name: 'language',
              type: 'string',
              helperText: 'Java, C# etc..',
            },
          ],
        },
      ],
    },
  ],
})

And this is how I had to register for Builder:

import dynamic from 'next/dynamic'
const CodeEditor = dynamic(import('../components/CodeEditor/CodeEditor'), {
  ssr: false,
})

Hope we can figure out a workaround how can it appear on the first visit.

And +1 info:
sometimes I got this in my console:
‘Missing registration for CodeEditor, have you included the registration in your bundle?’

6

@TimG or @steve any of you have any ideas what could go wrong and how can I fix this?
we are in growth plan and building our production app with Builder.

7

hey @radikris

Looking at how you are registering the component with next.js dynamic, I think the format should be:

Builder.registerComponent(
  dynamic(() => import('./your-component')),
  { /* options */ }
)

You can see some examples in our various starters, like here: builder/cart.builder.ts at main · BuilderIO/builder · GitHub

or here: builder/widgets.tsx at 5d395f719230c111d18d7258d51ce8fced3e2747 · BuilderIO/builder · GitHub

See if updating to follow that pattern fixes the issue and let me know if you continue to have this or any other problems!

1 Like
8

Hi @TimG , works like a charm, thanks!

1 Like