Naja + ublaboo/datagrid + webpack

[Zrnik]

Hello, i am using naja on my website, and now i wanted to implement datagrid, but i have a problem implementing javascript assets with webpack.

Im no expert in webpack. The loaders im trying to use are:

const jQueryExpose = {
    test: require.resolve('jquery'),
    use: [
        {
            loader: 'expose-loader',
            options: {
                exposes: ["$", "jQuery"],
            },
        }
    ] 
};

const NajaExpose = {
    test: require.resolve('naja'),
    use: [
        {
            loader: 'expose-loader',
            options: {
                exposes: ["naja", "window.naja", "document.naja"],
            },
        }
    ]
};

but when i build the bundle, it says

Uncaught Error: Include Naja.js or nette.ajax for datagrids to work!

How am i supposed to expose naja for the datagrid to see it?

[jiripudil]

Hello, you're not the first to encounter this kind of issue. Unfortunately, datagrid's assets are not so ready to be used as ES modules comfortably. In one of the threads on Nette forum, @f3l1x mentioned that they have plans to alleviate this. I've opened contributte/datagrid#942 to keep track of the progress.

As for a solution until then, one which I believe is most likely to work is to use the ProvidePlugin, configured to expose naja's default export:

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

[Zrnik]

Thanks for a fast answer,

the expose-loader was the first thing i found when i wanted to provide jquery and it worked, so i wanted to use it for naja too.

I tried to use the ProvidePlugin after i seen your reply, but i had problems...

const provide_Naja = new webpack.ProvidePlugin({
    // naja: "naja", // This did not work
    naja: path.resolve(path.join(__dirname, '/../node_modules/naja/dist/Naja.js')), // this DID work
});

But now i use what you wrote in your edit:

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

Thank you very much for your help and your time, everything is working now. If you could explain why naja: "naja", doesn't work but naja: ['naja', 'default'], does, i will be happy.

Your beer is on the way!

[jiripudil]

If you could explain why naja: "naja", doesn't work but naja: ['naja', 'default'], does

Naja's entrypoint has multiple exports – in addition to the default instance, it also exports classes Naja and HttpError. Apparently, naja provides the whole module, but you only want its default export.