I am trying to show a simple notification on web browser using PNotify on thymeleaf html page.
I have added following webjar to my pom.xml.
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>pnotify__core</artifactId>
<version>${pnotify.version}</version>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>pnotify__mobile</artifactId>
<version>${pnotify.version}</version>
</dependency>
PNotify version = 5.2.0
In my HTML, I have included -
<link th:href="@{/webjars/pnotify__core/dist/PNotify.css}" rel="stylesheet" />
<link th:href="@{/webjars/pnotify__mobile/dist/PNotifyMobile.css}" rel="stylesheet" />
<script th:src="@{/webjars/pnotify__core/dist/PNotify.js}"></script>
<script th:src="@{/webjars/pnotify__mobile/dist/PNotifyMobile.js}"></script>
I have confirmed that all these resources are loaded properly with 200 status code. In my javascript, I am trying to do following-
<script type="module">
import { defaultModules } from '../webjars/pnotify__core/5.2.0/dist/PNotify.js';
</script>
But, I am getting following error in browser console
Uncaught SyntaxError: import not found: defaultModules
I have confirmed by checking browser that the file exists at http://localhost:8080/webjars/pnotify__core/5.2.0/dist/PNotify.js
I am clueless and cannot find any help in forums. Can someone please help me and share some pointers to debug?
Finally, I was able to get it working by making following changes. Dependencies in pom.xml were same. In HTML file, added following css and js
<link th:href="@{/webjars/pnotify__core/dist/PNotify.css}" rel="stylesheet" />
<link th:href="@{/webjars/pnotify__bootstrap4/dist/PNotifyBootstrap4.css}" rel="stylesheet" />
<script th:src="@{/webjars/pnotify__core/dist/PNotify.js}"></script>
<script th:src="@{/webjars/pnotify__bootstrap4/dist/PNotifyBootstrap4.js}"></script>
In the javascript, used following code snippet(without any imports)
PNotify.defaultModules.set(PNotifyBootstrap4, {});
PNotify.success({
title: 'Success!',
text: 'That thing that you were trying to do worked.'
});