Vue项目升级至Vue3时构建报错：@vue/compiler-sfc触发TypeError

问题分析 #

这个报错触发于@vue/compiler-sfc的createBlock方法中，结合你的App.vue代码，核心原因有两个：

• Vue3里内置的<Transition>组件不再全局注册，必须手动导入后才能使用
• 项目依赖版本不匹配（比如vue-loader、@vue/compiler-sfc的版本和Vue3主版本不兼容）

解决方案 #

1. 手动导入并注册Transition组件 #

修改App.vue的script部分，补充Transition的导入与注册：

<script>
import AppNavigation from "./components/AppNavigation.vue";
import AppFooter from "./components/AppFooter.vue";
import { Transition } from 'vue'; // 新增导入语句

export default {
  name: "App",

  components: {
    AppNavigation,
    AppFooter,
    Transition // 新增组件注册
  },

  data: () => ({
    //
  }),
};
</script>

2. 对齐依赖版本 #

确保项目中以下依赖版本符合Vue3的要求：

• vue: ^3.x.x
• vue-loader: ^16.x.x（Vue3必须使用v16及以上版本的vue-loader）
• @vue/compiler-sfc: 版本号与vue主版本保持一致

修改package.json中的版本后，执行命令重新安装依赖：

# Windows系统
del /q node_modules && del package-lock.json
npm install

# macOS/Linux系统
rm -rf node_modules package-lock.json
npm install

3. 清理构建缓存 #

如果上述操作后仍报错，清理webpack等构建工具的缓存，再重新执行构建命令。

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