Vue3使用@gravitano/vue-date-range-picker报错：Component is missing template or render function

Let's break down why you're hitting this error and walk through actionable fixes:

The Root Cause #

The @gravitano/vue-date-range-picker package was built for Vue 2, and Vue 3 introduced breaking changes to component rendering logic and core API structure. When you try to use a Vue 2 component directly in Vue 3 without compatibility measures, Vue 3 can't interpret the component's Vue 2-specific template/render setup—hence the error you're seeing.

Solution 1: Use Vue 3's Compatibility Layer #

If you need to stick with this exact component, you can enable Vue 3's compatibility mode to support Vue 2 components:

1. Install the compatibility package:

   npm install @vue/compat
   

2. Update your project config:

   • For Vite projects, modify vite.config.js:

     import { defineConfig } from 'vite'
     import vue from '@vitejs/plugin-vue'
     
     export default defineConfig({
       plugins: [
         vue({
           template: {
             compilerOptions: {
               compatConfig: { MODE: 2 } // Enable full Vue 2 compatibility
             }
           }
         })
       ]
     })
     

   • For Vue CLI projects, modify vue.config.js:

     module.exports = {
       chainWebpack: config => {
         config.resolve.alias.set('vue', '@vue/compat')
         config.module
           .rule('vue')
           .use('vue-loader')
           .tap(options => {
             return {
               ...options,
               compilerOptions: {
                 compatConfig: { MODE: 2 }
               }
             }
           })
       }
     }
     

3. Update your main entry file:
   Replace your standard Vue 3 import with the compat version:

   import Vue from '@vue/compat'
   import App from './App.vue'
   
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App)
   }).$mount('#app')
   

After these changes, your existing component code should render correctly.

Solution 2: Switch to a Vue 3-Native Date Range Picker #

A cleaner long-term fix is to use a component built specifically for Vue 3. Here are two reliable options:

Option A: @vuepic/vue-datepicker

This is a feature-rich, widely-used picker with native range support:

1. Install the package:

   npm install @vuepic/vue-datepicker
   

2. Implement it in your component:

   <script setup>
   import { ref } from 'vue';
   import Datepicker from '@vuepic/vue-datepicker';
   import '@vuepic/vue-datepicker/dist/main.css'; // Don't skip styles!
   
   const range = ref(['01/09/2018', '01/10/2018']);
   </script>
   
   <template>
     <Datepicker v-model="range" range />
   </template>
   

Option B: Element Plus DatePicker

If you're already using Element Plus, its DatePicker has a built-in range mode:

<script setup>
import { ref } from 'vue';
import { ElDatePicker } from 'element-plus';
import 'element-plus/dist/index.css';

const range = ref(['2018-09-01', '2018-10-01']);
</script>

<template>
  <ElDatePicker v-model="range" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
</template>

Quick Pre-Fix Check #

Before jumping into the above solutions, double-check if you missed importing the component's styles (if any). Some Vue 2 date pickers require explicit CSS imports—while this won't fix the template/render error, missing styles can make the component appear invisible even if it's working:

import "@gravitano/vue-date-range-picker/dist/vue-date-range-picker.css";

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