Optimization

Data Driven Forms is built in two module formats: CJS and ESM.

By using a standard import path, the module based on your environment will be used. Browser environments are using ESM modules, environments based on NodeJS (testing) are using CJS.

Exported files follow the kebab case. All components are exported in default exports.

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

In case you need to import ESM module manually, you can do this by using esm in a path. However, we do not recommend it.

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

UMD module format is no longer supported.

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

useField must be used inside of a <Form> component

You can automate tranforming imports 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 transformDDFImports = [
  'transform-imports',
  {
    '@data-driven-forms/react-form-renderer': {
      transform: (importName) =>
        `@data-driven-forms/react-form-renderer/${importName
              .split(/(?=[A-Z])/)
              .join('-')
              .toLowerCase()}.js`,
    }
  },
  'react-form-renderer'
]

...

module.exports = {
    ...,
    plugins: [
        ...,
        transformDDFImports
    ]
}

Result:

-import { useField } from '@data-driven-forms/react-form-renderer';
+import useField from '@data-driven-forms/react-form-renderer/use-field';