将TypeScript Vue组件导入JavaScript Vue3项目编译报错求助

DevOps 小满

2026-7-12

Vue3项目集成vue-pro-calendar组件编译错误解决方案

问题背景

在Vue3 JavaScript项目中引入vue-pro-calendar组件，创建ProCalendar.vue并复制官方示例代码，同时在main.js中注册组件后，执行npm run dev出现3个编译错误：ESLint解析错误、模块解析错误。已尝试安装typescript和ts-loader，但问题未解决。

编译错误信息

INFO  Starting development server...


 ERROR  Failed to compile with 3 errors                                                                                  19:54:20

[eslint]
C:\Users\chuan\Documents\GitHub\PraePlan\services\frontend\src\main_components\home_components\ProCalendar.vue
  3:19  error  Parsing error: Unexpected token, expected "," (3:19)

✖ 1 problem (1 error, 0 warnings)


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
 error  in ./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts

Module parse failed: Unexpected token (3:19)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { defineComponent as _defineComponent } from 'vue'
| import "vue-pro-calendar/style";
> import { ref, type Ref } from "vue";
| import type { Configs, Appointment } from "vue-pro-calendar";
|

 error  in ./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true        

Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/templateLoader.js
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
|
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
|   const _component_pro_calendar = _resolveComponent("pro-calendar", true)!
|

ERROR in ./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts (./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts) 3:19      
Module parse failed: Unexpected token (3:19)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { defineComponent as _defineComponent } from 'vue'
| import "vue-pro-calendar/style";
> import { ref, type Ref } from "vue";
| import type { Configs, Appointment } from "vue-pro-calendar";
|
 @ ./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts 1:0-147 1:0-147 1:148-284 1:148-284  
 @ ./src/main_components/home_components/ProCalendar.vue 2:0-73 3:0-68 3:0-68 6:49-55
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/Home.vue?vue&type=script&lang=js 2:0-60 33:4-15
 @ ./src/main_components/Home.vue?vue&type=script&lang=js 1:0-196 1:0-196 1:197-382 1:197-382
 @ ./src/main_components/Home.vue 2:0-55 3:0-50 3:0-50 6:49-55
 @ ./src/router/index.js 2:0-42 27:13-17
 @ ./src/main.js 3:0-30 6:30-36

ERROR in ./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true) 3:27
Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/templateLoader.js
 * ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
|
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
|   const _component_pro_calendar = _resolveComponent("pro-calendar", true)!
|
 @ ./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true 1:0-216 1:0-216
 @ ./src/main_components/home_components/ProCalendar.vue 1:0-80 6:68-74 16:79-18:3 17:29-35 16:2-18:4
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/Home.vue?vue&type=script&lang=js 2:0-60 33:4-15
 @ ./src/main_components/Home.vue?vue&type=script&lang=js 1:0-196 1:0-196 1:197-382 1:197-382
 @ ./src/main_components/Home.vue 2:0-55 3:0-50 3:0-50 6:49-55
 @ ./src/router/index.js 2:0-42 27:13-17
 @ ./src/main.js 3:0-30 6:30-36

ERROR in [eslint]
C:\Users\chuan\Documents\GitHub\PraePlan\services\frontend\src\main_components\home_components\ProCalendar.vue
  3:19  error  Parsing error: Unexpected token, expected "," (3:19)

✖ 1 problem (1 error, 0 warnings)


webpack compiled with 3 errors

相关代码文件

package.json

{
  "name": "praeplan",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
    "start": "npm run dev",
    "serve": "serve -s dist -p 8080",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-calendar-3": "^2.2.6",
    "vue-pro-calendar": "^1.1.6",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "cypress": "^9.7.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "lint-staged": "^11.1.2",
    "prettier": "^2.4.1",
    "ts-loader": "^9.4.4",
    "typescript": "^5.1.6",
    "vue-tsc": "^1.8.8",
    "webpack-cli": "^5.1.4"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  }
}

ProCalendar.vue

<script setup lang="ts">
import "vue-pro-calendar/style";
import { ref, type Ref } from "vue";
import type { Configs, Appointment } from "vue-pro-calendar";

const cfg = ref<Configs>({
  viewEvent: undefined,
  reportEvent: {
    icon: true,
    text: "",
  },
  searchPlaceholder: "",
  eventName: "",
  closeText: "",
  nativeDatepicker: true,
});

const evts: Ref<Appointment[]> = ref([
  {
    date: "2022-11-19T14:00:00.000Z",
    comment: "",
    id: "cl32rbkjk1700101o53e3e3uhn",
    keywords: "Projet BAMBA",
    name: "MONTCHO Kévin",
  },
  //...
]);

</script>

<template>
<!-- all props are optional -->
<pro-calendar
  :events="evts"
  :loading="false"
  :config="cfg"
  view="month"
  date="2022-11-10T00:00:00.000Z"
  @calendarClosed="void 0"
  @fetchEvents="void 0"
/>
</template>

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { ProCalendar } from "vue-pro-calendar" 

createApp(App).use(store).use(router).use(ProCalendar).mount("#app");

解决方案

1. 核心问题分析

你的项目是JavaScript Vue3项目，但复制的示例代码使用了TypeScript语法（lang="ts"、type Ref、泛型标注等），而当前项目的Babel和ESLint配置不支持TypeScript语法解析，导致编译失败。

2. 两种解决路径

路径一：将组件改为JavaScript版本（无需引入TypeScript）

修改ProCalendar.vue，移除TypeScript相关语法：

<script setup>
import "vue-pro-calendar/style";
import { ref } from "vue";

const cfg = ref({
  viewEvent: undefined,
  reportEvent: {
    icon: true,
    text: "",
  },
  searchPlaceholder: "",
  eventName: "",
  closeText: "",
  nativeDatepicker: true,
});

const evts = ref([
  {
    date: "2022-11-19T14:00:00.000Z",
    comment: "",
    id: "cl32rbkjk1700101o53e3e3uhn",
    keywords: "Projet BAMBA",
    name: "MONTCHO Kévin",
  },
  //...
]);

</script>

<template>
<!-- all props are optional -->
<pro-calendar
  :events="evts"
  :loading="false"
  :config="cfg"
  view="month"
  date="2022-11-10T00:00:00.000Z"
  @calendarClosed="void 0"
  @fetchEvents="void 0"
/>
</template>

路径二：为项目配置完整的TypeScript支持

如果想保留TypeScript语法，需要为Vue CLI项目添加TypeScript插件并配置相关解析器：

安装Vue CLI的TypeScript插件：

vue add typescript

修改ESLint配置，将解析器改为@typescript-eslint/parser，并添加相关插件：
在项目根目录创建或修改.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

重启开发服务器：

npm run dev

3. 额外注意事项

若选择路径一，无需保留typescript、ts-loader等依赖，可执行npm uninstall typescript ts-loader vue-tsc清理。
确保vue-pro-calendar版本与Vue3兼容，当前使用的1.1.6版本是支持Vue3的。

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

将TypeScript Vue组件导入JavaScript Vue3项目编译报错求助

问题背景 #

编译错误信息 #

相关代码文件 #

package.json #

ProCalendar.vue #

main.js #

解决方案 #

1. 核心问题分析 #

2. 两种解决路径 #