fix: Next.js hydration throws a class mismatch error (DevExpress#28855)

Author: VasilyStrelyaev

packages/devextreme/js/__internal/core/m_devices.ts

@@ -4,6 +4,7 @@ import { EventsStrategy } from '@js/core/events_strategy';
 import $ from '@js/core/renderer';
 import type { Callback } from '@js/core/utils/callbacks';
 import Callbacks from '@js/core/utils/callbacks';
+import { when } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import readyCallbacks from '@js/core/utils/ready_callbacks';
 import resizeCallbacks from '@js/core/utils/resize_callbacks';
@@ -12,6 +13,7 @@ import { sessionStorage as SessionStorage } from '@js/core/utils/storage';
 import { isPlainObject } from '@js/core/utils/type';
 import { changeCallback, value as viewPort } from '@js/core/utils/view_port';
 import { getNavigator, getWindow, hasWindow } from '@js/core/utils/window';
+import { uiLayerInitialized } from '@ts/core/utils/m_common';
 
 export interface Device {
   android?: boolean;
@@ -387,14 +389,16 @@ class Devices {
 
 const devices = new Devices();
 
-const viewPortElement = viewPort();
-if (viewPortElement) {
-  devices.attachCssClasses(viewPortElement);
-}
+when(uiLayerInitialized).done(() => {
+  const viewPortElement = viewPort();
+  if (viewPortElement) {
+    devices.attachCssClasses(viewPortElement);
+  }
 
-changeCallback.add((viewPort, prevViewport) => {
-  devices.detachCssClasses(prevViewport);
-  devices.attachCssClasses(viewPort);
+  changeCallback.add((viewPort, prevViewport) => {
+    devices.detachCssClasses(prevViewport);
+    devices.attachCssClasses(viewPort);
+  });
 });
 
 /// #DEBUG

packages/devextreme/js/__internal/core/utils/m_common.ts

@@ -7,6 +7,9 @@ import {
   isDefined, isFunction, isObject, isString, type,
 } from '@js/core/utils/type';
 
+// @ts-expect-error new deferred
+export const uiLayerInitialized = new Deferred();
+
 export const ensureDefined = function (value, defaultValue) {
   return isDefined(value) ? value : defaultValue;
 };

packages/devextreme/js/__internal/core/widget/dom_component.ts

@@ -17,6 +17,7 @@ import { isDefined, isFunction, isString } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
 import license, { peekValidationPerformed } from '@ts/core/license/license_validation';
 import TemplateManagerModule from '@ts/core/m_template_manager';
+import { uiLayerInitialized } from '@ts/core/utils/m_common';
 
 import { Component } from './component';
 import type { OptionChanged } from './types';
@@ -98,6 +99,8 @@ class DOMComponent<
     if (!validationAlreadyPerformed && peekValidationPerformed()) {
       config({ licenseKey: '' });
     }
+
+    uiLayerInitialized.resolve();
   }
 
   _createElement(element: Element): void {

packages/devextreme/testing/tests/DevExpress.core/devices.tests.js

@@ -1,4 +1,5 @@
 import '../../helpers/includeThemesLinks.js';
+import 'ui/button';
 
 import $ from 'jquery';
 import domAdapter from '__internal/core/m_dom_adapter';
@@ -220,6 +221,20 @@ QUnit.test('attach css classes', function(assert) {
     }
 });
 
+QUnit.test('attach css classes side effect', function(assert) {
+    const attachCssClassesSpy = sinon.spy(devices, 'attachCssClasses');
+
+    assert.ok(!viewPort.value() || !viewPort.value()[0].className.includes('dx-device-'));
+    assert.strictEqual(attachCssClassesSpy.callCount, 0);
+
+    $('<div>').dxButton({
+        text: 'Foo',
+    });
+
+    assert.strictEqual(attachCssClassesSpy.callCount, 1);
+    assert.ok(viewPort.value()[0].className.includes('dx-device-'));
+});
+
 QUnit.test('attach css classes (dx-device-mobile)', function(assert) {
     const originalCurrentDevice = devices.current();
 
@@ -293,6 +308,7 @@ QUnit.test('move classes from previous viewport to new viewport', function(asser
         devices.real({ platform: 'ios', version: [7, 1] });
         devices.attachCssClasses($element);
 
+        $('<div>').dxButton({ text: 'Foo' });
         const $newElement = $('<div>');
 
         viewPortChanged.fire($newElement, $element);