What could be the reason for the esm loader not recognizing my import?

Running a small express server and encountering an issue in my bin/www.ts where I import my app.ts file like so:

import app from '../app';

After building the project into JavaScript using: tsc --project ./ and running it with nodemon ./build/bin/www, an error appears in the console:

internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^
Error [ERR_MODULE_NOT_FOUND]: 
Cannot find module '/Users/t86b/Desktop/Dev/Projects/TestServerProject/Server/build/app' 
imported from /Users/t86b/Desktop/Dev/Projects/TestServerProject/Server/build/bin/www.js

The specified file does exist, and I've included

"type":"module"
in my package.json. Additionally, I've removed all requires from app.ts without success. Unsure of the next steps to take. Below is a condensed version of my package.json:

{
  ...
  "scripts": {
    "build": "tsc --project ./",
    "start": "nodemon ./build/bin/www",
    "start:dev": "nodemon -r ./bin/www.ts",
    "tsc": "tsc",
    "tsStart": "node ./build/bin/www"
  },
  ...
  "dependencies": {
    ...
    "express": "^4.17.1",
    "typescript": "^4.0.3"
  },
  "type": "module",
  "devDependencies": {
    ...
    "nodemon": "^2.0.7",
    "ts-node": "^9.1.1"
  }
}

My ts.config:

{
  "compilerOptions": {   
    "target": "es2017",
    "module": "ESNext",
    "lib": ["ES2017"],  
    "outDir": "./build",
    "rootDir": "./",
    "strict": true,
    "moduleResolution": "node", 
    "esModuleInterop": true, 
    /* Advanced Options */
    "skipLibCheck": true, 
    "forceConsistentCasingInFileNames": true   
  }
}

If helpful, here's a snippet of my app.ts (error-free for clarity):

import express from 'express';
import indexRouter from './routes/index';
...
let app = express();
app.use('/', indexRouter);

export default app;

Seeking guidance on resolving the issue to successfully start up the server. Any additional details needed, feel free to ask.

Answer №1

After some helpful guidance from @ASDFGerte, I learned that when using esm it's important to include the file extension in relative imports. In order to resolve an issue with my code, I made a simple adjustment: import app from '../app'; became import app from '../app.js';

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

Checking and merging arrays in Javascript

I have a unique challenge involving two arrays of objects that I need to merge while excluding any duplicates. Specifically, if an object with the key apple: 222 already exists in the first array, it should be excluded from the second array. Please see be ...

What is the best way to retrieve specific items using the Chosen JQuery plugin?

I have a multiple select box set up with chosen, but I am unsure how to retrieve the selected items. <select class="multiselect" multiple="" name="parlementId"> @foreach (Politicus p in politici) { <optio ...

URL from different domains

Currently, I am attempting to utilize this URL within my javascript code: Below is the snippet of my javascript code: $.ajax({ url: 'http://api.addressify.com.au/address/autoComplete', type: 'GET', crossDomain ...

Wading through the swamp of Node.js callbacks

Despite tirelessly searching through SO posts, tutorials, videos, and how-to guides, I find myself unable to successfully implement a simple callback. Any guidance on where I may be going wrong would greatly assist me in bridging the gap in my understandin ...

Passing values dynamically to a JavaScript function within a Chrome extension using Python at runtime

I have encountered a unique challenge in my automation work, which I detailed in this query It's important to note that I am utilizing Python with Selenium WebDriver As I navigate through a series of changes and obstacles, I find myself exploring th ...

Using Snap SVG in a React application with Next.js and TypeScript

Query I have been attempting to incorporate SnapSVG into my React project, but I am encountering difficulties getting it to function properly from the outset. Can someone provide assistance with the correct configurations? I do not have much experience wi ...

How to eliminate an item from an array using index in JavaScript with jQuery

In order to remove a specific array added in an object by index, I would like the functionality where when a user clicks on a button, it removes the corresponding array. Here's what I have in mind: HTML: <button>1</button> <button>2 ...

React App searching for unused static files

Currently, my React application is deployed on the Nginx web server. Accessing the application using the URL XX.XX.XX.XX works fine. However, I want to be able to access it through the URL XX.XX.XX.XX/myapp/frontend. To achieve this, I have set up a revers ...

When using JSON.Stringify in a React App, it only displays the first item and the length of the object instead of all the other items

Working on a React App, I encountered an issue while trying to convert an array to JSON and send it to the server. My approach was like this: console.log(JSON.stringify(mainArray)) I anticipated seeing output like this during testing: "breakfast": { ...

Is the iCheck feature designed to block all parent click events?

I've developed an "interaction tracker" system that collects anonymous data on clicked page elements. By implementing an event listener for clicks on the body, I can track interactions with any element on my site successfully. However, interestingly ...

Struggling to locate the element for clicking or sending keys in Selenium using Java?

Hi everyone, I'm a new member of this forum and I'm just starting out with coding for the first time. I have encountered an issue with a specific part of my code: md-input-container class="md-default-theme md-input-invalid">> label for="i ...

Using Promises Across Multiple Files in NodeJs

Initially, I had a file containing a promise that worked perfectly. However, realizing the need to reuse these functions frequently, I decided to create a new file to hold the function and used module.export for universal access. When I log crop_inventory ...

Issue encountered with Azure DevOps during TypeScript (TS) build due to a type mismatch error: 'false' being unable to be assigned to type 'Date'. Conversely, the build functions correctly when run locally, despite the type being defined as 'Date | boolean'

I am facing an issue with my NestJS API while trying to build it using Azure DevOps pipeline. The build fails with the following error: src/auth/auth.controller.ts(49,7): error TS2322: Type 'false' is not assignable to type 'Date'. src/ ...

Display four unique automobile insignias using Webcomponent/Stencil.js

Exploring Web Components and Stencil.js for the first time, I'm currently developing an application that offers detailed car information based on the user's selection of car type. The challenge I'm facing involves displaying four different l ...

The assignment of ajax success data to variables results in an error because data[0] is not defined

Having some trouble retrieving and assigning data from a database in JavaScript using AJAX to call a PHP script with a MySQL query. Although the AJAX request is successful, when trying to store the data into variables, they appear as undefined or NaN in th ...

What is the process for evaluating the variable `results` in this scenario?

Can anyone provide some insight on how this code is functioning? I grasp the concept of callbacks but during a tutorial video, I encountered this code snippet: function addAndHandle(n1, n2, cb) { const result = n1 + n2; cb(result); } addAndHandle ...

The Ajax operation does not finish before the second one is initiated

My Ajax function is set up like this: function PersonAtlLawUpdate(personRef) { var selectionPanel = $('div#SelectionPanel'); var fromdate = selectionPanel.find('input#FromDateTextBox')[0].defaultValue; var timeSpan = selectionPanel.fin ...

Leverage a JavaScript plugin from the node modules directory within your Vue.js project

Is there a way to import Cal-HeatMap (https://www.npmjs.com/package/cal-heatmap) into my project after saving it with npm install? This is the method I attempted: <script> import calHeatmap from 'cal-heatmap' export default { na ...

express.js does not properly support the app.get functionality

app.get('/:id', function (req, res){ UserModel.find({ user: req.params.id}, function (err, user){ if (err) throw err; console.log(user + '\n\n'); res.render('profile.ejs', { ...

How can I update the language of a button text in a React component?

Looking to update the button labels from a different language to English. Here is how it currently appears: ...