Optimization

Data Driven Forms is built in three module formats: CJS, ESM and UMD.

import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
import useField from '@data-driven-forms/react-form-renderer/dist/cjs/use-field';

import FormRenderer from '@data-driven-forms/react-form-renderer/dist/esm/form-renderer';
import useField from '@data-driven-forms/react-form-renderer/dist/esm/use-field';

In both of CJS and ESM, exported files follow the kebab case. All components are exported in default exports.

Recommendation: UMD is just a fallback option. We strongly recommend to use CJS or ESM. These two modules allow to better optimization via treeshaking and more modern language syntax.

import FormRenderer, { useField } from '@data-driven-forms/react-form-renderer';

Only the FormRenderer component is exported as a default. In all other packages, use only named exports.

Do not mix different module formats (for example Renderer imported from UMD and componentMapper from CJS), otherwise you will encounter this error:

useField must be used inside of a <Form> component

You can automate tranforming imports to specific module formats by using transform-imports plugin in your Babel configuration. With that, you don't need to write explicit imports manually and you can still import everything from projects' roots.

Example:

// babel.config.js
const transformDDFImportsToCJS = [
  'transform-imports',
  {
    '@data-driven-forms/react-form-renderer': {
      transform: (importName) =>
        `@data-driven-forms/react-form-renderer/dist/cjs/${importName
              .split(/(?=[A-Z])/)
              .join('-')
              .toLowerCase()}.js`,
    }
  },
  'react-form-renderer-cjs'
]
...
module.exports = {
    ...,
    plugins: [
        ...,
        transformDDFImportsToCJS
    ]
}

Result:

import { useField } from '@data-driven-forms/react-form-renderer';
// ^^ this will be converted to >>
import useField from '@data-driven-forms/react-form-renderer/dist/cjs/use-field';