show an error message if browser is not supported

First and foremost I want to mention that it might be a bad idea to do this. Browsers are update at quite a fast pace and users might not be able to update often due to for example some company policy. A better approach would be to use feature detection, where you check if a specific feature is supported by the browser. This might be a bit more work, but gives an actual reason to tell people that their browser is not supported.

You can use the browserslist-useragent-regexp package to generate a regular expression from your browserslist configuration. You can write this regular expression to a file and use it to test if navigator.userAgent is supported by your configuration. The README file in the browserslist-useragent-regexp repository contains an example setup.

Another options is to use the browserslist-useragent package, you can give this tool a user-agent and a browserslist configuration to check if a specific user-agent matches the browserslist configuration. This option might need some more research as it seems to be aimed first at Node.js applications.

This option seems to be abandoned and has some dependencies which are no longer maintained, so proceed at your own risk. obsolete-webpack-plugin can also be used which requires less setup if you're already using Webpack 4 in your project. It can be used with HtmlWebpackPlugin and it creates a new chunk which will insert an HTML snippet in your page when a browser is not supported.