Vue3迁移后使用带插槽组件报isCE相关TypeError（Rollup环境）

迁移Vue应用从v2到v3后，使用包含插槽（slot）的组件时触发如下错误：

Uncaught TypeError: Cannot read properties of null (reading 'isCE')

移除插槽后应用可正常运行，当前使用的rollup.config.js配置如下：

import vue from "rollup-plugin-vue"; // Handle .vue files
import resolve from "@rollup/plugin-node-resolve"; // Teach Rollup how to find external modules
import commonjs from "@rollup/plugin-commonjs"; // Convert CommonJS modules to ES6
import image from "@rollup/plugin-image";
import copy from "rollup-plugin-copy";
import pjson from "./package.json" assert { type: "json" };
import scss from "rollup-plugin-scss";
import url from "@rollup/plugin-url";

export default {
  external: ["vue"],
  input: "src/index.js", // Entry point for your app
  output: {
    format: "esm",
    file: "dist/library.js",
    exports: "auto",  
  },

  plugins: [
    resolve({
      browser: true, // Browser target (if necessary)
      dedupe: ["vue"], // Avoid duplicated packages
    }),

    scss({
      prefix: `@use 'sass:math'; @import "./src/css/index.scss";`,
    }),
    vue({
      template: {
        isProduction: true,
      },
    }),

    commonjs(),
    copy({
      targets: [
        { src: "src/css/index.scss", dest: "dist/" }, 
        { src: "src/img/*", dest: "img/" },
      
        {
          src: "src/config/lang/*",
          dest: "dist/lang",
          rename: (name, extension, fullPath) => `global_${name}.${extension}`,
        },
      ],
    }),
    image(), // Optional: Minify JavaScript
    url({
      // by default, rollup-plugin-url will not handle font files
      include: [
        "**/*.svg",
        "**/*.png",
        "**/*.jpg",
      
      ],
      publicPath: "/public",
    }),
  ],
};

问题原因 #

这个错误的核心原因是使用的rollup-plugin-vue版本不兼容Vue3。旧版rollup-plugin-vue是为Vue2设计的，无法正确处理Vue3的插槽编译逻辑，导致内部调用时出现空引用错误。

解决方案 #

1. 替换为Vue3兼容的Rollup Vue插件 #

卸载旧版插件，安装适配Vue3的版本：

npm uninstall rollup-plugin-vue
# 方案一：使用@vitejs/plugin-vue（推荐，Vite官方维护，兼容Rollup）
npm install @vitejs/plugin-vue --save-dev
# 方案二：安装rollup-plugin-vue的Vue3兼容版（v6+）
# npm install rollup-plugin-vue@next --save-dev

2. 更新rollup.config.js中的插件配置 #

• 如果选择@vitejs/plugin-vue，替换原有的插件引入：

  // 替换 import vue from "rollup-plugin-vue";
  import vue from "@vitejs/plugin-vue";
  
  // 插件配置无需额外修改，@vitejs/plugin-vue默认适配Vue3
  

• 如果选择rollup-plugin-vue@6+，调整配置明确指定Vue版本：

  vue({
    version: 3, // 强制指定使用Vue3编译逻辑
    template: {
      isProduction: true,
    },
  })
  

3. 确保Vue依赖版本正确 #

检查package.json，确认Vue版本为3.x，且无Vue2依赖残留：

"dependencies": {
  "vue": "^3.3.0"
}

4. 清理缓存并重新构建 #

rm -rf node_modules dist
npm install
npm run build

额外优化建议 #

• 移除功能重叠的插件：@rollup/plugin-url和rollup-plugin-image都处理图片资源，保留其中一个即可，避免冲突。比如保留@rollup/plugin-url并移除rollup-plugin-image。
• 确认resolve插件的dedupe: ["vue"]配置保留，防止重复打包Vue实例导致版本冲突。

内容的提问来源于stack exchange，提问作者Sheikh