Making Buefy work with unplugin-vue-components and webpack 5

[vivekdsilva]

Overview of the problem

I am trying to making Buefy work with unplugin-vue-components and webpack 5.

Buefy version: 0.9.23
Vuejs version: 2.7.14
OS/Browser:

Description

In webpack.config.js I have the below init for the plugin:
const Components = require('unplugin-vue-components/webpack')

under the plugins section:
plugins: [
Components({
resolvers: [
(componentName) => {
// where componentName is always CapitalCase
if (componentName.match(/^B[A-Z]/)) {
return { name: componentName.substring(1), from: 'buefy' }
}
}
],
}),
]

The I do not see an error during the build process, but when using vue dev tools the components show up as "Anonymous Component".

The plugin VueAutomaticImportPlugin works great with webpack 4, but it does not support webpack 5. Hence I am trying to use unplugin-vue-components. Am I missing something?

Expected behavior

The buefy components should automatically be imported and displayed.

Actual behavior

The buefy components show up as "Anonymous Component"