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.


// babel.config.js
const transformDDFImportsToCJS = [
'@data-driven-forms/react-form-renderer': {
transform: (importName) =>
module.exports = {
plugins: [


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';