Browser Compatibility

Browserslist Configuration

Modern.js supports setting the browserslist for your web applications. You can set the value of Browserslist in the .browserslistrc file.

When you create a new Modern.js project, it will includes a .browserslistrc configuration by default, which means that the JavaScript code will be compiled to ES6.

chrome >= 51
edge >= 15
firefox >= 54
safari >= 10
ios_saf >= 10

Please refer to Rsbuild - Browserslist for more information.


Polyfill At Compile

Modern.js defaults to importing corresponding polyfill code from [core-js] ( during compilation.

By default, the required Polyfill code will be introduced according to the settings of the Browserslist, so there is no need to worry about the Polyfill problem of the project source code and third-party dependencies, but because it contains some Polyfill code that is not used, the final bundle size may be increased.


For case where Polyfill is not required for third-party dependencies, you can set 'output.polyfill' to usage, so that Babel compiles only Polyfill code based on the syntax used in the code.

Polyfill At Runtime

Modern.js also provides a runtime Polyfill solution based on browser UA information, which has the following advantages over Babel:

  • It will not be inserted into the code, reducing the code .
  • The same browser will share a Polyfill code. Therefore, with more and more projects, the UA-based Polyfill code will be delivered faster and faster.

exec pnpm run new to enable this features:

? Please select the operation you want: Enable features
? Please select the feature name: Enable UA-based Polyfill Feature

After executing the command, register the Polyfill plugin in modern.config.ts:

import { polyfillPlugin } from '@modern-js/plugin-polyfill';

export default defineConfig({
  plugins: [..., polyfillPlugin()],

After configuring output.polyfill as ua and executing pnpm run build & & pnpm run serve to start the server, visiting the page can see that the HTML artifacts contains the following script:

<script src="/__polyfill__" crossorigin></script>

Visit the page http://localhost:8080/__polyfill__ on Chrome 51 to see:



This feature only works when using Modern.js built-in Web Server.

If you need to customize the HTML template, please refer to HTML Template. Manually modifying the template through html.template / tools.html will cause this feature not work.