特定の PrimeVue UI コンポーネントを webpack でビルドできません。
いくつかのコンポーネントを試しましたが、基本的なものはすべて正常に動作しますが、サブコンポーネントを必要とするコンポーネントを使用しようとすると、webpack のビルドに失敗します。Breadcrumb コンポーネントと PanelMenu コンポーネントでこれを経験しました。
エラーは次のとおりです。
ERROR in ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './PanelMenuSub' in '/my-application-directory/node_modules/primevue/components/panelmenu'
@ ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&) 27:0-42 86:24-36
@ ./node_modules/primevue/components/panelmenu/PanelMenu.vue?vue&type=script&lang=js&
@ ./node_modules/primevue/components/panelmenu/PanelMenu.vue
@ ./node_modules/primevue/panelmenu.js
@ ./interface/html5/vue-components/Menu.js
@ ./interface/html5/vue-components/App.js
@ ./interface/html5/vue-main.js
私のwebpack構成は次のとおりです。
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'development',
entry: 'vue-main.js',
output: {
filename: 'vue-main.bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
// the below will apply to both plain `.js` files AND `<script>` blocks in `.vue` files
// the below will apply to both plain `.css` files AND `<style>` blocks in `.vue` files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
コンポーネントは、ドキュメントに記載されているとおりに使用されます。
何が原因でしょうか? Breadcrumb コンポーネントでも同じことが起こっていますが、BreadcrumbItem コンポーネントが見つからない点が異なります。node_modules ディレクトリを確認したところ、ファイルはそこにあります。
これは webpack 構成ファイルの問題ですか、PrimeVue のバグですか、それともユーザー (私) のエラーですか?