React Common - Utils - Errors and Warnings
E0001
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0002
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0003
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0004
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0005
Occurs when the device on which the current application is running is not in the list of known devices.
E0006
Occurs when requesting a Url by the key that is not defined within the EndpointSelector's configuration object.
E0007
An internal error that occurs when the "invalidate" method is called outside the update transaction.
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0008
An internal error that occurs when an action cannot be created because the type of the passed property name is not string
.
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0009
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0014
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0015
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0017
To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.
E0103
Occurs if an AsyncRule's validationCallback does not return a promise.
Return a jQuery or native promise from the validationCallback.
E0110
Occurs when an unknown or unregistered validation group is validated using the DevExtreme.validationEngine.validateGroup(group) method.
E0120
Check that you associate the dxValidator component with a DevExtreme editor or with a custom adapter that is set to interact with a custom editor.
See Also
E0121
Occurs in drop-down lists when the customItem field of the onCustomItemCreating function's parameter is not set.
W0004
To resolve this, do the following.
- Make sure that the CSS files with the required theme are added to the application.
- Make sure that the CSS files have valid links in the application's main page.
- Make sure that a theme name passed to
current
matches one of the predefined theme names.
For details on themes, refer to the Predefined Themes article.
W0008
Appears if an array passed to the views property of the Scheduler UI component contains an invalid view name.
W0013
Occurs if one of the deprecated files (dx.web.de.js, dx.mobile.de.js, dx.all.de.js, etc.) is used. Use the dx.messages.xx.js file instead.
W0014
Occurs if a property is set to a deprecated value type. Set the property to the type of value suggested in the warning message.
W0017
If you need to specify a component's height or width and make the component's size responsive, use viewport units instead of a function. The most simple replacement is the following:
// Before v21.2 width: function() { return window.innerWidth / 2; } // Since v21.2 width: '50vw'
If you used a function for more complex calculations, replace it with the native CSS calc() function as follows:
// Before v21.2 height: function() { return window.innerHeight / 2 + 100; }
<!-- Since v21.2 --> #elementSelector { height: calc(50vh + 100px); }
W0018
If your function returned different position values based on a condition, specify the position value before displaying the component to achieve the same effect:
jQuery
Before v21.2:
$(function() { $("#popupContainer").dxPopup({ position: function() { return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" }; } }); });
Since v21.2:
$(function() { const popup = $("#popupContainer").dxPopup({ // ... }).dxPopup("instance"); function showPopup (newPosition) { popup.option("position", newPosition); popup.show(); } showPopup(someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" }); });
Angular
Before v21.2:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { popupPositionFunction() { return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" }; } }
<dx-popup ... [position]="popupPositionFunction"> </dx-popup>
Since v21.2:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { isPopupVisible: boolean = false; popupPosition = undefined; constructor() { this.showPopup = this.showPopup.bind(this); } showPopup() { this.popupPosition = someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" }; this.isPopupVisible = true; } }
<dx-popup ... [position]="popupPosition" [(visible)]="isPopupVisible"> </dx-popup>
Vue
Before v21.2:
<template> <DxPopup ... :position="popupPositionFunction"> </DxPopup> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxPopup from 'devextreme-vue/popup'; export default { components: { DxPopup }, data() { return { // ... } }, methods: { popupPositionFunction() { return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" }; } } } </script>
Since v21.2:
<template> <DxPopup ... :position="popupPosition" v-model:visible="isPopupVisible"> </DxPopup> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxPopup from 'devextreme-vue/popup'; export default { components: { DxPopup }, data() { return { popupPosition: undefined, isPopupVisible: false } }, methods: { showPopup() { this.popupPosition = someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" }; this.isPopupVisible = true; } } } </script>
React
Before v21.2:
import React, { useCallback } from 'react'; import 'devextreme/dist/css/dx.light.css'; import Popup from 'devextreme-react/popup'; export default function App() { const popupPositionFunction = useCallback(() => { return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" }; }, []); return ( <Popup ... position={popupPositionFunction}> </Popup> ); }
Since v21.2:
import React, { useCallback, useState } from 'react'; import 'devextreme/dist/css/dx.light.css'; import Popup from 'devextreme-react/popup'; export default function App() { const [popupPosition, setPopupPosition] = useState(undefined); const [isPopupVisible, setIsPopupVisible] = useState(false); const showPopup = useCallback(() => { setPopupPosition(someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" }); setIsPopupVisible(true); }, []); const handleOptionChange = useCallback((e) => { if (e.name === 'visible') { setIsPopupVisible(e.value) } }, []); return ( <Popup ... onOptionChanged={handleOptionChange} position={popupPosition} visible={isPopupVisible}> </Popup> ); }
If your function always returned the same position value, simply assign this value to the position property:
jQuery
$(function() { $("#popupContainer").dxPopup({ // Before v21.2 position: function() { return { my: "top", at: "top" }; }, // Since v21.2 position: { my: "top", at: "top" } }); });
Angular
Before v21.2:
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { // Before v21.2 popupPosition() { return { my: "top", at: "top" }; } // Since v21.2 popupPosition = { my: "top", at: "top" }; }
Vue
Before v21.2:
<template> <DxPopup ... :position="popupPosition"> </DxPopup> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxPopup from 'devextreme-vue/popup'; export default { components: { DxPopup }, methods: { // Before v21.2 popupPosition() { return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" }; } }, data() { return { // Since v21.2 popupPosition: { my: "top", at: "top" } } } } </script>
React
Before v21.2:
import React, { useCallback } from 'react'; import 'devextreme/dist/css/dx.light.css'; import Popup from 'devextreme-react/popup'; // Since v21.2 const popupPosition = { my: "top", at: "top" }; export default function App() { // Before v21.2 const popupPosition = useCallback(() => { return { my: "top", at: "top" }; }, []); return ( <Popup ... position={popupPosition}> </Popup> ); }
W0019
If you are using a trial version, you must uninstall all copies of DevExtreme once your 30-day trial period expires. For licensing-related information, please refer to the DevExtreme End User License Agreement.
To continue using DevExtreme in a commercial project, you must purchase a license. For pricing/licensing options, please visit the DevExtreme Purchase page. If you have licensing-related questions or need help with a purchase, please email clientservices@devexpress.com. We will be happy to follow-up.
For more information on DevExtreme licensing-related questions, please refer to the following help topic: Licensing.
W0020
Appears when a DevExtreme license key does not match the version of DevExtreme used within a project.
To proceed, you can:
Use the DevExtreme version linked to your license key (visit the DevExpress Download Manager to view a list of licensed versions).
Renew your DevExpress Subscription (once you renew your subscription, you will receive a new DevExtreme license key and will be entitled to product updates/support services as defined in the DevExtreme End User License Agreement).
If you have licensing-related questions or need help with a renewal, please email clientservices@devexpress.com. We will be happy to assist you.
For more information on DevExtreme licensing-related questions, please refer to the following help topic: Licensing.
W0021
To avoid this error, please specify the correct DevExtreme license key in GlobalConfig
. If you continue to encounter the error, visit the DevExpress Download Manager to obtain a valid key.
If you have a valid license key and this problem persists, please submit a support ticket via the DevExpress Support Center.
For more information on DevExtreme licensing-related questions, please refer to the following help topic: Licensing.
W0022
Appears if the version of DevExtreme used within a project is marked as pre-release software (pre-release software is not suitable for production use as it may contain deficiencies/bugs).
For more information on DevExtreme licensing-related questions, please refer to the following help topic: Licensing.
W0023
Appears if the devextreme
package version does not match other DevExpress product versions used in the application.
To avoid this warning, ensure your minor devextreme
package version is the same as other DevExpress products listed in the console message.
For example, you can get the following packages in your warning:
devextreme: 23.2.3 DevExtreme.AspNet.Core: 23.2.4
In this case, upgrade the devextreme
package or downgrade DevExtreme.AspNet.Core
so both versions are either 23.2.3 or 23.2.4.
If you have technical questions, please create a support ticket in the DevExpress Support Center.