vue.js - 集成使用@vue/composition-api 的组件库的运行时错误 : 'You must use this function within the "setup( )"method'

Question

对于以下问题的任何帮助将不胜感激!

情况:

我的 project包含两个包:

1. 子组件库

   • 包含单个 View About.vue以组合 API 风格编写(使用 vue2 辅助库 @vue/composition-api 和 vuex-composition-helpers )
   • 导出单个 RouteConfig
   • 构建为库

   views/About.vue ( child )

   <template>
     <div class="about">
       <h1>This is an about page (as component lib)</h1>
     </div>
   </template>
   
   <script>
   import { defineComponent } from "@vue/composition-api";
   import { createNamespacedHelpers } from "vuex-composition-helpers";
   
   export default defineComponent({
     components: {},
     setup(_, { root }) {
       const { useGetters, useActions } = createNamespacedHelpers("account"); // error thrown here!
     }
   });
   </script>
   

   router/index.ts ( child )

   export const routes: Array<RouteConfig> = [{
       path: "/",
       name: "About",
       component: () => import(/* webpackChunkName: "about" */ "../views/About.vue")
   }];
   

   lib.ts ( child )

   export const routes = require("@/router").routes;
   

   package.json ( child )

   "scripts": {
     "build": "vue-cli-service build --target lib --name child-component-lib src/lib.ts"
   ...
   

---

1. 父应用

   • 从child-component-lib导入路由进入它的路由器
   • 包含一个显示一行文本和一个 <router-view /> 的简单 View

   package.json ( parent )

   "dependencies": {
       "@tholst/child-component-lib": "file:../child-component-lib",
   

   router/index.ts ( parent )

   import { routes as childComponentRoutes } from "@tholst/child-component-lib";
   
   const routes: Array<RouteConfig> = [...childComponentRoutes];
   const router = new VueRouter({routes});    
   export default router;
   

   App.vue ( parent )

   <template>
     <div id="app">
       <Home />
       <router-view />
     </div>
   </template>
   
   <script>
   import { defineComponent } from "@vue/composition-api";
   import Home from "@/views/Home.vue";
   
   export default defineComponent({
     components: {
       Home
     },
     setup(_, { root }) {
       ...
     }
   });
   </script>
   

预期行为

它没有问题。

实际行为

我在控制台中看到错误输出。 [Vue warn]: Error in data(): "Error: You must use this function within the "setup()" method, or insert the store as first argument."该错误信息具有误导性，因为错误实际上是在 setup() 内部抛出的方法。可以追溯到getCurrentInstance()返回 undefined (在 @vue/composition-api 内)。

---

调查:

• 事实证明，当我包含相同的 About.vue 时，错误消失了在父应用程序本身中(只需切换路径，尝试一下)，即，当我们避免从构建的库中导入时它会起作用。
• 所以它看起来像是build设置的问题(vue.config.js、webpack、babel、typescript、...之一)

---

重现错误:

1。克隆、安装、运行

git clone git@github.com:tholst/vue-composition-api-comp-lib.git && cd vue-composition-api-comp-lib/child-component-lib && npm install && npm run build && cd ../parent-app/ && npm install && npm run serve

或一个接一个

git clone git@github.com:tholst/vue-composition-api-comp-lib.git
cd vue-composition-api-comp-lib/child-component-lib
npm install
npm run build
cd ../parent-app/
npm install
npm run serve

2。打开浏览器

• 转到 http://localhost:8080/

3。打开 Dev Tools 查看错误

[Vue warn]: Error in data(): "Error: You must use this function within the "setup()" method, or insert the store as first argument."

found in

---> <Anonymous>
       <App> at src/App.vue
         <Root>

错误截图

环境信息:

Node: 14.2.0
npm: 6.14.8
Chrome: 86.0.4240.198

npmPackages:
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    ...    
    @vue/cli-overlay:  4.5.8 
    @vue/cli-plugin-babel: 4.5.8 
    @vue/cli-plugin-router: 4.5.8 
    @vue/cli-plugin-typescript: 4.5.8 
    @vue/cli-plugin-vuex:4.5.8 
    @vue/cli-service: 4.5.8 
    @vue/cli-shared-utils:  4.5.8 
    @vue/component-compiler-utils:  3.2.0 
    @vue/composition-api: 1.0.0-beta.19 
    @vue/preload-webpack-plugin:  1.1.2 
    typescript: 3.9.7 
    vue: 2.6.12 
    vue-loader:  15.9.5 (16.0.0-rc.1)
    vue-router: 3.4.9
    vue-template-compiler: 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vuex: 3.5.1 
    vuex-composition-helpers: 1.0.21 

npmGlobalPackages:
    @vue/cli: 4.5.8

Answer 1

我终于明白问题出在哪里了。首先，存在实际问题。其次，本地开发设置中存在问题，导致实际问题的解决方案看起来不起作用。

实际问题+解决方案

child-component-lib 捆绑了他们自己版本的 npm 包 @vue/composition-api 和 vuex-composition-helpers。这产生了以下影响:当我运行父应用程序时，实际上有这些库的 两个实例 并且子组件库中的 vue 组件正在访问未正确访问的错误对象初始化。

解决方案是防止将这些库捆绑到子组件库中，方法是

1. 使它们成为 devDependencies 和 peerDependencies。

2. 指示 webpack 不要将它们捆绑在 npm run build 上。

   package.json

   "dependencies": {
       ...
   },
   "devDependencies": {
       "@vue/composition-api": "^1.0.0-beta.19",
       "vuex-composition-helpers": "^1.0.21",
       ...
   },
   "peerDependencies": {
       "@vue/composition-api": "^1.0.0-beta.19",
       "vuex-composition-helpers": "^1.0.21"
   },
   

   vue.config.js

   configureWebpack: {
       externals: {
           "@vue/composition-api": "@vue/composition-api",
           "vuex-composition-helpers": "vuex-composition-helpers"
       },
       ...
   }
   

让事情变得困难的棘手问题

我试图在本地解决这个问题，但没有实际发布包。它似乎有效，因为我在本地看到了与我在已发布的包中看到的相同的问题。

我通过直接链接父应用程序和子组件库来进行本地开发。我都试过了

1. 直接文件夹依赖

   package.json

   "dependencies": {
       "@tholst/child-component-lib": "file:../child-component-lib",
   },
   

2. npm 链接

   cd child-component-lib
   npm link
   cd ../parent-app
   npm link @tholst/child-component-lib
   

这两种方法的效果是它们实际上导入(=符号链接(symbolic link)到)子组件库的文件夹包含所有文件和文件夹(而不是仅导入将在 npm 包中发布的文件).

这意味着以下内容:尽管我已经从 bundle 中排除了两个组合 API 库并使它们成为开发/对等依赖项(参见实际问题的解决方案)，它们是仍然安装 并存在于子组件库的 node_modules 中。那个 node_modules 文件夹被符号链接(symbolic link)到 parent-app 包中。通过这种方式，child-component-lib 仍然可以访问我们想要从构建中排除的库的副本(参见实际问题)。我仍然像以前一样看到错误。

这样一来，我的本地开发方法就掩盖了一个事实，即实际问题的解决方案确实有效。