Custom DDM field React error #321

Issue

While using our custom ddm field module we are facing react error #321

Environment

Liferay DXP Quarterly Releases

Resolution

The issue could indicate that multiple instances of React are being loaded.
Since Liferay includes React by default, this issue may occur if your DDM field or custom module is also bundling a separate version of React.
One of the loaded react could be bundled in the module or loaded from CDN or other cache.
Review cache configuration and make sure CDN bundles the module with using react as external import.

When the module bundled using webpack, e.g.:

module.exports = {
  // ...
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

https://liferay.dev/blogs/-/blogs/using-webpack-and-es-modules-in-liferay-dxp

Similar achievable in vite:

build: {
    outDir: 'build/vite',
    rollupOptions: {
      external: [
        'react',
        'react-dom',
        'react-hook-form',
        /^(?!@clayui\/css)@clayui.*$/,
      ],
    }

https://liferay.dev/blogs/-/blogs/sharing-javascript-code-and-libraries

Liferay official example: Adapting the C2P9 Slider for Liferay DXP 2025.Q2

build": "esbuild ./src/main/resources/META-INF/resources/C2P9/Slider.es.js --outfile=./build/resources/main/META-INF/resources/__liferay__/index.js --bundle --format=esm --external:react --external:react-dom --external:@liferay/dynamic-data-mapping-form-field-type --loader:.js=jsx"