深入浅出关于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 表示我们需要解析这个文件 完美解决 热更新和不能使用插槽问题！