Webpack Build Error: Can't resolve subcomponents within a PrimeVue UI component
Webpack Build Error: Can't resolve subcomponents within a PrimeVue UI component
我无法使用 webpack 构建某些 PrimeVue UI 组件。
我已经尝试了几个组件,所有基本组件都可以正常工作,但是一旦我尝试使用需要子组件的组件,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 错误还是用户(我)错误?
这是没有 babel 的完整配置吗?我会尽量妥善解决。
https://webpack.js.org/configuration/resolve/
resolve: {
alias: {
'@': res('src'),
'vue$': 'vue/dist/vue.esm.js'
},
modules: [res('node_modules')],
extensions: ['.js', '.vue', '.json']
},
resolveLoader: {
modules: [res('node_modules')]
}
我无法使用 webpack 构建某些 PrimeVue UI 组件。
我已经尝试了几个组件,所有基本组件都可以正常工作,但是一旦我尝试使用需要子组件的组件,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 错误还是用户(我)错误?
这是没有 babel 的完整配置吗?我会尽量妥善解决。
https://webpack.js.org/configuration/resolve/
resolve: {
alias: {
'@': res('src'),
'vue$': 'vue/dist/vue.esm.js'
},
modules: [res('node_modules')],
extensions: ['.js', '.vue', '.json']
},
resolveLoader: {
modules: [res('node_modules')]
}