JS file that worked in Webpack (written in CJS) does not work in Vite out of the box

[robypez]

Hello everybody, I'm starting a new project and I'm trying Vite with Rails 7.
To bootstrap my project I need an admin theme and I'm trying to integrate a bootstrap based theme, Metronic.

I have an entry point for this theme, init.js

var KTComponents = function () {
    // Public methods
    return {
        init: function () {
            KTApp.init();
			KTDrawer.init();
			KTMenu.init();
			KTScroll.init();
			KTSticky.init();
			KTSwapper.init();
			KTToggle.init();
			KTScrolltop.init();
			KTDialer.init();
			KTImageInput.init();
			KTPasswordMeter.init();
        }
    }
}();

// On document ready
if (document.readyState === "loading") {
	document.addEventListener("DOMContentLoaded", function() {
		KTComponents.init();
	});
 } else {
	KTComponents.init();
 }

 // Init page loader
window.addEventListener("load", function() {
    KTApp.initPageLoader();
});

// Declare KTApp for Webpack support
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
	window.KTComponents = module.exports = KTComponents;
}

This is the entrypoint of my admin theme, served by Vite.

import $ from 'jquery'
import Rails from '@rails/ujs'
import KTComponents from '~/admin/vendor/metronic/components/init'

// import 'bootstrap/js/src/alert'
// import 'bootstrap/js/src/button'
// import 'bootstrap/js/src/carousel'
// import 'bootstrap/js/src/collapse'
// import 'bootstrap/js/src/dropdown'
// import 'bootstrap/js/src/modal'
// import 'bootstrap/js/src/popover'
// import 'bootstrap/js/src/scrollspy'
// import 'bootstrap/js/src/tab'
// import 'bootstrap/js/src/toast'
// import 'bootstrap/js/src/tooltip'

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

Rails.start();
window.$ = $;

Here the first error:

Uncaught SyntaxError: The requested module '/vite-dev/admin/vendor/metronic/components/init.js?t=1668182014104' does not provide an export named 'default'

If I try with

import '~/admin/vendor/metronic/components/init'

init.js?t=1668182014104:10 Uncaught ReferenceError: KTApp is not defined
    at Object.init (init.js?t=1668182014104:10:13)
    at init.js?t=1668182014104:31:15

This is a simplified version of file KTApp

"use strict";

// Class definition
var KTApp = function () {
    var initialized = false;
    var select2FocusFixInitialized = false;
    var countUpInitialized = false;

    var initSmoothScroll = function () {
        if (initialized === true) {
            return;
        }

        if (SmoothScroll) {
            new SmoothScroll('a[data-kt-scroll-toggle][href*="#"]', {
                speed: 1000,
                speedAsDuration: true,
                offset: function (anchor, toggle) {
                    if (anchor.hasAttribute('data-kt-scroll-offset')) {
                        var val = KTUtil.getResponsiveValue(anchor.getAttribute('data-kt-scroll-offset'));
                        return val;
                    } else {
                        return 0;
                    }
                }
            });
        }
    }

    var initCheck = function () {
        if (initialized === true) {
            return;
        }

        KTUtil.on(document.body, '[data-kt-check="true"]', 'change', function (e) {
            var check = this;
            var targets = document.querySelectorAll(check.getAttribute('data-kt-check-target'));

            KTUtil.each(targets, function (target) {
                if (target.type == 'checkbox') {
                    target.checked = check.checked;
                } else {
                    target.classList.toggle('active');
                }
            });
        });
    }

    var initBootstrapCollapse = function() {
        if (initialized === true) {
            return;
        }

        KTUtil.on(document.body,  '.collapsible[data-bs-toggle="collapse"]', 'click', function(e) {
            if (this.classList.contains('collapsed')) {
                this.classList.remove('active');
                this.blur();
            } else {
                this.classList.add('active');
            }

            if (this.hasAttribute('data-kt-toggle-text')) {
                var text = this.getAttribute('data-kt-toggle-text');
                var target = this.querySelector('[data-kt-toggle-text-target="true"]');
                var target = target ? target : this;

                this.setAttribute('data-kt-toggle-text', target.innerText);
                target.innerText = text;
            }
        });
    }

    var initBootstrapRotate = function() {
        if (initialized === true) {
            return;
        }

        KTUtil.on(document.body,  '[data-kt-rotate="true"]', 'click', function(e) {
            if (this.classList.contains('active')) {
                this.classList.remove('active');
                this.blur();
            } else {
                this.classList.add('active');
            }
        });
    }

    var initPageLoader = function () {
        document.body.classList.remove('page-loading');
        document.body.removeAttribute('data-kt-app-page-loading');
    }

    return {
        init: function () {
            initSmoothScroll();
            initialized = true;
        },

        initPageLoader: function () {
            initPageLoader();
        },
    };
}();

// Declare KTApp for Webpack support
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
    module.exports = KTApp;
}

I have every file in the theme with this structure and I cannot understand how to solve this...

[ElMassimo]

Hi Roberto!

The error message does not provide an export named 'default' is accurate.

---

Vite uses native ESM.

Although it can in some cases transpile dependencies written in CJS, it expects most code that you are using to be ESM.

---

In ESM, instead of:

// Declare KTApp for Webpack support
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
    module.exports = KTApp;
}

you would do:

export default KTApp

Otherwise, the file is not a JS module, and as the error mentions: does not provide an export named 'default'.