将组件从应用程序移动到库时出错

Posted 2023-02-22

【中文标题】将组件从应用程序移动到库时出错

【英文标题】：Error while moving component from application to a library

【发布时间】：2020-03-31 17:47:36

【问题描述】：

我在 Vuetify 2.x 之上创建组件库时遇到了麻烦。

我创建了一个简单的导航抽屉包装器：

<template>
    <v-navigation-drawer app v-model="drawer">
        <v-list-item>
            <v-list-item-content>
                <v-list-item-title class="title">
                    Application
                </v-list-item-title>
                <v-list-item-subtitle>
                    subtext
                </v-list-item-subtitle>
            </v-list-item-content>
        </v-list-item>
    </v-navigation-drawer>
</template>

<script>
export default 
    name: 'MySidebar',
    data: () => (
        drawer: null,
    ),
;
</script>

当这个组件放在我的应用程序中时，它会按预期工作。但是，当同一个组件在库中时，应用程序会崩溃。

<template>
    <v-app>
        <my-sidebar/>
    </v-app>
</template>

<script>
import MySidebar from 'my-library/src/components/MySidebar.vue'; // Error
import MySidebar from './src/components/MySidebar.vue'; // Works

export default 
    name: 'App',
    components: 
        MySidebar,
    ,
;
</script>

在第一次导入时，应用程序无法获取this.$vuetify 对象，但是当我console.log(this.$vuetify) 时，它就在那里。

一些控制台消息：

TypeError: Cannot read property 'breakpoint' of undefined
    at VueComponent.isMobile (VNavigationDrawer.ts?6ca0:193)
    at Watcher.get (vue.runtime.esm.js?f9ee:4473)
    ...

[Vue warn]: Error in getter for watcher "isMobile": "TypeError: Cannot read property 'breakpoint' of undefined"

found in

---> <VNavigationDrawer>
       <MySidebar> at my-library/src/components/MySidebar.vue
         <VApp>
           <App> at src/App.vue
             <Root>
...

TypeError: Cannot read property 'breakpoint' of undefined
    at VueComponent.isMobile (VNavigationDrawer.ts?6ca0:193)
    at Watcher.get (vue.runtime.esm.js?f9ee:4473)
    ...

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'application' of undefined"

found in

---> <VNavigationDrawer>
       <MySidebar> at my-library/src/components/MySidebar.vue
         <VApp>
           <App> at src/App.vue
             <Root>

其他信息：

我的库已将 vuetify 作为开发依赖项提出建议 我正在通过npm link 使用库

【参考方案1】：

在 Vuetify 团队的帮助下，我发现问题在于 Webpack 使用的是库中的 Vuetify，而不是应用程序中的。这是由于在 my-app 上使用 npm link 来使用 my-library 以及作为开发依赖安装在 my-library 上的 Vuetify 造成的。

一些可能的解决方案：

在我的库中，使用 npm install --only=prod 而不是 npm install。这将通过不在库上安装 Vuetify 来防止冲突。 在我的应用程序上，将以下行添加到vue.config.js：

const path = require('path');

module.exports = 
    publicPath: process.env.VUE_APP_PUBLIC_PATH,
    configureWebpack: 
        resolve: 
            alias: 
                /* Use vuetify from my-app, not from my-library */
                vuetify: path.resolve(__dirname, 'node_modules/vuetify'),
            ,
        ,
    ,
;

这将明确告诉 Webpack 从 my-app 选择 V​​uetify 安装。

其他不符合我要求的解决方案：

停止使用npm link 不要在我的库上安装 Vuetify，只在我的应用上安装它

【讨论】：

添加 vue: path.resolve('./node_modules/vue') 作为父应用程序的 vue.config.js 的别名解决了我的问题。我在父应用的 package.json 中引用了子库作为本地文件依赖项。

【参考方案2】：

我遇到了完全相同的问题，并通过删除组件库文件夹中的 node_modules 文件夹（即您的情况下为 rm -rf my-library/node_modules）解决了它。

【讨论】：

您好 Jack，感谢您提醒我这个问题。我发布了一个针对此问题的 4 种可能解决方案的答案。