diff --git a/packages/devextreme/build/gulp/state_manager/__tests__/build_state_manager.test.js b/packages/devextreme/build/gulp/state_manager/__tests__/build_state_manager.test.js
index bc92bbb1d7d4..4a86991225da 100644
--- a/packages/devextreme/build/gulp/state_manager/__tests__/build_state_manager.test.js
+++ b/packages/devextreme/build/gulp/state_manager/__tests__/build_state_manager.test.js
@@ -66,28 +66,37 @@ describe('Build the state manager', () => {
 
         const devextremeDir = path.join(tempDir, 'devextreme');
         const stateManagerDir = path.join(devextremeDir, 'esm', '__internal', 'core', 'state_manager');
+        const cjsStateManagerDir = path.join(devextremeDir, 'cjs', '__internal', 'core', 'state_manager');
         const devDir = path.join(stateManagerDir, 'dev');
         const prodDir = path.join(stateManagerDir, 'prod');
+        const cjsProdDir = path.join(cjsStateManagerDir, 'prod');
 
         const devPaths = createEnvPaths(stateManagerDir, 'dev');
         const prodPaths = createEnvPaths(stateManagerDir, 'prod');
+        const cjsProdPaths = createEnvPaths(cjsStateManagerDir, 'prod');
 
         const indexFilePath = path.join(stateManagerDir, 'index.js');
+        const cjsIndexFilePath = path.join(cjsStateManagerDir, 'index.js');
         const fileOutsideOfEnvSpecificFolderFilePath = path.join(stateManagerDir, 'state_manager.test.js');
         const fileOutsideStateMangerPath = path.join(tempDir, 'other_file.js');
 
         fs.mkdirSync(stateManagerDir, { recursive: true });
+        fs.mkdirSync(cjsStateManagerDir, { recursive: true });
         fs.mkdirSync(devDir, { recursive: true });
         fs.mkdirSync(prodDir, { recursive: true });
+        fs.mkdirSync(cjsProdDir, { recursive: true });
         fs.mkdirSync(devPaths.reactivePrimitivesDir, { recursive: true });
         fs.mkdirSync(prodPaths.reactivePrimitivesDir, { recursive: true });
+        fs.mkdirSync(cjsProdPaths.reactivePrimitivesDir, { recursive: true });
 
         fs.writeFileSync(indexFilePath, INDEX_DEV_CONTENT);
+        fs.writeFileSync(cjsIndexFilePath, INDEX_DEV_CONTENT);
         fs.writeFileSync(fileOutsideOfEnvSpecificFolderFilePath, FILE_OUTSIDE_OF_ENV_SPECIFIC_FOLDER_CONTENT);
         fs.writeFileSync(fileOutsideStateMangerPath, FILE_OUTSIDE_STATE_MANGER_CONTENT);
 
         createEnvFiles(devPaths, DEV_DIR_CONTENT);
         createEnvFiles(prodPaths, PROD_DIR_CONTENT);
+        createEnvFiles(cjsProdPaths, PROD_DIR_CONTENT);
 
         originalConsoleError = console.error;
         consoleErrorSpy = jest.fn();
@@ -95,6 +104,7 @@ describe('Build the state manager', () => {
 
         const files = [
             ...createEnvSpecificStreamFileObjects(prodPaths, PROD_DIR_CONTENT),
+            ...createEnvSpecificStreamFileObjects(cjsProdPaths, PROD_DIR_CONTENT),
             ...createEnvSpecificStreamFileObjects(devPaths, DEV_DIR_CONTENT),
             new Vinyl({
                 path: fileOutsideStateMangerPath,
@@ -108,6 +118,10 @@ describe('Build the state manager', () => {
                 path: indexFilePath,
                 contents: Buffer.from(INDEX_DEV_CONTENT)
             }),
+            new Vinyl({
+                path: cjsIndexFilePath,
+                contents: Buffer.from(INDEX_DEV_CONTENT)
+            }),
         ];
 
         stream.on('data', (file) => {
@@ -123,6 +137,7 @@ describe('Build the state manager', () => {
             devDir,
             prodPaths,
             indexFilePath,
+            cjsIndexFilePath,
             fileOutsideOfEnvSpecificFolderFilePath,
             fileOutsideStateMangerPath
         };
@@ -164,9 +179,14 @@ describe('Build the state manager', () => {
     it('should replace `index.js` content by `prod/index.js` content', runTestWithStream(() => {
         removeDevelopmentStateManagerModules(testsContext.devextremeDir);
 
-        const indexFileContent = fs.readFileSync(testsContext.indexFilePath, 'utf8');
-        expect(indexFileContent).toBe(INDEX_PROD_CONTENT);
+        const esmIndexContent = fs.readFileSync(testsContext.indexFilePath, 'utf8');
+        expect(esmIndexContent).toBe(INDEX_PROD_CONTENT);
         expect(fs.existsSync(testsContext.prodPaths.index)).toBe(true);
+
+        const cjsIndexContent = fs.readFileSync(testsContext.cjsIndexFilePath, 'utf8');
+        expect(cjsIndexContent).toContain('require("./prod/index")');
+        expect(cjsIndexContent).not.toContain('export *');
+
         expect(consoleErrorSpy).not.toHaveBeenCalled();
     }));
 });
diff --git a/packages/devextreme/build/gulp/state_manager/replace_state_manager_modules_for_production.js b/packages/devextreme/build/gulp/state_manager/replace_state_manager_modules_for_production.js
index c4d2904f8f86..6773a62184c1 100644
--- a/packages/devextreme/build/gulp/state_manager/replace_state_manager_modules_for_production.js
+++ b/packages/devextreme/build/gulp/state_manager/replace_state_manager_modules_for_production.js
@@ -1,26 +1,43 @@
-'use strict';
-
-const gulp = require('gulp');
-const through2 = require('through2');
-const path = require('path');
-const fs = require('fs');
-const babel = require('@babel/core');
-const transpileConfig = require('../transpile-config');
+"use strict";
+
+const gulp = require("gulp");
+const through2 = require("through2");
+const path = require("path");
+const babel = require("@babel/core");
 const {
     STATE_MANAGER_FOLDER_PATH,
     STATE_MANAGER_INDEX_MODULE_PATH,
-} = require('./constants');
-const ctx = require('../context');
+} = require("./constants");
+const ctx = require("../context");
+
+const ERROR_PREFIX = "Error during replacing the state manager modules:";
 
-const ERROR_PREFIX = 'Error during replacing the state manager modules:';
+const ESM_REEXPORT = `export * from './prod/index';`;
+
+function isCjsFile(filePath) {
+    const normalizedPath = filePath.split(path.sep).join("/");
+    return normalizedPath.includes("/cjs/");
+}
+
+function transpileToCjs(esmSource, filePath) {
+    const result = babel.transformSync(esmSource, {
+        filename: filePath,
+        plugins: [["@babel/plugin-transform-modules-commonjs"]],
+    });
+    return result.code;
+}
 
 function replaceStateManagerModulesForProduction() {
-    return through2.obj(function(file, enc, callback) {
+    return through2.obj(function (file, enc, callback) {
         if (file.path.includes(STATE_MANAGER_INDEX_MODULE_PATH)) {
             try {
-                file.contents = Buffer.from(`export * from './prod/index';`);
+                const content = isCjsFile(file.path)
+                    ? transpileToCjs(ESM_REEXPORT, file.path)
+                    : ESM_REEXPORT;
+                file.contents = Buffer.from(content);
             } catch (error) {
-                console.error(ERROR_PREFIX, error);
+                callback(new Error(`${ERROR_PREFIX} ${error.message}`));
+                return;
             }
         }
 
@@ -28,15 +45,23 @@ function replaceStateManagerModulesForProduction() {
     });
 }
 
-const prepareStateManager = (dist) => gulp.series.apply(gulp, [
-    () => gulp
-        .src(`${dist}/**/${STATE_MANAGER_FOLDER_PATH}/**`)
-        .pipe(replaceStateManagerModulesForProduction())
-        .pipe(gulp.dest(dist)),
-]);
+const prepareStateManager = (dist) =>
+    gulp.series.apply(gulp, [
+        () =>
+            gulp
+                .src(`${dist}/**/${STATE_MANAGER_FOLDER_PATH}/**`)
+                .pipe(replaceStateManagerModulesForProduction())
+                .pipe(gulp.dest(dist)),
+    ]);
 
-gulp.task('state-manager-replace-production-modules-transpiled-prod-esm', prepareStateManager(ctx.TRANSPILED_PROD_ESM_PATH));
+gulp.task(
+    "state-manager-replace-production-modules-transpiled-prod-esm",
+    prepareStateManager(ctx.TRANSPILED_PROD_ESM_PATH)
+);
 
-gulp.task('state-manager-replace-production-modules-transpiled-prod-renovation', prepareStateManager(ctx.TRANSPILED_PROD_RENOVATION_PATH));
+gulp.task(
+    "state-manager-replace-production-modules-transpiled-prod-renovation",
+    prepareStateManager(ctx.TRANSPILED_PROD_RENOVATION_PATH)
+);
 
 module.exports = replaceStateManagerModulesForProduction;