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

"Here's a cool trick: A guide on dynamically inserting a value into {% url tag %} using JavaScript within

Incorporating leaflet JS into a Django template, the aim is to display markers on a map where latitude and longitude are sourced from a queryset. Sending the queryset through views and utilizing the Django template language within <script> tags seeme ...

Instructions for altering the hue of a canvas square when the cursor hovers over it

I want to implement a feature where the color of a tile changes when the user hovers their mouse over it, giving it a whitened effect. The tileset I am using consists of 32x32 tiles. Below are the scripts for reference. MAP.JS function Map(name) { ...

Setting the height of an element based on the height of its background image

Hey there! I'm currently working with this component in my app, and right now, the height of the ButtonBase element is fixed. I fetch an image from the backend and use it as a backgroundImage for the ImageImagine component. I want to dynamically adjus ...

Creating a vertical scrollable content using FlexBox

Struggling to create a scrollable box using flex The Box element with the id=scroll is not behaving as expected, causing content overflow How do I set the Box to overflow=auto and enable scrolling for the content? Spending countless hours trying to unrav ...

User authentication in MEAN Stack using passport-local and $routeProvider for routing

When it comes to logging users into my application, I am utilizing passport-local. The login process involves a function called in my AngularJS controller: $http.post('/login', $scope.user).then(function (response){ if(response.data.success) ...

One CSS file linked, but only one is applied; the other is left unused

After including two CSS files, I am experiencing an issue where only one of them is being utilized. The other file does not seem to be included and the reason behind this remains unknown. My website has a standard header file that is present on all pages. ...

Creating a line of functions pool in Javascript with a delay feature

Recently, I created a code snippet that simulates a function line. It involves calling functions such as fn1, delay, fn2, delay, and so on. The idea is to call a function, remove it from the line, have a short sleep, and repeat. However, I've encount ...

Creating a Vertical Stack of Three Divs in ReactJS

Just Getting Started: As a newcomer to ReactJS and web development in general, I've put effort into researching my question without success. I acknowledge that the solution might be simpler than I think, so I apologize in advance if it turns out to b ...

Utilizing NextJS to retrieve cookie data within React components

Currently, I am working with a Next.js frontend and an Express backend. For authentication, I am utilizing cookies and have set up protected routes using Next.js middleware. The next step in my project involves accessing the cookie response within React ...

FixPermissions not working properly | Discord.js EXPERT

I am currently in the process of updating my bot to be compatible with the latest version of discord.js. I have successfully made various changes, but I am facing an issue with the overwritePermissions section within my ticket command. For some reason, the ...

Ways to restrict a function to a single DOM element using either its id or class

This script is responsible for dynamically loading pages on my website. It works fine, except that it currently iterates over all anchor tags a on the site, whereas I want it to iterate only through my navigation menu. Here is the navigation menu: <div ...

Having trouble with playing an mp4 video from Amazon S3 in an HTML video tag?

I have uploaded a video to S3 from my Android device, but it is not playing properly in HTML on Chrome. Here is the link to the video: ...

Is there a way to prevent certain words or letters from being exchanged in PHP?

In my PHP project, I am trying to replace text in one textarea and display it in another. While most of the code works fine, there are some parts that are causing issues. Currently, I am using the str_ireplace function with around 60 different words and m ...

How can I achieve transparency for an element while it is nested within multiple parent

Is there a clever method to achieve transparency for an element that allows the background of its parent element to shine through and display the body background, for example? Consider this scenario: <body style="background: url(space.jpg)"> <di ...

Button disabled is not functioning properly

Does anyone know why my button is not being disabled when I am not typing in the textbox? Here is the code snippet: $(document).ready(function () { loadData(); function loadData(is_category) { $(document).on('click&apo ...

How do I ensure a single row in my table constantly remains at the bottom?

I am currently working on developing a MUI table that shows rows, with the last row displaying the total number of colors. The challenge I am facing is ensuring that the last row always stays at the bottom when there are no results in the table. I have att ...

CSS3 variables causing issues

I want to streamline my CSS file by setting up generic variables that can be used throughout to ensure consistency and organization. For example: @shadow: 6px 6px 10px rgba(0,0,0,0.2); .shadow { box-shadow: @shadow inset; } However, when I try to a ...

Display a list of errors from an array in JavaScript or jQuery, and output them into a designated <

I need assistance with displaying a list of error messages in a specific div. Within my code, I have a #error-list div and an array called errors that contains various error messages: var errors = ["First name is blank", "Last name is blank", "Company na ...

Instead of uploading multiple files at once, allow users to upload individual files by clicking on the table row

In my dynamic table, there are 4 columns. The first 3 columns in each row have an input type='file' where users can choose a file to upload, and the 4th column has a submit button aligned with the rows. While submitting files in the first row wor ...

Leveraging Javascript within Objective-C

Can you help me understand how to implement this JavaScript code in Objective-C? var theFormId = $('form').filter(function() { return this.innerHTML.indexOf('forgot your password') != -1; }).attr('id'); Is there a way to int ...