Rozjetí datagridu a naja pomocí webpacku

Chuchy

Ahoj,

pomocí webpacku se snažím rozjet datagrid a naja, jenže pokaždé mi to vrací chybu Uncaught Error: Include Naja.js or nette.ajax for datagrids to work!. jak tohle vyřešit?

Tohle je muj kod

import naja from 'naja';
document.addEventListener('DOMContentLoaded', () => naja.initialize());
import {LiveForm, Nette} from 'live-form-validation';
import 'bootstrap';
import '../css/styles.scss';

window.Nette = Nette;
window.LiveForm = LiveForm;
Nette.initOnLoad();

import 'ublaboo-datagrid';

díky

jiri.pudil

Ahoj, obávám se, že JS kód k datagridu není úplně připravený na použití coby ES modul a prostě očekává buďto naja nebo $.nette v globálním objektu (window). Takže buďto instanci naja explicitně přiřaď do window, stejně jako to děláš s Nette a LiveForm, anebo můžeš použít ProvidePlugin

Chuchy

Přes window jsem to už zkoušel, stejná chyba a i přes ProvidePlugin mi to vracelo zase tuhle chybu.

Uncaught TypeError: e.registerExtension is not a function

jestli ej tohle teda správný zápis

new webpack.ProvidePlugin({
  naja: 'naja',
}),

Editoval Chuchy (26. 11. 2020 15:55)

Felix

jiri.pudil napsal(a):

Ahoj, obávám se, že JS kód k datagridu není úplně připravený na použití coby ES modul a prostě očekává buďto naja nebo $.nette v globálním objektu (window). Takže buďto instanci naja explicitně přiřaď do window, stejně jako to děláš s Nette a LiveForm, anebo můžeš použít ProvidePlugin

Je to tak, ale uz pracujeme (@felix, @PavelJanda, @teekey99, …) na nove verzi, kde by se to melo zlepsit. Treba bude i podpora pro TypeScript.

Chuchy

Ok, dobrá, děkuji.

Prozatím jsem to rozjel tak, že jsem vytvořil další soubor, do kterého to importuji a načítám ho vzlášť.

entry: {
  app: './assets/js/index.js',
  datagrid: './assets/js/datagrid.js',
},
output: {
  filename: 'js/[name].[hash].js',
  path: path.resolve(__dirname, 'www/dist'),
},

jiri.pudil

Problém se znovu vynořil u někoho jiného a zdá se, že jsem našel řešení, pro úplnost doplňuji i sem:

new webpack.ProvidePlugin({
	naja: ['naja', 'default'],
});