setNumberFormat() not working

[GeunpyoKang]

Hello. I'm struggling for using setNumberFormat(). I need your help.

I'm developing in React 19 with typescript.

this is my univerSheet

import { UniverLicensePlugin } from '@univerjs-pro/license';
import { IScale, LocaleType, merge, Univer, UniverInstanceType } from '@univerjs/core';
import DesignEnUS from '@univerjs/design/locale/en-US';
import { UniverDocsPlugin } from '@univerjs/docs';
import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US';
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
import {
  DEFAULT_FONTFACE_PLANE,
  MIDDLE_CELL_POS_MAGIC_NUMBER,
  SheetExtension,
  SpreadsheetSkeleton,
  UniverRenderEnginePlugin,
  UniverRenderingContext,
} from '@univerjs/engine-render';
import { UniverSheetsPlugin } from '@univerjs/sheets';
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula';
import { UniverSheetsFormulaUIPlugin } from '@univerjs/sheets-formula-ui';
import SheetsFormulaUIEnUS from '@univerjs/sheets-formula-ui/locale/en-US';
import { UniverSheetsNumfmtUIPlugin } from '@univerjs/sheets-numfmt-ui';
import { UniverSheetsNumfmtPlugin } from '@univerjs/sheets-numfmt';
import SheetsNumfmtUIEnUS from '@univerjs/sheets-numfmt-ui/locale/en-US';
import { UNIVER_SHEET_PERMISSION_BACKGROUND, UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US';
import SheetsEnUS from '@univerjs/sheets/locale/en-US';
import { UniverUIPlugin } from '@univerjs/ui';
import UIEnUS from '@univerjs/ui/locale/en-US';
import { UniverDataValidationPlugin } from '@univerjs/data-validation';
import { UniverSheetsDataValidationPlugin } from '@univerjs/sheets-data-validation';
import { UniverSheetsDataValidationUIPlugin } from '@univerjs/sheets-data-validation-ui';
import SheetsDataValidationUIEnUS from '@univerjs/sheets-data-validation-ui/locale/en-US';
import { FUniver } from '@univerjs/core/facade';
import { defaultTheme } from '@univerjs/design';
import '@univerjs/sheets-data-validation/facade';
import '@univerjs/engine-formula/facade';
import '@univerjs/docs-ui/facade';
import '@univerjs/sheets/facade';
import '@univerjs/sheets-ui/facade';
import '@univerjs/sheets-formula/facade';
import '@univerjs/sheets-numfmt/facade';
import '@univerjs/ui/facade';

// CSS Style of @univerjs/design and @univerjs/ui should be located before other styles
import '@univerjs/ui/lib/index.css';
import '@univerjs/design/lib/index.css';

import '@univerjs/sheets-data-validation-ui/lib/index.css';
import '@univerjs/docs-ui/lib/index.css';
import '@univerjs/sheets-ui/lib/index.css';
import '@univerjs/sheets-formula-ui/lib/index.css';
import '@univerjs/sheets-numfmt-ui/lib/index.css';

 const univer = new Univer({
      theme: defaultTheme,
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: merge(
          {},
          DesignEnUS,
          UIEnUS,
          SheetsEnUS,
          SheetsUIEnUS,
          SheetsFormulaUIEnUS,
          SheetsNumfmtUIEnUS,
          DocsUIEnUS,
          SheetsDataValidationUIEnUS,
        ),
      },
    });

    univer.registerPlugin(UniverRenderEnginePlugin);
    univer.registerPlugin(UniverUIPlugin, {
      container: containerElement.current as HTMLElement,
    });
    univer.registerPlugin(UniverFormulaEnginePlugin);
    univer.registerPlugin(UniverDocsPlugin, {
      hasScroll: false,
    });
    univer.registerPlugin(UniverDocsUIPlugin);

    univer.registerPlugin(UniverSheetsPlugin);
    univer.registerPlugin(UniverSheetsUIPlugin, {
      customComponents: new Set([UNIVER_SHEET_PERMISSION_BACKGROUND]),
    });
    univer.registerPlugin(UniverSheetsFormulaPlugin);
    univer.registerPlugin(UniverSheetsFormulaUIPlugin);
    univer.registerPlugin(UniverSheetsNumfmtPlugin);
    univer.registerPlugin(UniverSheetsNumfmtUIPlugin);
    univer.registerPlugin(UniverDataValidationPlugin);
    univer.registerPlugin(UniverSheetsDataValidationPlugin);
    univer.registerPlugin(UniverSheetsDataValidationUIPlugin);
    univer.registerPlugin(UniverLicensePlugin, {
      license: license,
    });

    univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});
    const univerAPI = FUniver.newAPI(univer);

and I use this univerAPI like this,

    const worksheet = univerAPI.getActiveSheet()?.worksheet;
    const fRange = worksheet!.getRange('A1');
    fRange.setValue(1234.567).setNumberFormat('#,##0.00');
    fRange.getDisplayValue(); // 1,234.57

then, I got This Error

160th line of UniverSheet.tsx is fRange.setValue(1234.567).setNumberFormat('#,##0.00');

I have no clue to solve this error.
I have looked around documentation, but I couldn't find it.

Please, let me know what I miss or what I do it wrong. :(

Thank you in advance.

[jikkai]

It appears to be an issue with the plugin registration order. Please refer to the documentation and adjust accordingly.

[GeunpyoKang]

It's still not working. and I couldn't find information about plugin order. if you don't mind, could you give me information in detail??

[GeunpyoKang]

@jikkai please help this. we bought univer license because It supports number format. please give any guide of it.

[jikkai]

Since you haven't provided a runnable online reproduction link—typically created using StackBlitz—we're unable to accurately diagnose the issue you're facing. However, here are some possible causes based on common scenarios:

1. The UniverUIPlugin should generally be registered after the UniverFormulaEnginePlugin and before the UniverDocsUIPlugin.
2. Certain facade APIs need to be called within the correct lifecycle stages. You can refer to the following documentation for more details:
   • Facade API Guide
   • Lifecycle Guide

If you can provide additional details, feel free to share them anytime. If you’ve purchased a license, you’re also welcome to reach out to us through official support channels for further assistance.