Error message: Unable to locate module without the '.js' extension at the end of the import file path

It seems like the solution is not difficult, just something obvious.

I am working on a simple TypeScript project. There are no modules involved, only TypeScript for compilation. The TS files compile into JS files in the dist folder, which are then connected in app.js (you can see the project structure in the photo).

After compiling the files, there are no errors, but the browser cannot find the imported files until I change this:

import { ProjectList } from "./components/project-list";

to this:

import { ProjectList } from "./components/project-list.js";

in the compiled JS files.

Why doesn't it work without '.js'!?

In index.js, I specify script type="module". https://i.sstatic.net/AlbLC.png https://i.sstatic.net/fnaZU.png

javascripttypescriptcompilation

Answer №1

If you're looking for assistance, I recommend checking out this response:

Simply include the following line in your TypeScript script: 

import { ProjectList } from "./components/project-list.js";
and it should resolve the issue

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

Clicking the ASP button does not trigger the onclick event when a web user control is included on the webpage

I have been working on a web form application that I developed using the visual studio template. The template includes a content placeholder that gets replaced by the content of each accessed page. One particular page, which contains server controls like t ...

javascriptc#htmlasp.netweb-controls

Is it possible to send multiple HTML input values to a Google Spreadsheet using only JavaScript?

Seeking a faster and more efficient way to send the values of multiple HTML Inputs to a specific location in a Google Spreadsheet? The existing script takes too long to complete, often skips inputs, and relies heavily on "google.script.run". Due to softwar ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

The wrong parameter is used to infer the generic function type argument in TypeScript

When using the code snippet below and not explicitly specifying T at function call, such as getOrPut<Item>(...), it is inferred from the create parameter. However, this can lead to the created item type being incompatible with the obj dictionary, as ...

typescripttypescript-generics

What is the best way to search for items using only a portion of a phone number or typing a name in any case (uppercase, lowercase) and still get accurate results?

let contacts = [ { name: 'John', phone: 987654 }, { name: 'Sara', phone: 654321 } ] I am developing a contact manager app with various functions to manage contacts. Add new contac ...

javascriptnode.jsnpmweb-frontend

Navigate to a different directory within Cypress by utilizing the cy.exec() function

Dealing with cypress to execute a python script in another directory. However, it seems like the directory change is not functioning as expected. visitPythonProject() { cy.exec("cd /Users/**/Desktop/project/"); cy.exec("ls"); // thi ...

javascripttypescriptcypress

Generating a JavaScript object from a string to optimize its compatibility with datatables

This inquiry pertains to the plugin available at: var hidecols = '{"sClass": "Hide", "aTargets": [0]},{"sClass": "asdf", "aTargets": [1]},{"sClass": "qwer", "aTargets": [2]}'; var hidecolsobj = eval('(' + hidecols + ')'); ...

javascriptjqueryobjectdatatables

Displaying an array of objects in the MUI Datagrid interface

I have integrated Redux into my project to retrieve data from the API, and this is a snapshot of the data structure: https://i.stack.imgur.com/jMjUF.png My current challenge lies in finding an effective way to display the information stored within the &a ...

javascriptreactjsmaterial-uidatagridmui-datatable

Selecting radio button does not update corresponding label

I am having an issue with setting a radio button as checked. In the example snippet, it works perfectly fine but on my localhost, it is not working. Even though the input gets checked, the label does not change. Surprisingly, if I set another radio button ...

javascriptjqueryhtmlcssradio-button

Having trouble retrieving accurate JSON data from an excel workbook

Currently, I am utilizing the npm module xlsx for the purpose of writing and reading JSON data. My goal is to take this JSON data and write it into an Excel file: { "name": "John", "class": 1, "address" : [ { "street": "12th Cross", "city": "London" }, { ...

javascriptnode.jsjsonexcelnpm

Creating a POST method in AngularJS

Here is the code snippet I am working with: var req = { method: 'POST', url: '/customer', headers: { 'Content-Type': 'application/json' }, data: { test: 'testvalue' } }; $http(re ...

javascriptangularjs

How can we apply position: fixed in print media queries using CSS?

In order to display a footer on every printed page, we have implemented the use of position: fixed. However, one issue that has arisen is that content ends up flowing underneath the footer. Is there a solution to prevent this from happening while still k ...

javascripthtmlcss

React: A guide to properly utilizing PropTypes inheritance

I've created a wrapper component for React Router Dom and Material UI: import Button from '@material-ui/core/Button'; import React from 'react'; import { Link as RouterLink } from 'react-router-dom'; const forwardedLink ...

javascriptreactjsmaterial-uireact-router-domreact-proptypes

Exploring Vue JS: A guide to using the onChange event to dynamically update input values

I am currently utilizing the npm package vue-range-component to adjust values via a slider, which then dynamically updates in the input field. However, I'm encountering an issue with applying the onChange event for inputs. I need to have the ability ...

javascriptvue.jsvuejs2onchange

Display a single video on an HTML page in sequential order

My webpage contains a video tag for playing online videos. Instead of just one, I have utilized two video tags. However, when attempting to play both videos simultaneously, they end up playing at the same time. I am seeking a solution where if I start pla ...

javascriptjqueryhtml

Display options through numerical selection

I have been attempting to construct something, but I'm encountering difficulties. My goal is to create a functionality where entering a number in an input field will generate that many additional input fields. I've attempted to implement this us ...

javascriptjqueryarraysinput

Sending a post request from JavaScript to Django Rest Framework

I am working with a DFR api endpoint: url = http://example.com/api/data/ The URL of the page where I am running JavaScript code is: http://example.com/page/1/ I have logged in as User1 in my browser. POST request - from DRF browser API - successful. G ...

javascriptdjango-rest-frameworkaxios

The correct way to update component state when handling an onChange event in React using Typescript

How can I update the state for 'selectedValues' in a React component called CheckboxWindow when the onChange() function is triggered by clicking on a checkbox? export const CheckboxWindow: React.FC<Props> = props => { const [selected ...

javascriptreactjstypescriptcomponentssetstate

"Declare the Status, Refresh the Page, and Specify the Web

After refreshing the page, I am facing an issue where the text corresponding to the current URL is not being displayed. My application consists of a Main component that renders a MiniDrawer component containing a NavLink, followed by routing with the Route ...

javascriptreactjsmaterial-uireact-router-dom

"Utilizing Angular's dynamic variable feature to apply ngClass dynamically

Looking for guidance on Angular - color change on button click. The loop binding is functioning well with dynamic variable display in an outer element like {{'profile3.q2_' + (i+1) | translate}}, but facing issues with [ngClass] variable binding ...

angulartypescript

exploring the network of connections

This is what the HTML structure of the webpage looks like: <body> <form> <input type='file'/> </form> <div id='list'> <div>value here<input id='delete' type='button'/>< ...

javascripthtmldom