Search code examples
javascriptthymeleafpnotify

PNotify: SyntaxError: import not found: defaultModules

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?

Solution

  • 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.'
});