客户端使用vuecli 打包出来的commonjs模式的库，出现“Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any functio”

[linzhe]

客户端

• 1、main.js

  import Vue from "vue";
  import App from "./App.vue";
  import VueCompositionAPI from "@vue/composition-api";
  
  Vue.use(VueCompositionAPI);
  new Vue({
    render: (h) => h(App),
  }).$mount("#app");

• 2、app.vue

  <template>
    <div id="app">
      <TestDisplay></TestDisplay>
    </div>
  </template>
  
  <script setup>
  import { TestDisplay } from "zzz";
  </script>
  
  <style></style>

lib

• 1、组件TestDisplay

  <template>
    <div>{{ test.text }}</div>
  </template>
  <script>
  import { reactive } from "@vue/composition-api";
  export default {
    setup() {
      const test = reactive({ text: "xxxxxxxx" });
      console.log("only for setup", test);
      return { test };
    },
  };
  </script>

• 2、vue.config.js

  const { defineConfig } = require("@vue/cli-service");
  module.exports = defineConfig({
    configureWebpack: {
      externals: {
        "@vue/composition-api": "@vue/composition-api",
      },
    },
  });

• 3、 "build": "vue-cli-service build --mode production --target lib src/index.js"

报错vue.runtime.esm.js:619 [Vue warn]: Error in data(): "Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function."

我排查了下好像是因为库文件和客户端使用的入口不一样导致这个问题的，客户端使用mjs，库使用commonjs

但是我把main.js 修改成const VueCompositionAPI = require("@vue/composition-api");，这样确实不会报Error: [vue-composition-api] must call Vue.use(错误了
但是composition-api就会报错TypeError: Cannot read properties of undefined (reading 'text')"

[linzhe]

尝试用vite构建了一个es的包，可以正常使用

// vite.config.js
import { defineConfig } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";
import { resolve } from "path";
export default defineConfig({
  build: {
    lib: {
      entry: "./src/index.js",
    },
    minify: false,
    rollupOptions: {
      external: ["@vue/composition-api"],
      output: [
        {
          format: "es",
          dir: resolve(__dirname, "./dist/es"),
        },
      ],
    },
  },
  plugins: [createVuePlugin(/* options */)],
});

[linzhe]

解决方案

在客户端使用alias将@vue/composition-api，都统一成commonjs模块，就可以正常使用了

 configureWebpack: {
    resolve: {
      alias: {
        "@vue/composition-api": path.join(
          __dirname,
          "./node_modules/@vue/composition-api/index.js"
        ),
      },
    },
  },