Locale Error while setting up project with new package @react-awesome-query-builder/antd

[SMNaik123]

Hi,

I am getting the below error while trying to migrate from react-awesome-query-builder to @react-awesome-query-builder/antd

Here is the config I have used
/eslint @typescript-eslint/no-unused-vars: ["off", {"varsIgnorePattern": "^_"}]/

import { AntdConfig } from '@react-awesome-query-builder/antd';
import {
Config,
Conjunctions,
Fields,
Funcs,
LocaleSettings,
Operators,
Types,
Widgets,
} from '@react-awesome-query-builder/core';
import { Settings } from '@react-awesome-query-builder/ui';
import en_US from 'antd/es/locale/en_US';
import merge from 'lodash/merge';

const InitialConfig = AntdConfig;

const conjunctions: Conjunctions = {
...InitialConfig.conjunctions,
};

const operators: Operators = {
...Object.fromEntries(
Object.entries(InitialConfig.operators).filter(([key]) => !['starts_with', 'ends_with', 'proximity'].includes(key)),
),
// examples of overriding
between: {
...InitialConfig.operators.between,
textSeparators: ['from', 'to'],
},
};

const widgets: Widgets = {
...InitialConfig.widgets,
// examples of overriding
text: {
...InitialConfig.widgets.text,
},
textarea: {
...InitialConfig.widgets.textarea,
maxRows: 3,
},
slider: {
...InitialConfig.widgets.slider,
},
rangeslider: {
...InitialConfig.widgets.rangeslider,
},
date: {
...InitialConfig.widgets.date,
dateFormat: 'DD.MM.YYYY',
valueFormat: 'DD/MM/YYYY',
},
time: {
...InitialConfig.widgets.time,
timeFormat: 'HH:mm',
valueFormat: 'HH:mm:ss',
},
datetime: {
...InitialConfig.widgets.datetime,
timeFormat: 'HH:mm',
dateFormat: 'DD.MM.YYYY',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
func: {
...InitialConfig.widgets.func,
customProps: {
showSearch: true,
},
},
select: {
...InitialConfig.widgets.select,
fullWidth: true,
},
multiselect: {
...InitialConfig.widgets.multiselect,
customProps: {
//showCheckboxes: false,
width: '200px',
input: {
width: '100px',
},
},
},
treeselect: {
...InitialConfig.widgets.treeselect,
customProps: {
showSearch: true,
},
},
};

const types: Types = {
...InitialConfig.types,
// examples of overriding
boolean: merge(InitialConfig.types.boolean, {
widgets: {
boolean: {
widgetProps: {
hideOperator: true,
operatorInlineLabel: 'is',
},
},
},
}),
};

const localeSettings: LocaleSettings = {
locale: {
moment: 'enUS',
antd: en_US,
},
valueLabel: 'Value',
valuePlaceholder: 'Value',
fieldLabel: 'Field',
operatorLabel: 'Operator',
fieldPlaceholder: 'Select field',
operatorPlaceholder: 'Select operator',
deleteLabel: '',
addGroupLabel: 'Add group',
addRuleLabel: 'Add rule',
addSubRuleLabel: 'Add sub rule',
delGroupLabel: '',
notLabel: 'Not',
valueSourcesPopupTitle: 'Select value source',
removeRuleConfirmOptions: {
title: 'Are you sure delete this rule?',
okText: 'Yes',
okType: 'danger',
},
removeGroupConfirmOptions: {
title: 'Are you sure delete this group?',
okText: 'Yes',
okType: 'danger',
},
};

const settings: Settings = {
...InitialConfig.settings,
...localeSettings,

valueSourcesInfo: {
value: {
label: 'Value',
},
field: {
label: 'Field',
widget: 'field',
},
func: {
label: 'Function',
widget: 'func',
},
},
// canReorder: false,
// canRegroup: false,
// showNot: false,
// showLabels: true,
renderSize: 'large',
canLeaveEmptyGroup: true, //after deletion

// renderField: (props) => <FieldCascader {...props} />,
// renderOperator: (props) => <FieldDropdown {...props} />,
// renderFunc: (props) => <FieldSelect {...props} />,
};

const funcs: Funcs = {};

const fields: Fields = {};

const config: Config = {
conjunctions,
operators,
widgets,
types,
settings,
funcs,
fields,
};

export default config;

Any help to resolve this will be appreciated.

[ukrbublik]

Please try

-import en_US from 'antd/es/locale/en_US';
+import en_US from 'antd/lib/locale/en_US';

[SMNaik123]

I'm still facing the same issue with import en_US from 'antd/lib/locale/en_US'

This is the package.json file content:

"dependencies": {
    "@ant-design/icons": "^4.8.0",
    "@emotion/react": "^11.10.5",
    "@emotion/server": "^11.10.0",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.10.14",
    "@mui/lab": "^5.0.0-alpha.108",
    "@mui/material": "^5.10.14",
    "@mui/x-date-pickers": "^5.0.8",
    "@react-awesome-query-builder/antd": "^6.1.0",
    "@react-awesome-query-builder/core": "^6.1.0",
    "@react-awesome-query-builder/ui": "^6.1.0",
    "antd": "^5.1.2",
    "axios": "^1.1.3",
    "lodash": "^4.17.21",
    "material-ui-confirm": "3",
    "moment": "^2.29.4",
    "next": "12.1.4",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.189",
    "@types/node": "18.11.9",
    "@types/react": "17.0.39",
    "@types/react-dom": "17.0.11",
    "eslint": "8.27.0",
    "eslint-config-next": "12.1.4",
    "sass": "^1.57.1",
    "typescript": "4.9.3"
  }

[ukrbublik]

Please use 6.1.1

[SMNaik123]

This works !!

Appreciate your help on this.