Troubleshooting Common Issues in Wujie Micro‑Frontend Integration (WangEditor, Vue‑Office, Element‑Plus, etc.)

After using Wujie for a long time, the author shares a collection of problems that have been encountered in real projects, along with reproducible steps and concrete solutions, to help other developers avoid the same pitfalls.

Resolved Issues

1. WangEditor cannot edit or paste in the main app

Reproduction: The sub‑application works, but the main application cannot select text, paste, or use the toolbar.

Cause: The sub‑app runs inside an iframe and its DOM lives in the main app’s shadowDOM . The selection object obtained by document.getSelection() is from the main app, so selection instanceof window.Selection fails. Additionally, Selection.isCollapsed always returns true inside a shadow DOM.

Solution: Replace wangEditor with wangEditor‑next (still maintained) or switch to another rich‑text component such as vue‑quill . If getSelection still misbehaves, use the polyfill plugin selection .

2. Vue‑Office PDF preview shows a white screen in the main app

Reproduction: The PDF preview works inside the sub‑app but the main app loads a blank page.

Solution: Replace vue‑office (source not open) with an alternative PDF viewer such as kkfile , letting the backend generate a preview URL and displaying it in an iframe .

3. Element‑Plus styles or custom :root CSS are lost in development (vite4/vite5)

Reproduction: Styles work in the sub‑app but disappear in the main app.

Cause: Wujie converts :root to :host . When styles are imported in main.js (e.g., import 'element-plus/dist/index.css' ), Wujie cannot intercept the conversion.

Solution: Add the WujieVue plugin that patches style insertion, as shown in the code block below.

import WujieVue from 'wujie-vue';

4. el‑select and el‑table tooltip position offsets

Reproduction: Tooltips appear in the wrong place.

Cause: Element‑Plus relies on popper.js fixed positioning, but the sub‑app’s DOM is mounted on a shadowRoot , causing miscalculations.

Solution: Use the DocElementRectPlugin in WujieVue to correct the rectangle calculations.

// import { DocElementRectPlugin } from "wujie-polyfill";

For older Element‑Plus versions, a manual CSS fix can be applied:

body { position: relative !important; }
.el-popper { position: absolute !important; }

5. Asynchronous e.target becomes wujie‑app

Reproduction: After a delay, e.target points to the wujie‑app element instead of the original element.

Solution: Use the EventTargetPlugin :

import { EventTargetPlugin } from "wujie-polyfill";

6. Global styles pollute sub‑application elements

Reproduction: Global styles applied to html or body in the main project affect the sub‑project.

Solution: Scope styles in each project and keep global styles consistent between main and sub apps to avoid unexpected overrides.

Unresolved Issues

1. Custom events

Third‑party SDKs that dispatch custom events (e.g., new CustomEvent('update', { bubbles: true, composed: true }) ) do not propagate correctly between the main app and sub‑apps. The current workaround is to embed the affected component in an iframe until the framework bug is fixed.

2. Router navigation synchronization

When switching routes in both the main and sub applications, the browser back button sometimes requires two clicks to work. This issue is observed in the official demo and has no known fix yet.

Conclusion

Overall, Wujie provides a smooth micro‑frontend experience with minimal code changes, but some edge‑case bugs still exist compared to alternatives like qiankun. Developers should be aware of these pitfalls and apply the provided workarounds.