What could be the reason for a module appearing to be connected but not functioning correctly?

After connecting a JS module in DevTools' "Sources", I can see that the module is connected. However, when I try to run a function from the module, it doesn't work.

What steps should be taken to successfully run the function from the module?

function consoleLog () {
    console.log('The module is working')
}

export default consoleLog;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Title</title>
    <script type="module" src="./module.js">
        import consoleLog from './module';
        consoleLog();
    </script>
</head>
<body>

</body>
</html>

Answer №1

The issue you are facing is that there's a conflict between having code and an src attribute on your script tag; script tags should only have one or the other. Additionally, if you import a module in another module, you don't need to create a separate script tag for it. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module">
        import consoleLog from './module.js';
        consoleLog();
    </script>
</head>
<body>

</body>
</html>

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

How does the interaction between Express and Angular for routing in the MEAN Stack function?

Currently, I am utilizing Express static to direct to the public directory. //app.js app.use(express.static( __dirname + '/public')); I am looking for a way to have most of the UI routing done by AngularJS. However, it seems that it only works ...

Executing an Ajax request when the page loads

This is the code snippet I am using: var selected = { country_id: <?php echo (int)$country_id;?>, state_id: <?php echo (int)$state_id;?>, city_id: <?php echo (int)$city_id;?> }, countryMap = '<?php echo $countryMap;?& ...

The error message "Unexpected token < in JSON at position 0" is indicating a SyntaxError in the

I am facing an issue with the API on this specific page. Although the API is working fine on other pages, it seems to be encountering a problem here. I'm not sure what's causing the issue. Below is the code snippet: export async function getStati ...

Utilizing Json data with Jquery for dynamically placing markers on Google Maps

Seeking assistance as I am currently facing a problem where I need to loop through JSON data and add it as markers on Google Maps, but unfortunately, it only returns null value. Is there a way to automatically connect this to JSON? My plan is to have a Gr ...

Exploring Error Handling in AngularJS and How to Use $exceptionHandler

When it comes to the documentation of Angular 1 for $exceptionHandler, it states: Any uncaught exception in angular expressions is passed to this service. https://code.angularjs.org/1.3.20/docs/api/ng/service/$exceptionHandler However, I have noticed ...

Utilizing Angular Filter to compare the date in a JSON file with the current system date

<p id="appt_time" ng-if="x.dateTime | date: MM/dd/yyyy == {{todaysDate}}">DISPLAY IF TRUE{{todaysDate}} </p> Plunkr:https://plnkr.co/edit/r2qtcU3vaYIq04c5TVKG?p=preview x.dateTime | date: MM/dd/yyyy retrieves a date and time which results in ...

Is there a way to execute a function both upon page load and after a click event?

Greetings! I am completely new to using jQuery in any of my projects and could use some assistance. On one of my web pages, I have implemented code to load menu details from a JSON file. These details include the name, action, and poster for the main menu ...

When using the Three.js FBX loader to add objects to the scene, the newly added objects may not be present in the children array

After following the example provided on threejs.org for loading FBX files, I managed to successfully load my model using the function below: this.obj = null; var loader = new THREE.FBXLoader(); var objs = [] function load_init( object ) { mixer = ne ...

Issue: Connection Problem in React, Express, Axios

I've encountered an issue while attempting to host a website on an AWS EC2 instance using React, Express, and Axios. The specific problem I'm facing is the inability to make axios calls to the Express back-end that is running on the same instanc ...

Tips for creating JavaScript validation for the Amount input field (in the format 22.00) in an ASP.NET application

In this aspx page using ASP.NET 4.0, there is a text box where users can enter a rate. The requirement is that only numbers are allowed to be entered. For example, if the user enters 22, it should display as 22.00. If the user enters 22.5, it should displa ...

Vue fails to detect changes in an Array

Hey everyone, I'm currently working on a Vue project and I have been attempting to create a recursive tree from a flat list. My goal is to toggle the expanded property of each item when clicked, but for some reason, it's not updating. The issue ...

Learn the process of downloading a pdf file with vuejs and bootstrap-vue

Having trouble uploading a PDF file to my browser and then downloading it afterwards. The upload is fine, but the download isn't working. This is how I am uploading: <b-form-file v-model="form.file" :state="Boolean(form.file)" placeholder="Choose ...

Issue with updating overall expenditure functionality

I'm currently in the process of developing a straightforward shopping cart with the help of simpleCart.js. Up until now, I've managed to successfully showcase items, add them to the basket, and proceed to checkout. However, my next challenge inv ...

The beforeunload event only triggers when the page is refreshed, not when the page is exited

I am currently utilizing the react-admin framework (version 3.2) and I am attempting to trigger the beforeunload event when a user is moving away from the Edit form view. For instance, if my pathname is "feed/123", I want the beforeunload event t ...

Tips on programmatically updating the HTML Id while iterating through a loop

I need to extract the product id value from a hidden HTML input in order to utilize it within a JavaScript function. Below is the HTML code that displays products along with their attributes: {% for item in items %} <li class="first product ha ...

Concealing a Checkbox with JavaScript once it has been selected

I have been exploring a PDF software that enables me to incorporate JavaScript into a checkbox feature. My goal is to have the box checked, which would automatically insert a timestamp in a separate textbox and then conceal the checkbox itself. While I h ...

What is the process for assigning a function and its arguments as a callback in programming?

Here is a code snippet for your consideration: $scope.delete=function(){ foo('x',3); }; How can we improve the clarity of this code snippet when the callback function contains only one line that calls another function? It's important ...

Unusual occurrences of Vuex mutations within an Electron application utilizing electron-vue framework

Currently, I am in the process of developing a straightforward task management application using Vue and Electron. My framework is reliant on the electron-vue boilerplate with Vuex store integration. The app allows users to add new items to a list (and mod ...

The act of scrolling through list elements does not initiate upon the first click

I'm trying to create a script that allows users to scroll through list elements by clicking on "previous" and "next" links. However, I'm running into an issue where when the user clicks on the "next" button for the first time, they have to click ...

"Enhancing communication with PHP-powered private messaging through AJAX technology

Hey, I'm interested in creating a basic private messaging system using PHP, MySQL, JavaScript, and possibly AJAX. However, I'm unsure of how to begin. Can anyone recommend any user-friendly tutorials for building one? It doesn't have to be e ...