{"id":20951,"library":"asma-qiankun-plugin-vite","title":"qiankun-plugin-vite","description":"A Vite plugin (v0.2.9) for integrating micro-apps with Qiankun, supporting ES modules and HMR in development. Maintains Vite's fast build while adding Qiankun lifecycle hooks and sandbox window. Releases are infrequent with minor patches. Unlike qiankun's own plugin, this one uses a separate helper import for lifecycle utilities and explicitly avoids JavaScript sandbox in favor of manual qiankunWindow usage. Requires Vite >=2 and TypeScript >=4. Current version is stable and feature-complete.","status":"active","version":"0.2.9","language":"javascript","source_language":"en","source_url":"https://github.com/Carasent-ASMA/qiankun-plugin-vite","tags":["javascript","qiankun","vite","esm","esModule","typescript"],"install":[{"cmd":"npm install asma-qiankun-plugin-vite","lang":"bash","label":"npm"},{"cmd":"yarn add asma-qiankun-plugin-vite","lang":"bash","label":"yarn"},{"cmd":"pnpm add asma-qiankun-plugin-vite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: plugin hooks into Vite's build and dev server.","package":"vite","optional":false},{"reason":"Peer dependency: plugin ships TypeScript types and requires TS >=4 for compilation.","package":"typescript","optional":true}],"imports":[{"note":"qiankun is a named export, not default.","wrong":"import qiankun from 'asma-qiankun-plugin-vite';","symbol":"qiankun","correct":"import { qiankun } from 'asma-qiankun-plugin-vite';"},{"note":"Helpers are exported from the submodule 'helper', not main entry.","wrong":"import { generateQiankunHelpers } from 'asma-qiankun-plugin-vite';","symbol":"generateQiankunHelpers","correct":"import { generateQiankunHelpers } from 'asma-qiankun-plugin-vite/helper';"},{"note":"qiankunWindow is not a direct export; you must call generateQiankunHelpers to obtain it.","wrong":"import { qiankunWindow } from 'asma-qiankun-plugin-vite/helper';","symbol":"qiankunWindow","correct":"import { generateQiankunHelpers } from 'asma-qiankun-plugin-vite/helper'; const { qiankunWindow } = generateQiankunHelpers('appName');"}],"quickstart":{"code":"// vite.config.ts\nimport { qiankun } from 'asma-qiankun-plugin-vite';\n\nexport default {\n  plugins: [qiankun('myMicroAppName')],\n  base: 'http://xxx.com/'\n}\n\n// main.ts\nimport { generateQiankunHelpers } from 'asma-qiankun-plugin-vite/helper';\nconst { renderWithQiankun, qiankunWindow } = generateQiankunHelpers('myMicroAppName');\n\nrenderWithQiankun({\n  mount(props) {\n    console.log('mount');\n    const { container } = props;\n    const root = container?.querySelector('#root') || document.querySelector('#root');\n    ReactDOM.render(<App />, root);\n  },\n  bootstrap() { console.log('bootstrap'); },\n  unmount(props: any) {\n    const { container } = props;\n    const root = container?.querySelector('#root') || document.querySelector('#root');\n    ReactDOM.unmountComponentAtNode(root);\n  },\n});\n\nif (!qiankunWindow.__POWERED_BY_QIANKUN__) {\n  ReactDOM.render(<App />, document.querySelector('#root'));\n}","lang":"typescript","description":"Configures Vite with the qiankun plugin, then sets up Qiankun lifecycle hooks and conditional rendering based on sandbox flag."},"warnings":[{"fix":"Always use qiankunWindow from generateQiankunHelpers instead of window for shared state.","message":"ES module loading conflicts with Qiankun's JavaScript sandbox. Micro-apps do NOT run inside sandbox; window assignments may leak.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Conditionally exclude hot-reload plugin when useDevMode is enabled: e.g., ...(useDevMode ? [] : [reactRefresh()])","message":"useDevMode conflicts with hot-reload plugins like @vitejs/plugin-react-refresh. Disable hot-reload when useDevMode=true.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Replace direct imports with destructured calls to generateQiankunHelpers.","message":"qiankunWindow and renderWithQiankun are only accessible via generateQiankunHelpers('appName'), not direct imports from the package.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Ensure both calls use the same string, typically defined in the host's registerMicroApps.","message":"The 'appName' argument to qiankun() and generateQiankunHelpers() must match the host's registered app name exactly.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import { generateQiankunHelpers } from 'asma-qiankun-plugin-vite/helper' (note the subpath).","cause":"Import path does not include '/helper' or module resolution is misconfigured.","error":"Cannot find module 'asma-qiankun-plugin-vite/helper'"},{"fix":"Use import { qiankun } from 'asma-qiankun-plugin-vite' (curly braces).","cause":"Default import used instead of named import.","error":"TypeError: qiankun is not a function"},{"fix":"Ensure correct import and invocation: const { qiankunWindow } = generateQiankunHelpers('myMicroAppName'); then use qiankunWindow.customxxx = 'ssss'.","cause":"qiankunWindow is undefined because generateQiankunHelpers was not called or incorrect import path.","error":"Uncaught TypeError: Cannot set properties of undefined (setting 'customxxx')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}