Custom Module Settings Panel Causes Builder Errors in Divi 5 Alpha 14

[marsaavedraa]

Summary:

I’m developing a custom module for Divi 5 Alpha 14 and am unable to add custom settings fields to the module settings panel. Whenever I use Divi UI containers (such as GroupContainer, FieldContainer, SelectContainer, etc.), the Visual Builder shows “Oops! An Error Has Occurred” and logs React errors in the console. The module renders correctly on the frontend, but the settings panel remains unusable.

Steps to Reproduce:

Create a custom module (example: Organization Directory) following the Divi 5 developer documentation.

Register the module with registerModule in index.jsx.

Add a settings panel using Divi UI containers (GroupContainer, FieldContainer, SelectContainer, etc.).

Add the module to a page using the Visual Builder.

Open the settings panel.

Expected Behavior:
Custom fields should display in the settings panel, and updating their values should work without errors.

Actual Behavior:
The settings panel immediately shows an error:

“Oops! An Error Has Occurred. This content could not be displayed. Please report this error to our team so that we can fix it and then save and reload the builder.”

The browser console logs React errors, such as:

Error: Minified React error #130;
TypeError: Cannot read properties of undefined (reading 'modulePreset')
Environment:

Divi 5 Alpha 14 (latest, as of May 2025)

Custom module developed according to Divi 5 docs

Other Notes:

Module renders correctly on the frontend.

Removing all Divi UI containers from the settings panel eliminates the error, but also removes the ability to add controls.

Is there a recommended workaround, or an ETA for when third-party custom module settings will be fully supported?

Sample Code:

import React from 'react';
const { addAction } = window?.vendor?.wp?.hooks;
const { ModuleContainer, FieldContainer, SelectContainer } = window?.divi?.module;
const { GroupContainer } = window?.divi?.modal;
const { registerModule } = window?.divi?.moduleLibrary;

import metadata from './module.json';

const organizationDirectoryModule = {
  metadata,
  renderers: {
    edit: ({ attrs, id, name }) => (
      <ModuleContainer id={id} name={name}>
        <div>Custom Module Example</div>
      </ModuleContainer>
    ),
  },
  settings: {
    content: () => (
      <GroupContainer id="layoutSettingsGroup" title="Layout Settings">
        <FieldContainer attrName="layoutType" label="Format">
          <SelectContainer options={[{ value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }]} />
        </FieldContainer>
      </GroupContainer>
    ),
  },
  placeholderContent: {
    layoutType: 'grid'
  },
};

addAction('divi.moduleLibrary.registerModuleLibraryStore.after', 'organizationDirectoryModule', () => {
  registerModule(organizationDirectoryModule.metadata, organizationDirectoryModule);
});