PNotify is throwing a SyntaxError stating that the import for defaultModules cannot be found

Trying to display a simple notification in a web browser using PNotify on a thymeleaf HTML page.

Added the following WebJar dependencies to the pom.xml file:

<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

Included the following in the HTML file -

<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>

Confirmed that all resources are loading properly with a 200 status code. Attempting to import PNotify in JavaScript as follows-

<script type="module">
    import { defaultModules } from '../webjars/pnotify__core/5.2.0/dist/PNotify.js';
</script>

Encountering the error "Uncaught SyntaxError: import not found: defaultModules" in the browser console.

The file is confirmed to exist at http://localhost:8080/webjars/pnotify__core/5.2.0/dist/PNotify.js

Seeking assistance to debug this issue as forums have been unhelpful so far. Any tips or pointers would be greatly appreciated. Thank you!

javascriptthymeleafpnotify

Answer №1

After some tweaking, I was finally able to make it work by implementing a few key changes. Although the dependencies in pom.xml remained unchanged, I made adjustments in the HTML file by including specific CSS and JS links:

<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>

Additionally, I utilized the following JavaScript code snippet (without any imports) to enhance functionality:

PNotify.defaultModules.set(PNotifyBootstrap4, {});
PNotify.success({
    title: 'Success!',
    text: 'That thing that you were trying to do worked.'
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There was no change in any updates upon returning from PHP

Struggling to convey in the title... I have a form that undergoes validation through JavaScript, and upon successful completion, an ajax request is sent to a PHP page. The PHP page inputs data and sets the database response accordingly. However, despite ...

javascriptphpjqueryhtmlajax

The website is plagued by the presence of unwanted hyperlinks

There seems to be unwanted hyperlinks appearing in the text content on my website. Website URL: http://www.empoweringparents.com/my-child-refuses-to-do-homework-heres-how-to-stop-the-struggle.php# Could you please review the 10th point? There are links b ...

javascriptphpjqueryhtmlcss

Guide on incorporating an external JavaScript library into an Angular component for testing purposes

Encountering an issue with a component that utilizes an external JavaScript library called Leader-Line. Every time I attempt to test this component, an error is thrown indicating that the function from the external library is not defined. component file ...

javascriptangulartypescriptjasminekarma-jasmine

Using Javascript to apply styling only to the first class element in the document

I am facing a challenge with styling programmatically generated classes and inputs. Here is an example of the structure: <div class="inputHolder"> <input type="button" class="inputclss" value="1"> </ ...

javascriptjquery

Steps for dynamically loading the content of a Bootstrap 4 Modal

I am currently in the process of developing a website that will showcase a wide range of images. The design is set up as a landing page with all content contained within the main HTML page - there is only an index.html file for now. This website will serv ...

javascriptphpjqueryhtmlbootstrap-4

What is the best way to utilize :focus while simultaneously applying properties through Javascript?

When styling an input element with JavaScript, it seems that any properties set this way are ignored in a :focus rule. An example is provided to illustrate this: Initially, the background and border of the input element matches the surrounding element ( ...

javascriptjquerycss

Creating a nested datatable from a JSON array object response is a valuable skill to have in

My API response is in JSON format with nested arrays. I am trying to parse it into a nested datatable, but I can't seem to get it working. Can someone please point out where I went wrong? The JSON data contains passenger information and each passenger ...

javascriptjqueryjsonajaxdatatable

Sharing data between multiple components in VueJS is an essential aspect of building scalable and maintainable

I am struggling with the code I have. main.js new Vue({ el: '#app', template: '<App/>', components: { App } }) App.vue <template> <div id="app"> // struggling to pass data to component <basics :r ...

javascriptwebpackvue.jsvuejs2vue-component

Consolidate list: Make sure to leave only the currently active item open

For some reason, I am encountering an issue with this code on this platform. The problem is that every time I click on a list title, all items open up instead of just the one I clicked on. Is there a way to modify this code so that only the clicked item ex ...

javascriptjquery

When the close button on the page is clicked, I want to reset all selectbox values

I want to reset the three select boxes on my page when the close button is clicked, all of which are located within the .popup class. This is the code I am using to clear the fields: clearText: function() { $('.popupBody input').val('& ...

javascriptjqueryreactjs

What is the reason that when creating a fresh object within a for loop using the 'key' from the loop, it ends up being called key?

After delving into the world of JavaScript for about six months now, I've come across something that has left me puzzled. This is completely new to me, so I'm not entirely sure what's happening here. I am attempting to create a new object wi ...

javascriptobject

Struggling to set the value for a variable within an Angular factory?

When dealing with a variable as an array, I have no trouble pushing objects inside and retrieving the values within the controller. However, when trying to directly assign an object to that variable, I run into issues. If anyone can assist me in achieving ...

javascriptjqueryangularjs

Updating the UI by calling a function in JavaScript with Node.js

My webserver code looks like this: var net = require('net'); var server = net.createServer(function(socket) { socket.write('hello\n'); socket.write('world\n'); //RECEIVE PACKET ON SOCKET socket.on(& ...

javascriptjqueryhtmlnode.jswebsocket

Employ the 'this' attribute within _.map

I am facing an issue where I need to call a setState function within a _.map loop in React. However, the loop is losing the reference to 'this' and therefore I cannot use setState as this becomes undefined. cargaDinamica(){ _.map(this.stat ...

javascriptnode.jsreactjsecmascript-6underscore.js

Similar to TypeScript's `hasOwnProperty` counterpart

When working with TypeScript objects, is there a way to loop through a dictionary and set properties of another dictionary similar to how it is done in JavaScript? for (let key in dict) { if (obj.hasOwnProperty(key)) { obj[key] = dict[key]; } } If ...

javascriptobjecttypescripttypescript1.8

unable to retrieve the chosen item from the dropdown menu

How can I retrieve the value of the selected item from a dropdown menu without getting an undefined error? You can find my code on Jsfiddle. Can anyone spot what might be causing this issue? <select class="ddl_status" id="status_ddl_20" style="display ...

javascriptjquery

Is it possible to utilize the useEffect hook in React to dynamically refresh the page content?

I've been attempting to utilize the useEffect hook in order to trigger a DOM update whenever a specific state or prop changes. Despite the fact that the console successfully logs my tests at the desired times, the DOM update or render does not occur. ...

javascriptreactjsreact-hooks

What are some ways to customize the appearance of React Semantic components?

Is there a way to apply CSS for react semantic UI when using create react app? I have installed semantic-ui-react and included the CSS CDN: loginForm.js: import React from "react"; import { Button, Form, Header } from "semantic-ui-react"; import styles f ...

javascriptcssreactjs

Every time the page is refreshed, ExpressJS and NodeJS are working together to duplicate the array

var express = require("express"); var router = express.Router(); const fs = require("fs"); const path = require("path"); const readline = require('readline'); const directoryPath = path.resolve(__dirname,"../log ...

javascriptnode.jsreactjsexpressasync-await

What is the equivalent of this PHP array function in JavaScript/jQuery?

PHP is handling this scenario well. What would be the most efficient way to achieve a similar outcome in JS/jQuery? $statsArr['Status'][$s_id]['count'] = ($statsArr['Status'][$s_id]['count'] ?? 0) + 1; ...

javascriptphpjquery