For dynamically configuring applications runtime features.


import { defineConfig } from '@modern-js/runtime';

Runtime configurations can usually be configured under the runtime of the modern.config.js, such as the router configuration.

The configuration in modern.config.js is determined at build time, If some configuration parameters are obtained at runtime, or if the configuration parameters are from a module (such as a component), then need use defineConfig API configuration on runtime.


@modern-js/app-tools has the same name API, Used to provide TS type for configuration, please distinguish them.

Function Signature

function defineConfig(Component, config): any;


  • Component: App root Component.
  • config: runtime config.


function App () {

defineConfig(App, {
  router: {
    supportHtml5History: false
  1. defineConfig can configuring runtime.stateruntime.router etc.

  2. defineConfig before configuring a property, such as router, you need to make sure that the modern.config.js has been configured to enable this feature.

  3. defineConfig incoming configuration will be merged with the configuration in modern.config.js. Taking router as an example, the final application configuration is as follows:

  // From `modern.config.js`
  // From `defineConfig`