Dynamic component in production issue


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:

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

In my code I registered like that:

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

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

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!

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.

@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?

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) => (
              isActive={index == activeCode}
              onClick={() => {
          editorProps={{ $blockScrolling: true }}
          onSelectionChange={() => {}}
            height: `${height}px`,
            width: `${width ?? 'auto'}`,

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?’

@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.

hey @radikris

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

  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

Hi @TimG , works like a charm, thanks!

1 Like