bringing in a js file with an import statement at the beginning

I am looking to import a file that brings in another file for use across multiple pages

Here is my folder structure:

js
  modules
    momentum-scrolling
  index.js
  about.js
  contact.js

Contents of momentum-scrolling.js:

import LocomotiveScroll from 'locomotive-scroll';
export const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
});

Contents of index.js:

import './modules/momentum-scrolling'
window.addEventListener('DOMContentLoaded', () => {
  // some code
});

Answer №1

To ensure the proper functioning of these imports, it is essential to add type="module" within the html script tag. Here's an example:

<script type="module" src="index.js"></script>

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

using an external JavaScript function in the MongoDB shell

In my case, I have JavaScript functions that are stored in a JSON file: functions={} functions.a = function(){ return "returned" } I've come across tutorials suggesting that by importing this JSON file, I should be able to use these ...

"Enhance your gaming experience with Three JS special effects

I'm in the process of creating a multiplayer web game using Three JS. So far, I have successfully implemented the game logic on both client and server sides, mesh imports, animations, skill bars, health bars, and the ability for players to engage in c ...

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

The .gltf file depicts a more shadowy appearance compared to the initial obj model

The model I loaded appears darker compared to the model uploaded to the gltf-viewer, with a slightly different color. It is also darker than the original obj file. Despite having a similar light environment, the reason for this discrepancy remains unknown. ...

How can I align an image and text alongside another image using HTML and CSS?

Having some trouble positioning an Image and Text next to another Image. Check out an example here: I attempted using floats, but it doesn't seem to be working. Here is the code I have: .left {float: left;} .right{float: right;} <div class="left ...

Having trouble retrieving the value of a textarea within a jQuery UI dialog box

I attempted to place a textarea within a dialog box, with the intention of retrieving the value of that textarea when the "ok" button is clicked. However, I am encountering difficulties in retrieving the value. What could possibly be causing this issue? ...

Implementing optimal techniques to create a JavaScript file for data retrieval in a Node.js application

I've developed a file specifically for data access purposes, where I'm keeping all my functions: const sql = require('mssql'); async function getUsers(config) { try { let pool = await sql.connect(conf ...

What is the process for restarting the timer within a timer controlled by the react-countdown component?

Looking for guidance on how to implement a reset() function in ReactJS and JavaScript to reset a timer when the "Reset Clock" button is clicked on my webpage. The goal is to have the timer return to its initial value. Open to suggestions on how to achieve ...

Iterating through an array of objects within a Vuejs template

Consider the JSON data below: { "games": [ { "id": 1, "init_date": "2020-02-11T07:47:33.627+0000", "players_in_game": [ { "id": 1, "player": { "id": 1, "player": "Jack Bauer", ...

Ways to avoid storing repeating paragraphs in JavaScript Array?

Can someone help me with my code? I am struggling to prevent duplicate data from being saved into an array. When I click on any two paragraph elements, the text inside them gets added to an array named `test`. However, I want to avoid saving the same tex ...

Even though setState is supposed to update the state and trigger a render, it's not showing up in the view for some

My React app consists of a simple word/definition feature. There is an edit box that appears for users to change the definition when they click on "edit". Even though I call getGlossary() to update the new definition in the state, I can see the changes in ...

Modifying the values of Highcharts-Vue chart options does not result in any changes once they have been

I recently started incorporating Highcharts into my Vue project using the highcharts-vue library. A) Initially, in pure JavaScript, the following code snippet functions as expected: let b = 5; let data = { a: b } console.log('data', data.a) ...

After a period of time since the server has been initialized, the function req.isAuthenticated() no

In my Node.js routes.js file, I have a function implemented to check if a request is isAuthenticated before serving it: function isLoggedIn(req, res, next) { if (req.isAuthenticated()) { console.log('Session Expiry '+req.session.cook ...

Can you explain the distinction between browser.sleep() and browser.wait() functions?

Encountering timing problems with my protractor tests. Occasionally, test cases fail because of network or performance-related issues. I managed to resolve these issues using browser.sleep(), but recently discovered browser.wait(). What sets them apart an ...

Link to the Vue Bootstrap Toast Message

I have integrated vue-bootstrap-toasts (demo) into my website to display Toasts. However, I am facing an issue with adding a link to the toast that should redirect to another page. this.$toast.success('Test is created', { href: "www.googl ...

I am puzzled by the fact that the center cell of my table is longer than the surrounding cells

I'm currently working on a project that involves creating a webpage. I have a table, and when I execute the code, I notice that the center cell appears longer than the rest of the cells. table,td,tr{border: 1px solid red; } <!document html> ...

Enhancing Couchdb documents with unique id and author information through an update handler

Is there a way to include additional fields using the update handler in Couchdb? I'm trying to insert the author (with a validation function to verify that the user is logged in) and the id when creating a new document via an update handler. The auth ...

Is it possible to iterate through various values using the same variable name in Mustache.js?

I have data structured in the following way: hello this is {{replacement_data}} and this {{replacement_data}} is {{replacement_data}}. I'm interested in using Mustache to substitute these placeholders with values from an array: [val1, val2, val3. ...

Manipulating HTML attributes with Jquery's attr() method results in returning [object Object]

Despite reading numerous articles and questions, I have yet to find a solution. My PHP page is designed to update an easypiechart using AJAX with database values checked every X minutes. For demonstration purposes, I have set the update interval to 10 seco ...

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

I recently implemented unslider to create a slideshow that spans 100% of the width on my website. Everything seemed to be working fine until I tried resizing the screen, and the slides remained the same size as they were initially loaded. Here is the code ...