当使用`npm link`链接模块时，Vue 3组件错误初始化。

Question

以下是我的库的入口点，它会生成一个带有动态标签的组件:

// muvement.js

import { defineComponent, ref, onMounted, h } from 'vue';

const createMuvement = (tag) => {
    return defineComponent({
        name: `m-${tag}`,
        setup(props, context) {
            const root = ref(null);
            onMounted(() => {
                console.log(root.value);
            });
            return () => h(tag, { ...context.attrs, ref: root }, context.slots);
        }
    });
};

const muvement = (...tags) => {
    const components = {};
    tags.map((tag) => (components[`m-${tag}`] = createMuvement(tag)));
    return components;
};

export { muvement };

预计将像这样被使用：

// Home.vue

<template>
  <div>
    <m-div>div</m-div>
    <m-button>button</m-button>
  </div>
</template>

<script>
import { muvement } from "muvement";

export default {
  name: "Home",
  components: {
    ...muvement("div", "button")
  }
};
</script>

当库代码被包含在Vue应用程序文件夹中时（假设我们现在从"@/components/muvement.js"导入而不是"movement"），它将按预期工作。

-muvement-test-project (scaffolded with vue-cli)
    - src
        - views
            - Home.vue
        - components
            - muvement.js

我还发布了一个 alpha 版本，当您直接从 npm registry 安装它时（即使用 npm install muvement 而不是 npm link muvement），可以在导入 "muvement" 时正常工作。

问题

在开发过程中，我希望有一个独立于库目录的应用程序来测试该库。

我使用了 npm link 将库链接到测试应用程序中（就像我过去做过的许多其他项目一样）。

从 /path/to/library

$ npm link

来自 /path/to/test/app

$ npm link muvement

目前为止还不错。该模块在测试应用程序的node_modules文件夹中可用作符号链接。我导入{muvement} from "muvement"，运行npm run serve，然后...砰。
一切都爆炸了（请参见下面的错误）。值得注意的是，尝试从完整路径导入（即C:/dev/npm/muvment/dist/es/index.js）会导致与npm link相同的问题，因此我认为它与符号链接无关。

以下是控制台中显示的内容: 几乎整天我一直在尝试解决这个问题。我看到了几个看起来类似的问题，通过将Webpack的resolve.symlinks设置为false来解决，但这对我的问题没有影响。我已经仔细阅读了文档，甚至阅读了Vue的源代码（这里是有问题的代码行）。

由于警告表明错误通常归因于async setup，我认为Webpack可能正在执行某些使我的代码变成异步的奇怪操作。但事实并非如此，因为工作尝试和失败尝试的调用堆栈完全相同。

不同的是范围不同。

以下是示例有效的范围：
以下是失败的一种：
（请注意，在调用injectHook时target参数为null，这显然促使Vue显示警告）。

我的问题是，为什么在执行该模块期间导入模块的位置会产生如此大的差异？

该库的代码和构建设置在此处可用:
https://github.com/justintaddei/muvement

测试应用程序在此处可用：
https://github.com/justintaddei/muvement/tree/example

如果我漏掉了重要的东西，请在评论中告诉我。由于今天很长，我肯定可能错过了某些事情。

谢谢。

- Justin Taddei

---

你有找到解决办法吗？我遇到了相同的问题，但是是在 inject 这里。 - Craig Harshbarger

Answer 1

你的应用程序存在问题，它在内部使用了两个不同版本的vue依赖项。Vue要求使用相同的依赖项来跟踪响应性、生命周期等。

当你链接一个库时，npm/yarn将使用该链接文件夹node_modules，但是你的app正在使用它自己的node_modules中的依赖项。

当你的app导入vue时，它会去app/node_modules/vue，但是当你从链接的依赖项导入时，它将会去linked_dep/node_modules/vue。

app
  node_modules
    vue
linked library
  node_modules    
    vue

调试此问题的一种简单方法是将两个vue依赖文件都更改为console.log，并检查控制台是否同时记录。

- pikax

---

有关于此问题的解决方法吗？我能想象更多开发人员会遇到这个问题。 - Mallesbixie