The supported browser is unable to import ES6 modules

Attempting to incorporate moment.js as an es6 module. The most recent version of Chrome is being utilized.
Referring to the conversation here, I experimented with the src path (es6)

import * as moment from './node_modules/moment/src/moment'

Although omitting the .js appears to function perfectly for everyone in that discussion, I am unable to make it function without it. However, this one does work

import * as moment from './node_modules/moment/src/moment.js'

Nevertheless, the request ultimately fails as every moment import attempts to load its dependencies without the js extension

 GET http://127.0.0.1:8083/node_modules/moment/src/lib/utils/hooks net::ERR_ABORTED 404 (Not Found) moment.js:22
 GET http://127.0.0.1:8083/node_modules/moment/src/lib/moment/moment net::ERR_ABORTED 404 (Not Found) moment.js:26 
 GET http://127.0.0.1:8083/node_modules/moment/src/lib/moment/calendar net::ERR_ABORTED 404 (Not Found) moment.js:39 
 GET http://127.0.0.1:8083/node_modules/moment/src/lib/locale/locale net::ERR_ABORTED 404 (Not Found) moment.js:46 
 GET http://127.0.0.1:8083/node_modules/moment/src/lib/duration/duration net::ERR_ABORTED 404 (Not Found) moment.js:48 
 GET http://127.0.0.1:8083/node_modules/moment/src/lib/units/units net::ERR_ABORTED 404 (Not Found) moment.js:50 
 GET http://127.0.0.1:8083/node_modules/moment/src/lib/utils/is-date net::ERR_ABORTED 404 (Not Found)

My code only consists of a blank index.html with this script tag

<script type="module" src='./main.js'></script>

and a main.js file with this

import * as _ from './node_modules/underscore/underscore.js';
import * as moment from './node_modules/moment/src/moment.js';

The underscore.js imports and functions correctly. The problem lies solely with moment. What am I missing? Additionally, why is it that I can't get either of these to load without specifying the .js extension while it's evident that others on the GitHub thread have managed to do so

import * as moment from 'moment'
javascriptnpmecmascript-6momentjs

Answer №1

When I first started using ES6, I encountered a similar issue. One solution is to import moment like this:

import moment from "moment";

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

Capturing HTML form values and storing them in my JavaScript data object

I have a JS object with preset data as shown below in the variable var json. I am trying to create a simple HTML web form where I want the user inputs to be added as a new data set within my initial JS object. Here is the initial JS object data. The submi ...

javascriptarraysjsonobjectpost

Using jQuery, upon the page loading, the script will automatically trigger a

I am attempting to create an HTML file that automatically logs into my bank account. Below is the code I currently have: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> ...

javascriptjquerypythonhtmlajax

What is the best way to change a string containing single quotes to double quotes in order to JSON parse it

My PHP code involves encoding an array using json_encode. $params = array(1=>'something','2'=>'two'); While the encoding process itself works fine, I encountered an issue when trying to embed the JSON data into an anc ...

javascriptquotesjson

Building a node.is script to validate email addresses

This code snippet is for validating email addresses. I have successfully implemented example 5, where the email length must be over 5 characters to avoid errors and prompt users to re-enter their email address. However, I am unsure how to handle examples ...

javascriptnode.jssubstringemail-validation

Changing a callback function into a promise in Node.js for OpenTok integration

MY FUNCTIONAL CODE (SUCCESSFULLY WORKING!) I have developed a function with callback to generate tokens and create sessions for OpenTok. This function is then exported to the application. The function //Dependencies var opentok = require('./ot&ap ...

javascriptnode.jsexpressopentoktokbox

View a specific selected newsAPI article on its own dedicated page

I have been working on a news website and successfully displayed all the articles on a single page using the news API in nodeJs. Everything is functioning well, but now I want to show the clicked article on a separate page. Although I managed to route it t ...

javascriptnode.jsjsonapiexpress

Adjusting the field of view of a perspective camera in THREE.JS while maintaining the camera's original distance

My ultimate goal is to adjust the FOV value of my camera while triggering an animation. However, upon implementing the FOV value changes, I notice that my scene appears smaller. This has led me to question the mathematical relationship between the FOV val ...

javascriptthree.jscamera

Assign characteristics to the button, however it will only activate after being clicked twice

The button I created with some bootstrap attributes is not working properly on the first click. To resolve this, I initially called the function in onload and then again on the button click. However, I am now unable to do so and am seeking alternative solu ...

javascriptbootstrap-4

Trouble with incorporating numbers into Titanium

I have a query about adding a decimal number to a latitude value obtained using forwardGeocoder. Here's the code snippet I am referring to: Ti.Geolocation.forwardGeocoder(textField.value, function(e) { var a = e.latitude; var ...

javascriptgeolocationtitaniumappceleratoraddition

Choose JSON information and modify it utilizing NODE.js with identical data

Feeling stuck.. I have a JSON file with some data and I need to manipulate it. Take a look at my JSON structure: [{ "method": "GET", "path": "/", "aliases": "", "name": "rootPath", "handler": "generatedApps/avion01/actions.HomeHandler" }, { "method": "GET ...

javascriptnode.jsjson

Obtaining the MapOptions object from a map using Google Maps API version 3

Previously in Google Maps api v2, you were able to retrieve map parameters like the type and zoom directly from the map object. However, in version 3, the setOptions method is used to configure parameters, but there is no equivalent method like getOption ...

javascriptgoogle-mapsgoogle-maps-api-3

Vue router is unable to render or mount the component at the root path

I am currently working on a webpage using vue, vue-router, and laravel. I have encountered an issue where the Home component is not being rendered in the router-view when I access localhost/myproject/public_html/. However, if I click on the router link to ...

javascriptvue.jsvue-router

How can I intercept/manage the back button of the browser in React-router?

Utilizing Material-ui's Tabs, which are controlled, I am implementing them for (React-router) Links in the following manner: <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/> <Tab value={1} label="users ...

javascriptreactjsreact-routermaterial-ui

Change the height of textarea dynamically using jQuery

I am trying to create a comment box similar to Facebook's, where it resizes as text fills it using Expanding Text Areas Made Elegant This is how my view looks: <div class='expandingArea'> <pre><span></span></ ...

javascriptjqueryhtmlajax

Discovering the geographical location of all users using Node.js: A step-by-step guide

My current task involves determining the geoip location of users. I have implemented a code that stores the user's address in the database and then displays the geoip location accordingly. However, if a user changes their location and logs in from a d ...

javascriptnode.jsgeolocationexpressgeoip

Material UI Table dynamically updates with Firestore real-time data

My current code aims to update a Material UI table in real-time with data from a Firestore database. I can fetch the data and store it in an array, but when I assign this array to the table data, nothing changes. I've heard that I should use states fo ...

javascriptreactjsfirebasematerial-ui

Setting up a personalized configuration entry in environment.js

I am currently working with EmberJS version 2.4.2 and I have a specific requirement to handle custom configuration entries using an environment.js file. var ENV = { APP: { myKey: "defaultValue" } }; While everything works perfectly in development ...

javascriptember.js

What is the best method to close a polygon infowindow when hovering over a map marker?

I am currently working on integrating Google Maps which includes a set of polygons representing state boundaries and markers representing cities within each polygon. I want to display information when hovering over a polygon/state. My question is: how can ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Locate an array within a Multidimensional array and relocate it to the starting position

I've been attempting to figure out a solution for moving a specific array within another array to the beginning. The problem I'm encountering is that the code I was using, as suggested in a previous question, only removes the last value and plac ...

javascriptarraysmultidimensional-array

What is the best method to detect a change in scroll position on a webpage using JavaScript?

Is there a way to trigger an event when the page's scroll position changes? I'm interested in creating a dynamic table of contents similar to (where the active item changes as you scroll). Can this be achieved without directly accessing the cu ...

javascriptcss