关于npmlink的问题

深入浅出关于Npm linl的问题

关键词：

vue3报错 Uncaught TypeError: Cannot read properties of null (reading 'isCE') at renderSlot

npm link 无法实现热更新

我的开发环境是

"vue": "^3.2.13"

今天在使用 rollup搭建组件库的时候我发现我的组件库不能实现热更新我本地的项目是通过npm link去链接到我本地打包的ui libs 为啥不能热更新呢大家可以看看我上一篇文章我当时是在组件库的vue组件中使用了插槽当我一旦使用了插槽如果不对webpack进行配置他会给我报错报什么错位大家可以看一下；这个文章记录的很详细

我的问题跟他不能说很像只能说一毛一样

复制代码

https://cloud.tencent.com/developer/ask/sof/106913760/answer/132194925

这里我再废话一下我怕文章链接失效

大致的问题就是我使用了插槽打包后引入我的组件库就会报错

当我把slot注释掉页面又可以运行了大致锁定了问题我就开始找解决方法

最终我的解决方案是：

在vue.config.js中添加如下配置

复制代码

const { defineConfig } = require('@vue/cli-service')
const path = require("path");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
   // 👇🏻 这个配置
   resolve: {
     symlinks: false,//留意一下这里
      alias: {
        vue: path.resolve("./node_modules/vue"),
     },
    },
  },
  /* 
  这段代码是在webpack配置文件中的resolve字段中，用于解析模块的路径配置。具体解释如下：
 symlinks: false表示不解析符号链接，即webpack不会对项目中的符号链接进行处理。
 alias用于创建别名，将某个模块的路径映射到另一个路径上，这里是将"vue"模块的路径映射到node_modules/vue目录下。
 这样在项目中引用vue模块时，直接使用import Vue from "vue"即可，而不需要指定完整的路径。
  */
})

问题的原因是什么?

造成这个的原因是有两个不同的vue版本，就可能下载的其他的第三方和当前的vue版本不相同，就有两个vue的副本，在引入的时候， npm去尝试引入的地址不对

解决方案

1.由于npm的引入地址不对，那我们使用yarn，删除node_modules，使用yarn安装，生成新的yarn.lock 然后执行安装

2.修改配置文件

复制代码

vite搭建的项目，在 vite.confg.js 文件中添加如下配置:
 resolve: {
	  dedupe: [
	    'vue'
	  ]
},

webpack（vue-cli）搭建的项目，在vue.config.js文件中添加如下配置:
const { defineConfig } = require('@vue/cli-service')
const path = require("path");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      symlinks: true,
      alias: {
        vue: path.resolve("./node_modules/vue"),
      },
    },
  },
})

到这里问题确实解决了 slot也能使用了

但是的的rollup热更新没法用了

最开始我是以为是npm link的问题经过查看源码确定不是npm link的问题

什么问题呢 symlinks: false,

但是的的rollup热更新没法用了

最开始我是以为是npm link的问题经过查看源码确定不是npm link的问题

什么问题呢 symlinks: false,

symlinks: false表示不解析符号链接意思就是你link进来的包我不管我不解析这怎么行所以我们把他改成 true 表示我们需要解析这个文件完美解决热更新和不能使用插槽问题！