Used to start and mount App, usually not manually called. This API is only required when using Custom Bootstrap.


import ReactDOM from 'react-dom/client';
import { bootstrap } from '@modern-js/runtime';

bootstrap(App, 'root', undefined, ReactDOM);

Function Signature

type BootStrap<T = unknown> = (
  App: React.ComponentType,
  id: string | HTMLElement | RuntimeContext,
  root?: any,
  ReactDOM?: {
    render?: Renderer;
    hydrate?: Renderer;
    createRoot?: typeof createRoot;
    hydrateRoot?: typeof hydrateRoot;
) => Promise<T>;


  • AppComponent: The ReactElement instance created by createApp.
  • rootId: DOM root element id to mount, such as "root".
  • root: The return value of ReactDOM.createRoot, used for scenarios where the root needs to be destroyed outside of the bootstrap function.
  • ReactDOM: The ReactDOM object, used to differentiate between React 18 and React 17 APIs.


import ReactDOM from 'react-dom/client';
import { createApp, bootstrap } from '@modern-js/runtime';

function App() {
  return <div>Hello Modern.js</div>;

const WrappedApp = createApp({
  // customized plugin
  plugins: [customPlugin()],

bootstrap(WrappedApp, 'root', undefined, ReactDOM);

since @modern-js/runtime/plugins is a alias, when used in a ts project, its type needs to be declared, Just add the following type declarations to src/modern-app-env.d.ts:

declare module '@modern-js/runtime/plugins';

bootstrap only supported for use in CSR.