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