VueJS+TypeScript迁移Splitpanes组件遇导入及注册异常求助

Let's break down what's going wrong here and how to fix it quickly:

The Core Issue: Incorrect Import Syntax #

Your original JavaScript code used named imports to pull in both Splitpanes and Pane, but your TypeScript code is trying to import the default export twice. That's why the components aren't being registered correctly—you're actually importing the same thing (the default export) for both Splitpanes and Pane, which isn't the right component for Pane.

Step-by-Step Fix #

1. Correct the Import Statement
   Replace your current imports with the named import syntax (matching your original JS code):

   import Vue from "vue";
   import Component from "vue-class-component";
   import { Splitpanes, Pane } from "splitpanes"; // Use named imports here!
   import "splitpanes/dist/splitpanes.css"; // Don't forget to keep the styles import
   

2. Verify Component Registration
   Keep your component registration as is (since you're now importing the correct components):

   @Component({
     components: { Splitpanes, Pane }
   })
   export default class VideoConf extends Vue {
     // ... rest of your component logic
   }
   

3. Double-Check Type Definitions (If Needed)
   Your work to fix TypeScript type errors (installing @types/splitpanes or creating a shim file) was valid for resolving syntax checking issues—but those only address type safety, not the actual component import problem. The browser error was purely from importing invalid values for the components.

Why This Happened #

When you write import Splitpanes from "splitpanes";, you're grabbing the default export of the module. But the splitpanes package exports both Splitpanes and Pane as named exports, not a single default. Your original JS code got this right, but the TS rewrite accidentally switched to default imports, leading to broken component registrations.

To confirm, you can peek at the splitpanes package's entry file in node_modules/splitpanes—you'll see exports structured like:

export { Splitpanes, Pane };

Quick Debugging Tip #

If you're still unsure, add a quick console log to verify your imports are pulling in valid components:

import { Splitpanes, Pane } from "splitpanes";
console.log(Splitpanes, Pane); // Both should be function/object definitions, not undefined

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