{"id":11695,"library":"react-dom-factories","title":"React DOM Factories","description":"react-dom-factories is a legacy add-on package, currently at version 1.0.2, that provides pre-configured DOM factory methods for creating React elements. These factories, such as `DOM.div` or `DOM.p`, were originally part of React itself prior to version 16.0.0. The package was created to serve applications that depended on these specific factory functions, allowing them to continue functioning after React itself removed them. However, its use is strongly discouraged in modern React development. Developers are advised to use JSX for declarative UI creation or `React.createElement` (which `createFactory` wraps) instead. The package is considered abandoned, has seen no updates since its initial release, and is not designed for current React versions or development practices, nor does it receive any ongoing maintenance or new releases.","status":"abandoned","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react","tags":["javascript","react"],"install":[{"cmd":"npm install react-dom-factories","lang":"bash","label":"npm"},{"cmd":"yarn add react-dom-factories","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-dom-factories","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the React component model. This package provides an alternative syntax for creating React elements.","package":"react","optional":false},{"reason":"Required for rendering React elements into the DOM, as demonstrated in the quickstart example using `ReactDOM.render`.","package":"react-dom","optional":false}],"imports":[{"note":"This package exports a single default object named 'DOM' which contains all the factory methods (e.g., `DOM.div`, `DOM.p`). It is not a named export.","wrong":"import { DOM } from 'react-dom-factories';","symbol":"DOM","correct":"import DOM from 'react-dom-factories';"},{"note":"For CommonJS environments, the default export object `DOM` is accessed directly from the `require` call, not via destructuring.","wrong":"const { DOM } = require('react-dom-factories');","symbol":"DOM","correct":"const DOM = require('react-dom-factories');"},{"note":"Individual factory methods like `div`, `p`, or `span` are properties of the `DOM` object, not direct named exports from the `react-dom-factories` package.","wrong":"import { div } from 'react-dom-factories';","symbol":"DOM.div","correct":"import DOM from 'react-dom-factories';\nconst myDiv = DOM.div(null, 'Hello');"}],"quickstart":{"code":"import ReactDOM from 'react-dom';\nimport DOM from 'react-dom-factories';\n\n/**\n * A simple functional component using react-dom-factories to create elements.\n * This approach is largely superseded by JSX in modern React development.\n */\nfunction LegacyApp() {\n  const greetingMessage = DOM.p(null, 'Hello from react-dom-factories!');\n  const container = DOM.div({ className: 'legacy-container' }, \n    DOM.h1(null, 'Legacy React App'), \n    greetingMessage\n  );\n  return container;\n}\n\n// Assuming an element with id 'app' exists in your HTML document\nconst appRoot = document.getElementById('app');\n\nif (appRoot) {\n  ReactDOM.render(LegacyApp(), appRoot);\n  console.log('Legacy React App rendered using react-dom-factories.');\n} else {\n  console.error(\"Target element with id 'app' not found. Please ensure your HTML has <div id='app'></div>.\");\n}\n","lang":"javascript","description":"This quickstart demonstrates how to import and use the `DOM` object from `react-dom-factories` to create a basic React component, then render it to the DOM using `ReactDOM.render`. It showcases the syntax for creating elements with properties and children, mimicking the pre-JSX factory pattern."},"warnings":[{"fix":"Modern React development exclusively uses JSX for declarative UI. Replace `DOM.div(...)` with `<div>...</div>` or `React.createElement('div', ...)`.","message":"The `react-dom-factories` package is explicitly marked as a legacy add-on by the React team and is considered deprecated. It is not recommended for new projects and should be phased out of existing ones.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Avoid using this package. If maintenance requires its use, pin your React version to an older compatible release and ensure your build tools can correctly process legacy CommonJS modules.","message":"This package is effectively abandoned, with its last release (1.0.2) being very old. It may exhibit compatibility issues with recent versions of React (post-React 15/16) and modern JavaScript tooling, leading to unexpected errors or behavior.","severity":"gotcha","affected_versions":">=1.0.2"},{"fix":"Migrate to JSX, which offers comprehensive TypeScript support. If a temporary workaround is needed, you might declare a custom module type (`declare module 'react-dom-factories';`) or resort to `@ts-ignore`, but these are not long-term solutions.","message":"There are no official or widely maintained TypeScript type definitions for `react-dom-factories`. Using it in a TypeScript project will likely result in 'Cannot find module' or 'Property does not exist' errors, diminishing type safety.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using `import DOM from 'react-dom-factories';` for ESM or `const DOM = require('react-dom-factories');` for CJS. Verify your module resolver configuration, especially in older build setups.","cause":"The `DOM` object from `react-dom-factories` was either not correctly imported (e.g., trying to destructure a default export) or the module itself failed to load or initialize.","error":"TypeError: DOM.div is not a function"},{"fix":"The recommended solution is to transition to JSX. As a temporary measure, you can create a declaration file (`your-project.d.ts`) and add `declare module 'react-dom-factories';` to allow TypeScript to acknowledge the module, though this provides no type safety.","cause":"Attempting to import `react-dom-factories` in a TypeScript project without available type definitions.","error":"TS2307: Cannot find module 'react-dom-factories' or its corresponding type declarations."}],"ecosystem":"npm"}