I cannot make use of the TriStateCheckbox component when I configure the filter language or filter options of the Datatable

[norvey28]

Describe the bug

I configured the main.js file to have the filters and calendar options in Spanish, but I noticed that it generated problems when I used the TriStateCheckbox component, I checked if it was a special configuration in the locale, but no matter what property I translate, this component stops working.

File main.js

import 'primevue/resources/primevue.min.css'; // estilos básicos
import './assets/theme.css'; //tema convertido en local para poder modificar
import 'primeicons/primeicons.css'; // iconos
import '/node_modules/primeflex/primeflex.css'; //primeflex
import ToastService from 'primevue/toastservice';
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import PrimeVue from 'primevue/config';
import store from '../src/store/store';
import FloatLabel from 'primevue/floatlabel';
import InputText from 'primevue/inputtext';
import Card from 'primevue/card';
import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import Dropdown from 'primevue/dropdown';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import Menubar from 'primevue/menubar';
import Menu from 'primevue/menu';
import Badge from 'primevue/badge';
import Avatar from 'primevue/avatar';
import MegaMenu from 'primevue/megamenu';
import ConfirmDialog from 'primevue/confirmdialog';
import ConfirmationService from 'primevue/confirmationservice';
import InputIcon from 'primevue/inputicon'
import IconField from 'primevue/iconfield'
import Columun from 'primevue/column'
import Multiselect from 'primevue/multiselect'
import Tag from 'primevue/tag'
import TriStateCheckbox from 'primevue/tristatecheckbox'
import DataTable from 'primevue/datatable'
import Checkbox from 'primevue/checkbox';
import Calendar from 'primevue/calendar';
import InputNumber from 'primevue/inputnumber';
import ProgressBar from 'primevue/progressbar';
import Slider from 'primevue/slider';
import SelectButton from 'primevue/selectbutton';
import InputSwitch from 'primevue/inputswitch';
import Toast from 'primevue/toast';
import SplitterPanel from 'primevue/splitterpanel';
import Splitter from 'primevue/splitter';
import DataView from 'primevue/dataview';
import Handsontable from 'handsontable';
import Panel from 'primevue/panel';
import Chart from 'primevue/chart';
import RadioButton from 'primevue/radiobutton';
import TextArea from 'primevue/textarea';
import ColumnGroup from 'primevue/columngroup';
import Row from 'primevue/row';
import Tooltip from 'primevue/tooltip';
import FileUpload from 'primevue/fileupload';
import Textarea from 'primevue/textarea';
import Divider from 'primevue/divider';
import InlineMessage from 'primevue/inlinemessage';
import Password from 'primevue/password';
import StepperPanel from 'primevue/stepperpanel';
import ToggleButton from 'primevue/togglebutton';
import Stepper from 'primevue/stepper';
import Steps from 'primevue/steps';
import ProgressSpinner from 'primevue/progressspinner'
import Message from 'primevue/message';
import Fieldset from 'primevue/fieldset';
const app = createApp(App)
app.use(router)
app.use(store)
app.use(ConfirmationService);
app.use(ToastService);
app.use(PrimeVue, {
    ripple: true,
    locale: {
        startsWith: 'Empieza con',
        contains: 'Contiene',
        notContains: 'No contiene',
        endsWith: 'Termina con',
        equals: 'Igual a',
        notEquals: 'Diferente de',
        noFilter: 'Sin filtro',
        filter: 'Filtrar',
        lt: 'Menor que',
        lte: 'Menor o igual que',
        gt: 'Mayor que',
        gte: 'Mayor o igual que',
        dateIs: 'Fecha es',
        dateIsNot: 'Fecha no es',
        dateBefore: 'Fecha es antes de',
        dateAfter: 'Fecha es después de',
        clear: 'Limpiar',
        apply: 'Aplicar',
        matchAll: 'Coincide con todos',
        matchAny: 'Coincide con alguno',
        addRule: 'Agregar regla',
        removeRule: 'Eliminar regla',
        accept: 'Aceptar',
        reject: 'Rechazar',
        firstDayOfWeek: 1,
        dayNames: [
            "Domingo",
            "Lunes",
            "Martes",
            "Miércoles",
            "Jueves",
            "Viernes",
            "Sábado"
        ],
        dayNamesShort: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
        dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
        monthNames: [
            "Enero",
            "Febrero",
            "Marzo",
            "Abril",
            "Mayo",
            "Junio",
            "Julio",
            "Agosto",
            "Septiembre",
            "Octubre",
            "Noviembre",
            "Diciembre"
        ],
        monthNamesShort: [
            "Ene",
            "Feb",
            "Mar",
            "Abr",
            "May",
            "Jun",
            "Jul",
            "Ago",
            "Sep",
            "Oct",
            "Nov",
            "Dic"
        ],
        today: "Hoy",
        clear: "Borrar",
        weekHeader: "Sm"
    }
});
app.component('Dialog', Dialog);
app.component('Dropdown', Dropdown);
app.component('TabView', TabView);
app.component('TabPanel', TabPanel);
app.component('Menubar', Menubar);
app.component('Badge', Badge);
app.component('Avatar', Avatar);
app.component('FloatLabel', FloatLabel);
app.component('InputText', InputText);
app.component('Card', Card);
app.component('Button', Button);
app.component('MegaMenu', MegaMenu);
app.component('Menu', Menu);
app.component('ConfirmDialog', ConfirmDialog);
app.component('InputIcon', InputIcon);
app.component('IconField', IconField);
app.component('Column', Columun);
app.component('MultiSelect', Multiselect);
app.component('Tag', Tag);
app.component('TriStateCheckbox', TriStateCheckbox);
app.component('DataTable', DataTable);
app.component('Checkbox', Checkbox);
app.component('Calendar', Calendar);
app.component('InputNumber', InputNumber);
app.component('ProgressBar', ProgressBar);
app.component('Slider', Slider);
app.component('SelectButton', SelectButton);
app.component('InputSwitch', InputSwitch);
app.component('Toast', Toast);
app.component('SplitterPanel', SplitterPanel);
app.component('Splitter', Splitter);
app.component('DataView', DataView);
app.component('Handsontable', Handsontable);
app.component('Panel', Panel);
app.component('Chart', Chart);
app.component('RadioButton', RadioButton);
app.component('TextArea', TextArea);
app.component('ColumnGroup', ColumnGroup);
app.component('Row', Row);
app.component('FileUpload', FileUpload);
app.component('Textarea', Textarea);
app.component('Message', Message);
app.component('Fieldset', Fieldset);
app.component('Divider', Divider);
app.component('InlineMessage', InlineMessage);
app.component('Password', Password);
app.component('StepperPanel', StepperPanel);
app.component('ToggleButton', ToggleButton);
app.component('Stepper', Stepper);
app.component('Steps', Steps);
app.component('ProgressSpinner', ProgressSpinner);

app.directive('tooltip', Tooltip);


app.mount('#app')

with the configuration presented above such a component does not work, but if I use the default configuration there is no problem.

app.use(PrimeVue)

This is the error message in the browser console when using TriStateCheckbox in a filter with the following settings for the translation:

Reproducer

https://stackblitz.com/edit/primevue-3-vite-issue-template-77ppjk?file=src%2FApp.vue

PrimeVue version

^3.52.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome

Steps to reproduce the behavior

1. In the home page you should see the TriStateCheckbox component, but this is not the case.
2. If you want to see the component without problem go to src/main.js
3. remove the app.use(PrimeVue,...) configuration and leave only app.use(PrimeVue).
   See that now the component is working.

app.use(PrimeVue)

Expected behavior

No response

[CCodam]

There is a community supported PrimeLocale repository here: https:/primefaces/primelocale

A working version here: https://stackblitz.com/edit/primevue-3-vite-issue-template-6thv7p?file=src%2Fmain.js
Which contains the following:

app.use(PrimeVue, {
  locale: {
    accept: 'Sí',
    addRule: 'Agregar regla',
    am: 'AM',
    apply: 'Aplicar',
    cancel: 'Cancelar',
    choose: 'Escoger',
    chooseDate: 'Elige fecha',
    chooseMonth: 'Elige el mes',
    chooseYear: 'Elige Año',
    clear: 'Limpiar',
    completed: 'Terminado',
    contains: 'Contenga',
    custom: 'Personalizar',
    dateAfter: 'Fecha después de',
    dateBefore: 'Fecha antes de',
    dateFormat: 'dd/mm/yy',
    dateIs: 'Fecha igual a',
    dateIsNot: 'Fecha diferente a',
    dayNames: [
      'Domingo',
      'Lunes',
      'Martes',
      'Miércoles',
      'Jueves',
      'Viernes',
      'Sábado',
    ],
    dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
    emptyFilterMessage: 'Sin opciones disponibles',
    emptyMessage: 'No se han encontrado resultados',
    emptySearchMessage: 'Sin opciones disponibles',
    emptySelectionMessage: 'Ningún artículo seleccionado',
    endsWith: 'Termine con',
    equals: 'Igual a',
    fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    filter: 'Filtrar',
    firstDayOfWeek: 1,
    gt: 'Mayor que',
    gte: 'Mayor o igual a',
    lt: 'Menor que',
    lte: 'Menor o igual a',
    matchAll: 'Coincidir todo',
    matchAny: 'Coincidir con cualquiera',
    medium: 'Medio',
    monthNames: [
      'Enero',
      'Febrero',
      'Marzo',
      'Abril',
      'Mayo',
      'Junio',
      'Julio',
      'Agosto',
      'Septiembre',
      'Octubre',
      'Noviembre',
      'Diciembre',
    ],
    monthNamesShort: [
      'Ene',
      'Feb',
      'Mar',
      'Abr',
      'May',
      'Jun',
      'Jul',
      'Ago',
      'Sep',
      'Oct',
      'Nov',
      'Dic',
    ],
    nextDecade: 'Próxima década',
    nextHour: 'próxima hora',
    nextMinute: 'Siguiente minuto',
    nextMonth: 'Próximo mes',
    nextSecond: 'Siguiente segundo',
    nextYear: 'El próximo año',
    noFilter: 'Sin filtro',
    notContains: 'No contenga',
    notEquals: 'Diferente a',
    now: 'Ahora',
    passwordPrompt: 'Escriba una contraseña',
    pending: 'Pendiente',
    pm: 'PM',
    prevDecade: 'Década anterior',
    prevHour: 'Hora anterior',
    prevMinute: 'Minuto anterior',
    prevMonth: 'Mes anterior',
    prevSecond: 'Anterior Segundo',
    prevYear: 'Año anterior',
    reject: 'No',
    removeRule: 'Eliminar regla',
    searchMessage: '{0} resultados están disponibles',
    selectionMessage: '{0} elementos seleccionados',
    showMonthAfterYear: false,
    startsWith: 'Comience con',
    strong: 'Fuerte',
    today: 'Hoy',
    upload: 'Subir',
    weak: 'Débil',
    weekHeader: 'Sem',
    aria: {
      cancelEdit: 'Cancelar editado',
      close: 'Cerrar',
      collapseLabel: 'Colapsar',
      collapseRow: 'Reducir Fila',
      editRow: 'Editar fila',
      expandLabel: 'Expandir',
      expandRow: 'Expandir Fila',
      falseLabel: 'Falso',
      filterConstraint: 'Restricción de filtro',
      filterOperator: 'Operador de filtro',
      firstPageLabel: 'Primera Página',
      gridView: 'Vista de cuadrícula',
      hideFilterMenu: 'Ocultar menú del filtro',
      jumpToPageDropdownLabel: 'Ir al menú desplegable de página',
      jumpToPageInputLabel: 'Ir a la entrada de página',
      lastPageLabel: 'Última Página',
      listView: 'Vista de lista',
      moveAllToSource: 'Mover todo al origen',
      moveAllToTarget: 'Mover todo al objetivo',
      moveBottom: 'Desplazarse hacia abajo',
      moveDown: 'Bajar',
      moveTop: 'Mover arriba',
      moveToSource: 'Mover al origen',
      moveToTarget: 'Mover al objetivo',
      moveUp: 'Subir',
      navigation: 'Navegación',
      next: 'Siguiente',
      nextPageLabel: 'Siguiente Página',
      nullLabel: 'No seleccionado',
      otpLabel: 'Introduzca el carácter de contraseña de un solo uso {0}',
      pageLabel: 'Página {page}',
      passwordHide: 'Contraseña oculta',
      passwordShow: 'Mostrar contraseña',
      previous: 'Anterior',
      previousPageLabel: 'Página Anterior',
      removeLabel: 'Eliminar',
      rotateLeft: 'Girar a la izquierda',
      rotateRight: 'Girar a la derecha',
      rowsPerPageLabel: 'Filas por página',
      saveEdit: 'Guardar editado',
      scrollTop: 'Desplazarse hacia arriba',
      selectAll: 'Seleccionar todos',
      selectLabel: 'Seleccionar',
      selectRow: 'Seleccionar fila',
      showFilterMenu: 'Mostrar menú del filtro',
      slide: 'Deslizar',
      slideNumber: '{slideNumber}',
      star: '1 estrella',
      stars: '{star} estrellas',
      trueLabel: 'Verdadero',
      unselectAll: 'Deseleccionar todos',
      unselectLabel: 'Deseleccionar',
      unselectRow: 'Desmarcar fila',
      zoomImage: 'Ampliar imagen',
      zoomIn: 'Ampliar',
      zoomOut: 'Reducir',
    },
  },
});