Error message "MODULE_NOT_FOUND occurring post typescript transpilation"

Upon building my typescript app and starting the app.js, I encountered this error:

node:internal/modules/cjs/loader:1050
  throw err;
  ^

Error: Cannot find module 'controllers'

I suspect that the issue lies in how I am using import/export statements. For example, in my TypeScript file, I am importing like this:

import {
    checkToken,
    getUserInfo,
    signIn,
    signUp
} from 'controllers';

However, the compiled JavaScript dist uses a different approach:

const controllers_1 = require("controllers");

This is my tsconfig setup:

{
    "compilerOptions": {
        "target": "es2020",
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "dist",
        "noImplicitAny": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "rootDirs": ["src"],
        "baseUrl": "./src"
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules"]
}

Answer №1

Consider updating the configuration in ts.config module:

{
    "compilerOptions": {
        "target": "es2020",
        "module": "es2020", // you have the option to select either es2020 or esnext
        "moduleResolution": "node",
        "outDir": "dist",
        "noImplicitAny": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "rootDirs": ["src"],
        "baseUrl": "./src"
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules"]
}

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

What could be causing my images not to show up when I use string interpolation for src links in Vue.js?

I've encountered an issue while working on Vue.js where I'm struggling to render a couple of images from the local directory. What puzzles me is that this problem arises when using string interpolation, like in the code snippet below: <img :s ...

Is it possible to create a component with a button that triggers the rendering of a different component?

I am struggling to implement an 'edit' button within a component that, upon clicking, should display a separate component known as a 'client edit modal'. I'm facing challenges in figuring out how to achieve this functionality. The ...

Creating a POST request in Rails 3

Is there a way to integrate web services in Rails 3 by sending POST parameters to an external URL? Typically, I utilize a command line method like the one below for posting: curl -X POST -u "v10REVkw:XuCqIhyCw" \ -H "Content-Type: application/json" & ...

Can someone provide a clarification on the meaning of this Javascript code snippet?

I stumbled upon the code snippet below: let customHandler; clearTimeout(customHandler); customHandler = setTimeout(() => {...}); This code example is actually part of a Vue application and consists of the following method: public handleMultiSelectIn ...

Having trouble locating the web element within a div popup while utilizing Node.js and WebdriverIO

I need assistance with a seemingly simple task. I am currently learning webdriverjs and attempted to write a short code to register for an account on the FitBit website at URL: www.fitbit.com/signup. After entering my email and password, a popup appears as ...

Creating a Personalized Tab Layout with react-bootstrap

Incorporating react-bootstrap components and styled components, I have implemented tabs in my project. The current appearance of the tabs is as shown here: https://i.sstatic.net/rPnlO.png However, my requirement is to have the tabs look like this inst ...

The background color of the Bootstrap 5 navbar remains static and does not transition when scrolling

I'm currently developing an Angular application using Bootstrap 5. One of the features I am working on is a transparent navbar that should change to a dark color when the page is scrolled. However, I seem to be encountering an issue where the navbar r ...

fetch information using ajax and jquery

I'm facing an issue with my ajax request on my website. I'm trying to dynamically fetch pages from a database using jquery and ajax. However, I'm not getting any response, and I'm unsure whether the problem lies in my php code or my j ...

The webpage encountered an error while attempting to load a resource: server reported a 404 (Not Found) status for jquery-1.7.1.min.js

I am currently in the process of creating an asp.net web application. For my project, I have included jquery-1.7.1.min.js using the code snippet below: <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> However, upon testing, ...

React: A functional component triggers both onClick events

In my project, I have organized my files in the following directory structure: Todo -> TodoList -> TodoItem I am passing todos, onSelection, and onDeletion functions from the Todo component to the TodoList component, and then further down to the To ...

Converting an Array Object to an Object in React Native: A Step-by-Step

After making a call to the API and fetching the array, I have the following data structure: 0: 2019-07-25: {title: "Sub task for 11"} __proto__: Object 1: {2019-07-19: {…}} 2: {2019-07-24: {…}} 3: {2019-07-26: {…}} 4: {2019-07-25: {…}} 5: {2019-07 ...

When navigating back from a child route in history mode, the component is erroneously mounted twice

I have encountered an issue while using vue-router in history mode. When I am on the child route "/dashboard" and refresh the page, the <ccp/> component seems to be mounted twice. The ccp component has console logging in both the created and mounted ...

The integration between Mongoose and GraphQL does not support populating models

It seems like I have encountered a unique issue that none of the existing solutions have been able to resolve. I am running a backend server with Apollo Server + Mongoose on localhost. However, I am facing difficulties in populating or creating the collect ...

Please send the element that is specifically activated by the onClick function

This is the HTML code I am working with: <li class="custom-bottom-list"> <a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a> </li> Here is my JavaScript function for Upvot ...

What is the most effective approach for handling JSON data from URLs in a professional manner?

Hey there, I'm facing a dilemma on how to efficiently handle data retrieved from various URLs on my website. My website allows me to fetch JSON data from multiple URLs. For instance, there's a page full of posts related to a specific group with ...

What is the best way to condense a repetitive method declaration and make it more concise?

I'm facing a situation where I have declared similar const values. Here's my current setup... import React from 'react' function Component_a() { const x = 5; const y = 10; const image_a = [...Array(x)].map((e, i) => ...

Issue encountered in transferring Json data from controller to view, Laravel version 5.6

I'm struggling to convert the Json value received from my controller into a properly readable JavaScript value. This is my controller: $room = Room:: select('id', 'name', 'capacity', 'status') ...

What steps do I need to take to run my Angular project locally using globally installed npm packages?

I'm interested in maintaining all my packages globally, similar to how node package itself operates. For instance, if I have a package named "Highcharts" listed in my package.json file, I prefer to install it globally instead of creating a local node_ ...

Implementing subclass properties in TypeScript that override parent class properties

I have a base class called Parent from a library with certain properties, and a derived class Child which inherits the same properties but with different data types. class Parent { propertyA: string; propertyB: string; propertyC: string; const ...

Getting a JSON response from a JSP page through an AJAX request

I'm encountering an issue with a JSP page that is supposed to send a JSON response when requested through an AJAX call. However, the response is being directed to the error part of the AJAX call instead of the success part. Below is the code in my JS ...