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

Technical Questions
,
1

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?

2

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
3

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

4

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…