Import issue, Core - Vite

Hi guys, first of all I love F7 and I am testing F7-Core with Vite and I spent 3 hrs. last night to try to figure out why ‘datatables.js’ is throwing an error when I try to import it on the page,

  1. Module it’s imported, ‘npm install datatables’
  2. Jquery as well, ‘npm i jquery’


import $$ from “dom7”;
import $ from “jquery”;
import “”;

export default function (props, {
}) {

$onMounted(() => {
return $render;


and error: ‘Uncaught (in promise) Error: TypeError: $(…).DataTable is not a function’, but when I add library in html it works fine. Not sure why isn’t working from page ‘import’. I’ll appreciate any help with this matter.

Datatables works only with JQuery for whatever the reason, if you want to use it you will have to install JQuery and also import it before importing Datatables.

Travis, yep as you can see there is ‘import $ from “jquery”’, before datatables. As I said it works fine when I load libraries from .html, but I can’t make it work from ‘node_modules’, I guess it’s Vite import issue.

Use $on(‘pageAfterIn’)

Yeah, I tried onInit and AfterIn, without luck. :frowning:

I tried to replicate and this way it works.

import * as DataTable from ‘
let test = new DataTable("#example",{});

Thank you Travis, how did you import jquery? I am asking because I got,
‘$ is not a function’.

In test.f7 there is,
import $ from “jquery”;

You will have to put JQuery as a module in vite.

I did, ‘npm i jquery’, am I missing something else?

OMG, I finally figured it out! This is solution at least in my case,
import dt from ‘’;
import ‘’;
dt(window, $);

$on(‘pageAfterIn’, (e, page) => {
var tableTest = $(’#example’).DataTable();

To import JQuery as a module inside the vite config but seeing as you figured out a way it is not longer necessary, good for you!

How do i import jQuery as a module? The other approach doesn’t allow me to load data tables plugins.

import jQuery from “jquery”

…and then instead ‘$’ use ‘jQuery’, like in this example,

jQuery("a.toggle-vis").on("click", function (e) {
  let column = masterTable.column(jQuery(this).attr("data-column"));

I am able to load datatables via this:

import DataTable from '';
import '';


However this does not load the rowGroup plugin.

.rowGroup is not a function

is the error I get.

Yeah sry. can’t help with it, I never used rowGroup and I currently have similar problem with ‘DateTime’ plugin.

How did you get this to work?