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 (opens in a new tab) 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 (opens in a new tab).

• 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

Why can't I use the right-click context menu paste in Firefox?

Firefox does not yet support clipboard.readText(), as mentioned in the MDN documentation (opens in a new tab). In this case, Univer can only retrieve clipboard content from native paste events, which means it can only support paste through keyboard shortcuts.

Why can't I copy and paste?

In browsers such as Chrome and Safari that support clipboard.readText(), Univer will attempt to directly access the clipboard content. Please make sure that the user performing the operation has granted Univer browser clipboard permissions.

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

The cell editor of Univer Sheet is essentially the editor of Univer Doc, so you can use the Facade API to get the snapshot data in the currently active Univer Doc 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 (opens in a new tab)

📊 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/facade';
 
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 (opens in a new tab)

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.

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.ZH_CN,
  locales: {
      [LocaleType.ZH_CN]: zhCN,
  },
});

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,
  },
});