Troubleshooting

Installation Related

Why am I getting an error when importing Univer in my webpack 4 project?

• Webpack 4 may not recognize the exports field in packages.json correctly. Please refer to webpack/webpack#9509 for more details. You need to locate the correct path and import it manually. Some third-party dependencies may require setting up aliases using resolve.alias in the configuration.
• In some webpack 4 scaffolds, the default babel configuration may not handle dependencies under node_modules. You may need to manually modify the webpack rules and add @univerjs/* to the include configuration of babel-loader.

We have provided an online demo based on webpack 4 that might help you resolve this issue.

Why do some plugins report errors when registering while using <script> to introduce the Univer UMD package?

• Please make sure you have introduced the prerequisite dependencies used by the plugins in order.
• You can find the prerequisite dependencies required for the plugin to run in the peerDependencies field of the plugin’s documentation page or the packages.json of the plugin source code.

Why do I get an error outputting that Could not resolve dependencies when I use npm or yarn to install?

This may be because the version of the node package manager you are using is too low. yarn and npm@6 will not automatically install peerDependencies in packages.json. For more details, see package-json#peerdependencies.

• You can manually install the missing peer dependencies.
• For npm users, you can upgrade your node version to 16 or above, or upgrade your npm version to 7 or above. Be aware that the upgrade behavior may affect your existing projects.

Usage Related

📊 How to get the data in the cell editor in real time?

The cell editor of Univer Sheets is essentially the editor of Univer Doc, so you can use the Facade API to get the snapshot data in the currently active Univer Docs editor.

univerAPI.onCommandExecuted((command) => {
  const { id } = command;
  if (id === 'doc.command.insert-text' || id === 'doc.command.delete-text') {
    const doc = univerAPI.getActiveDocument();
    if (doc) {
      const snapshot = doc.getSnapshot();
      console.log(snapshot.body?.dataStream);
    }
  }
});

Reference: https://github.com/dream-num/univer/discussions/2261

📊 When the cell editor is focused and an external button is clicked to trigger an event, the snapshot obtained does not contain the data of the focused cell.

The data of the cell will be synchronized to the snapshot when it loses focus, so you should defocus the cell before obtaining the snapshot data.

import { DeviceInputEventType } from '@univerjs/engine-render';
import { FUniver } from '@univerjs/core';
 
const univerAPI = FUniver.newAPI(univer);
 
$btn.addEventListener('click', () => {
  univerAPI.executeCommand('sheet.operation.set-cell-edit-visible', {
    visible: false,
    _eventType: DeviceInputEventType.PointerUp,
  });
});

Reference: https://github.com/dream-num/univer/issues/1314

Development Related

Why are the menu items not displayed in the correct language?

This is because you have missed the corresponding locales. You need to pass the corresponding locales when initializing Univer. For more details, please refer to the documentation on the internationalization of each feature.

Does Univer collect my data?

Univer collects data about how users interact with the platform. This data helps the Univer team identify usage patterns, troubleshoot issues, and make informed decisions about new features and improvements.

Univer does not capture any data returned by your API, database, or third-party tools. All data captured from private deployment instances is completely anonymous to prevent user information leakage.

You can choose to disable this feature

1. Go to the docker-compose/configs directory, modify the config.yaml file

statsConf:
  timeInterval: 10
  maxRecords: 10
  addr: "https://www.univer.ai/univer-cloud/stats/report" // Remove this configuration item

2. Restart the service

bash run.sh

Integration Related

Using React

First, make sure your React version is 16.9 or higher, as Univer’s UI layer depends on React and uses React Hooks.

In addition, there is currently no support for React’s StrictMode due to the Univer DI mechanism. You can resolve this issue by removing StrictMode.

- <React.StrictMode>
  <App />
- </React.StrictMode>

Using Angular

When using Angular CLI to create a project template, you need to ensure that "skipLibCheck": true is configured in tsconfig.json before importing Univer:

{
  "compilerOptions": {
+    "skipLibCheck": true
  }
}

Errors

Error: [ThemeService]: current theme is not set!

Error: [ThemeService]: current theme is not set!

This error occurs because you have not set the theme when using Univer. You need to set the theme as follows:

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
      [LocaleType.EN_US]: enUS,
  },
});

Error: [LocaleService]: Locale not initialized

Error: [LocaleService]: Locale not initialized

This error occurs because you have not initialized the locales when using Univer. You need to initialize the locales as follows:

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
      [LocaleType.EN_US]: enUS,
  },
});