Use JQuery plugin with Webpack

Question

I am trying to use the plugin Galleria with Webpack. Without Webpack galleria can be used as:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.4.min.js"></script>

<script>
  (function() {
    Galleria.loadTheme('https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/classic/galleria.classic.min.js');
    Galleria.run('.galleria');
  }());
</script>

The theme can also be loaded manually instead of using the method loadTheme:

<link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/fullscreen/galleria.classic.min.css” />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>   
<script src=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/classic/galleria.classic.min.js”></script>

<script>
  (function() {
    Galleria.run('.galleria');
  }());
</script>

With WebPack I added the following code to Index.js:

import galleria from 'galleria';

import '../../node_modules/galleria/dist/themes/classic/galleria.classic.css';
import '../../node_modules/galleria/dist/themes/classic/galleria.classic.js';

window.Galleria = galleria; 

(function() {
  Galleria.run('.galleria');
}());

When I run it I get the errors:

No theme CSS loaded.

Init failed: Galleria could not find the element "undefined".

Any idea how to use Galleria with Webpack?

From the FAQ on the Galleria site: "Galleria does not work with webpack - If you are using webpack, you will need to use shimming as Galleria requires access to the window.location object:" https://galleria.io/docs/references/faq.html — Brett Gregson, Jan 07 '20 at 16:10
Yes, I did that by adding the rule in Webpack and still does not work. — Miguel Moura, Jan 07 '20 at 16:11

nickbullock · Accepted Answer · 2020-01-12T13:06:48.947

Created a simple repo with webpack and galleria for you.
Steps are:

Use shimming as documented here:

            {
                test: /galleria.js$/,
                loader: "imports-loader?this=>window"
            },

Add jquery and galleria as dependencies to your project: npm i -S jquery galleria
Use loadTheme and run Galleria methods:

import * as $ from 'jquery';
import galleria from 'galleria';

window.Galleria = galleria;
window.jQuery = $;

Galleria.loadTheme('node_modules/galleria/dist/themes/classic/galleria.classic.js');
Galleria.run('.galleria');

To see project working please run npm run start.

UPD:
To copy minified theme files you can use CopyWebpackPlugin:

npm i -D copy-webpack-plugin
Add it to webpack plugins:

plugins: [
        new CopyWebpackPlugin([
            { from: 'node_modules/galleria/dist/themes/classic/galleria.classic.min.js', to: 'assets/galleria.classic.js' },
            { from: 'node_modules/galleria/dist/themes/classic/galleria.classic.min.css', to: 'assets/galleria.classic.css' },
        ])
]

Change path in loadTheme call: Galleria.loadTheme('assets/galleria.classic.js');

UPD2:
Updated repo with webpack imports usage. Please see difference in this PR or this branch. Main changes are:

We still need galleria.classic.css file to be used with copy-webpack-plugin and loaded as <link rel="stylesheet" type="text/css" href="assets/galleria.classic.css"> because I found in source code that css can be loaded only through link or script tags or dynamically (loadTheme call), otherwise No theme css loaded will be printed.
1. But then our javascript code becomes pretty simple. Also I removed webpack rule with imports-loader and used it in inline style.

import * as $ from 'jquery';
import * as Galleria from 'galleria'
import 'imports-loader?define=>false!./node_modules/galleria/src/themes/classic/galleria.classic';

Galleria.run('.galleria');

Thank you. That "kind" of work ... I needed to copy manually `galleria.classic.js` and `galleria.classic.css" files to project assets folder because when I run my project the path in node_modules is not found. Is there a way to copy those two files to project assets folder on build? — Miguel Moura, Jan 09 '20 at 23:10
@MiguelMoura updated the answer and repo. I think my solution is not the best because with webpack it is better to use `import` statements than `loadTheme` method, but it works. if I will have some free time I will look for a solution with imports. — nickbullock, Jan 10 '20 at 10:12
Thank you. If you could add an example with import that would be great. But I already accepted your answer anyway. — Miguel Moura, Jan 10 '20 at 13:39
I feel like I've searched the whole internet to find a solution to this problem. Thanks for helping out @nick. However, I still had issues while trying to load the theme. The solution that I found is to fetch the theme from a CDN inside the HTML (or .ftl file in my case): `Galleria.loadTheme('https://cdnjs.cloudflare.com/ajax/libs/galleria/1.6.1/themes/classic/galleria.classic.min.js');`. — Consta Gorgan, Nov 03 '20 at 20:28

Use JQuery plugin with Webpack

1 Answers1