Webpack构建错误:无法解析PrimeVue UI组件内的子组件 [英] Webpack Build Error: Can't resolve subcomponents within a PrimeVue UI component

问题描述

我无法使用webpack构建某些PrimeVue UI组件.

I am unable to build certain PrimeVue UI components with webpack.

我尝试了几个组件，所有基本组件都可以正常工作，但是一旦我尝试使用需要子组件的组件，webpack就无法构建.到目前为止，我已经使用了Breadcrumb和PanelMenu组件.

I have tried several components, and all the basic ones work fine, but as soon as I try and use a component that requires a sub-component, webpack fails to build. I experienced this so far with the Breadcrumb and PanelMenu components.

错误是:

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配置如下:

My webpack config is as follows:

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()
    ]
};

该组件的使用与文档中所述完全相同.

The component is used exactly as described in the documentation.

可能是什么原因造成的? Breadcrumb组件也发生了同样的情况，只是找不到BreadcrumbItem组件.我检查了node_modules目录，并且文件在那里.

What could be causing this? The same is happening with the Breadcrumb component, except it can't find the BreadcrumbItem component. I checked the node_modules directory and the files are there.

这是webpack配置文件问题，PrimeVue错误还是用户(我)错误?

Is this a webpack config file problem, a PrimeVue bug, or a user (me) error?

推荐答案

这是没有babel的完整配置吗?我会设法解决.

is that your full config without babel? I would try to resolve properly.

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组件内的子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！