Import issue, Core - Vite

1

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’

test.f7

import $$ from “dom7”;
import $ from “jquery”;
import “datatables.net”;

export default function (props, {
$f7,
$on,
$onBeforeMount,
$onMounted,
$onBeforeUnmount,
$onUnmounted
}) {

$onMounted(() => {
  console.log('onMounted');
  //console.log(DataTable);      
  $('#example').DataTable();
});
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.

2

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.

3

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.

4

Use $on(‘pageAfterIn’)

5

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

6

I tried to replicate and this way it works.

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

7

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”;

8

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

9

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

10

OMG, I finally figured it out! This is solution at least in my case,
test.f7
import dt from ‘datatables.net’;
import ‘datatables.net-dt/css/jquery.datatables.css’;
dt(window, $);

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

11

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!

12

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

13

import jQuery from “jquery”

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

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

I am able to load datatables via this:

import DataTable from 'datatables.net';
import 'datatables.net-rowgroup';

DataTable($);
$('element').DataTable(options);

However this does not load the rowGroup plugin.

.rowGroup is not a function

is the error I get.

15

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

16

How did you get this to work?