VueCarousel生产构建报错TypeError: r is not a function求助

问题描述 #

在Web应用中使用vue-carousel包时，生产环境抛出如下错误：

TypeError: r is not a function
    at t (vue.common.prod.js:11:68600)
    at s.__patch__ (vue.common.prod.js:11:70431)
    at t._update (vue.common.prod.js:11:43128)
    at s.o (vue.common.prod.js:11:77577)
    at In.get (vue.common.prod.js:11:26615)
    at In.run (vue.common.prod.js:11:27259)
    at Ge (vue.common.prod.js:11:17853)
    at Array.<anonymous> (vue.common.prod.js:11:21774)
    at fn (vue.common.prod.js:11:21202)

开发过程中曾收到警告Could not find a declaration file for module 'vue-carousel'，已创建.d.ts文件声明模块，尝试移除自定义组件内的Carousel/Slide导入后问题仍未解决。当前代码导入方式如下：

主文件app.js #

import Vue from "vue";
import { Carousel, Slide } from "vue-carousel";
import CustomCarousel from "./components/employees/CustomCarousel.vue";

var app = new Vue({
    el: "#app",
    components: {
        Carousel,
        Slide,
        CustomCarousel,
    },
});

自定义组件CustomCarousel.vue #

<script>
import { Carousel, Slide } from "vue-carousel";

export default {
    name: "CustomCarousel",
    components: {
        Carousel,
        Slide,
    },
};
</script>

解决方案 #

1. 全局注册组件，避免局部重复导入 #

当前在主文件和自定义组件中重复局部注册Carousel和Slide，可能导致生产打包时组件实例冲突。改为全局注册：
修改app.js：

import Vue from "vue";
import { Carousel, Slide } from "vue-carousel";
import CustomCarousel from "./components/employees/CustomCarousel.vue";

// 全局注册组件，所有子组件可直接使用
Vue.component("Carousel", Carousel);
Vue.component("Slide", Slide);

var app = new Vue({
    el: "#app",
    components: {
        CustomCarousel,
    },
});

移除CustomCarousel.vue内的导入和局部注册：

<script>
export default {
    name: "CustomCarousel"
};
</script>

2. 校验版本兼容性 #

vue-carousel的版本需与项目Vue版本匹配：

• vue-carousel v0.18.0及以上适配Vue 2.x，若项目Vue版本低于2.x，需降级vue-carousel或升级Vue。
• 执行以下命令查看当前版本：

npm list vue vue-carousel

若版本不兼容，安装适配版本：

# 安装适配Vue2的稳定版示例
npm install vue-carousel@0.18.0 --save

3. 配置打包工具转译vue-carousel #

部分情况下，vue-carousel的源码未转译为ES5，生产打包时会触发错误。在Vue项目的vue.config.js（或Webpack配置文件）中添加转译配置：

module.exports = {
  transpileDependencies: ['vue-carousel']
}

4. 使用完整导入方式 #

尝试通过Vue.use()全局引入整个包，替代解构导入：
修改app.js：

import Vue from "vue";
import VueCarousel from "vue-carousel";
import CustomCarousel from "./components/employees/CustomCarousel.vue";

Vue.use(VueCarousel);

var app = new Vue({
    el: "#app",
    components: {
        CustomCarousel,
    },
});

此时自定义组件内可直接使用<carousel>和<slide>标签，无需额外导入。

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