Home App Docs Blog Github

Custom React components don't show up with production Next.js build

We use Next.js with React and styled-components.

I wrapped a few of our components into registerComponent call.

When I run a developer environment locally and point the Builder’s live editing at localhost, everything works. I can see my custom components at the component palette, I can drop them onto the page.

However, once I deploy the code to a test environment, Builder does not pick up my components. Everything else works, live editing works. But my components are not at the palette. The components I dropped onto the page previously, are replaced with 0-height boxes.

It looks like my code doesn’t register the components with Builder.

The only difference between dev localhost and test I can think of is that test uses production next.js and React builds.

I register Builder components in Next.js _app.tsx.

Is there any way to troubleshoot the issue?

I figured it out.

Turns out Next.js with Typescript 4.0.5 eliminates some imports during the production builds (if they don’t export anything? who knows…).

Once I replaced import statements with require, everything works. I.e.:

/* Register components with Builder
* Using "require" here because "import" is eliminated from the code in production build.
*/

require('components/atoms/Button/Button.builder')
require('components/organisms/AdvertBlock/AdvertBlock.builder')
2 Likes

Hey @ozmoroz glad to hear it’s resolved on your end!

this require vs. import fix just saved my day. been spending hours trying to figure out why my components weren’t loading in a production env. oh typescript…