Rails项目中使用Vite导入Metronic主题JS文件报错的问题

问题背景 #

在新Rails项目中用Vite集成Metronic后台主题，入口文件引入../admin/vendor/metronic/components/_init后出现两个连续错误：

• Uncaught ReferenceError: KTApp is not defined：_init.js中调用的KTApp变量未被加载到全局作用域
• 添加import KTApp from './app';后触发Uncaught SyntaxError: The requested module '/vite-dev/admin/vendor/metronic/components/app.js' does not provide an export named 'default'：app.js采用CommonJS格式导出，并非ES模块的默认导出规范

解决步骤 #

1. 修正_init.js的组件导入逻辑 #

将_init.js中错误的默认导入替换为以下代码，把所有依赖的Metronic组件导入并挂载到window全局：

// 按需导入所有Metronic组件
import * as KTApp from './app.js';
import * as KTDrawer from './drawer.js';
import * as KTMenu from './menu.js';
import * as KTScroll from './scroll.js';
import * as KTSticky from './sticky.js';
import * as KTSwapper from './swapper.js';
import * as KTToggle from './toggle.js';
import * as KTScrolltop from './scrolltop.js';
import * as KTDialer from './dialer.js';
import * as KTImageInput from './image-input.js';
import * as KTPasswordMeter from './password-meter.js';

// 将组件挂载到window全局，让_init.js的初始化代码能访问到
window.KTApp = KTApp;
window.KTDrawer = KTDrawer;
window.KTMenu = KTMenu;
window.KTScroll = KTScroll;
window.KTSticky = KTSticky;
window.KTSwapper = KTSwapper;
window.KTToggle = KTToggle;
window.KTScrolltop = KTScrolltop;
window.KTDialer = KTDialer;
window.KTImageInput = KTImageInput;
window.KTPasswordMeter = KTPasswordMeter;

2. 保留原初始化逻辑 #

无需修改_init.js中原有的KTComponents.init()及后续的DOM加载监听代码，确保组件能在页面就绪时正常初始化。

原因说明 #

Metronic的组件代码是为Webpack或传统全局加载场景设计的，采用CommonJS的module.exports导出方式，而非ES模块的export default规范。Vite作为ES模块打包工具，直接使用import KTApp from './app'会因找不到默认导出而报错。通过将每个组件导入后挂载到window全局，就能让_init.js中的代码访问到这些全局变量，彻底解决未定义的错误。

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