How to install plugins, especially "mirador-image-tools"

[arthytrip]

Hi all,
I apologize in advance for the trivial question but I have some difficulty installing the "mirador-image-tools" plugin.
My installation of Mirador 3 is basic and does not require compilation but use "https://unpkg.com/mirador@latest/dist/mirador.min.js".
I currently have a host where I have installed the Cantaloupe 5.0.5 and Mirador image servers. Integration works.
Now I would like to install the "mirador-image-tools" plugin (and maybe others in the future) but I would need a step-by-step procedure because with what I have read in the two main sources I have not been able to obtain the expected result:

• https://github.com/ProjectMirador/mirador-image-tools#installing-mirador-image-tools
• https://github.com/ProjectMirador/mirador/wiki/Mirador-3-plugins

In particular I don't understand what the correct place and way to import the plugin code is.
If I set my index.html like this ...

<!-- Instantiate Mirador -->
<script type="text/javascript">
$(function() {
import { miradorImageToolsPlugin } from 'node_modules/mirador-image-tools/es/plugins/miradorImageToolsPlugin.js';
...
const config = [...];
const plugins = [miradorImageToolsPlugin];
...
	myMiradorInstance = Mirador.viewer(config, plugins);
...
</script>

I always get the error
Uncaught SyntaxError: Cannot use import statement outside a module (at 0b002711800ec7c9: 43: 2)

If, on the other hand, in the index.html, I move the import out of the script that instantiates Mirador, in this way ...

<script type="module" src="/node_modules/mirador-image-tools/es/plugins/miradorImageToolsPlugin.js"></script>
<!-- Instantiate Mirador -->
<script type="text/javascript">
$(function() {
...
const config = {...};
const plugins = [miradorImageToolsPlugin];
...
	myMiradorInstance = Mirador.viewer(config, plugins);
...
</script>

I get the error:
Uncaught TypeError: Failed to resolve module specifier "@material-ui/core/styles/withTheme". Relative references must start with either "/", "./", or "../".

Maybe I'm completely wrong approach ... Can anyone help me?
Thanks in advance, bye.

Arthy

[jbaiter]

You're going to have to use a bundler if you want to use plugins with Mirador 3, including them via <script> tag is not possible at the moment as far as I know. As per the README (could probably be stated a bit more strongly):

If you are interested in integrating Mirador with plugins into your project, we recommend using webpack or parcel to integrate the es version of the packages. Examples are here:

The README also contains a link to a sample repository that includes the mirador-image-tools plugin, that should help: https://github.com/ProjectMirador/mirador-integration