import problem with vite

[smitbhalodiya]

When using in a Laravel with Vite.

Laravel: v10.39.0
Vite: v5.0.11
jkanban: v0.2.9

I am importing the library in jkanban.js file like this:

import * as data from 'jkanban/dist/jkanban.min';
const kanbanData = data.replace('this.jKanban', 'window.jKanban');

function doimport(str) {
  if (globalThis.URL.createObjectURL) {
    const blob = new Blob([str], { type: 'text/javascript' });
    const url = URL.createObjectURL(blob);
    const module = import(/* @vite-ignore */ url);
    URL.revokeObjectURL(url); // GC objectURLs
    return module;
  }

  const url = 'data:text/javascript;base64,' + btoa(moduleData);

  return import(/* @vite-ignore */ url);
}

/* @vite-ignore */
doimport(kanbanData);

The console error screenshot is attached

This code works fine when running with vite watch (yarn watch)

[marcosrocha85]

Hello @smitbhalodiya. Can you try to import the full version instead of the minified one?

[smitbhalodiya]

Hello @marcosrocha85

Thank you, my problem has been resolved. I made some changes in the vite.config.mjs file, and now everything is working smoothly.

jkanban.js

import 'jkanban/dist/jkanban';

vite.config.mjs

// Processing Window Assignment for Libs like jKanban, pdfMake
function libsWindowAssignment() {
  return {
    name: 'libsWindowAssignment',

    transform(src, id) {
      if (id.includes('jkanban.js')) {
        return src.replace('this.jKanban', 'window.jKanban');
      } else if (id.includes('vfs_fonts')) {
        return src.replaceAll('this.pdfMake', 'window.pdfMake');
      }
    }
  };
}