Typescript having issues compiling to commonjs/es2015 accurately

I currently have Node v14.5.0 installed and I'm using ts-node-dev in my development environment

However, I am encountering an error every time I try to compile to JS.

Initially, I attempted with the following tsconfig:

"target": "es5",
"module": "commonjs"
"outDir": "./dist",
"rootDir": "./src"

When running tsc and node dist/app.js, I receive the following error:

UnhandledPromiseRejectionWarning: D:\Dev\src\entity\BaseEntity.ts:1
import {
^^^^^^

SyntaxError: Cannot use import statement outside a module

Upon further investigation, I discovered that I needed to specify that Node should use Modules by adding

"type": "module"
to my package.json. This adjustment led to a new error message:

Object.defineProperty(exports, "__esModule", { value: true });
                      ^

ReferenceError: exports is not defined

Continuing my research, I explored different solutions such as:

  • Changing

    "module": "commonjs"
    to
    "module": "es2015"
    in tsconfig

    This change caused issues when attempting to run ts-node-dev, resulting in the error:

    Cannot use import statement outside a module
    .

  • Adding

    "moduleResolution": "node"
    to tsconfig

    With this adjustment and the "es2015" module specified in tsconfig, all my TypeScript imports required the .JS extension. For example: import { foo } from '../bar.js. Not specifying the extension resulted in an error like:

    Error [ERR_MODULE_NOT_FOUND]: Cannot find module D:/...
    . Additionally, this prevented me from using ts-node-dev as it threw the previously mentioned error.

Answer №1

The issue originated from the ormconfig.js file, as my entities path was erroneously directed towards a .ts file instead of a .js file.

Resolution:

entities: ['dist/entity/*.js'],
migrations: ['dist/migration/**/*.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

Finding a solution for duplicate date selections in NextJS using react-calendar

I am currently working on a calendar component using NextJS, typescript, tailwindcss, and the react-calendar library. I have encountered an issue with duplicate dates appearing in the calendar when selecting a date range. Although I have managed to handle ...

Notifying users when a document is nearing its expiration date in the most effective manner

In my calendar app, I set appointments to automatically delete after 5 minutes. Now, I want to retrieve all appointments that are about to expire within 1 minute and send a notification to the front-end indicating their impending expiration. Although I at ...

execute a function imported from another file within an express application

To simplify the process of scraping around 20 websites, I have decided to create separate documents for each site in which to contain the scrape function. However, every time I attempt this, I encounter the following error: function scrape(url, callback) ...

Counting words with JavaScript without using an input tag is a useful skill

Is there a way to count the words in a text using only p and span tags, without using input tags? How can this be achieved? <span class="word" id="word">Words Number</span> <p class="any" id="any"> ...

In Javascript, swap out a particular colored region in an image with a different image

I've been scouring the internet in search of a solution to my problem, but it seems like I might not be looking in the right places. Imagine this image below, how can I replace the blue area with an image uploaded by the user? I'm struggling to ...

The mouse coordinates do not align with the drawing of a rectangle on the canvas

I am having some issues with drawing a rectangle on mouse drag over the canvas that is overlayed on an HTML5 video JS player. The rectangle is being drawn, but it does not align correctly with the mouse coordinates. I suspect that the canvas, which is ove ...

What is the best way to incorporate JavaScript code as React syntax?

For my project, I am using the OpenLayers API Map. I'm unsure of the correct way to incorporate JavaScript code in React or vice versa. Here is an answer on how to use markers in the map, but I am struggling to implement it in my current code since I ...

Retrieve DirectionsResult data from a Google Maps URL

Currently, I am developing an updated tool that can transform Google Maps directions into GPX files. The initial version of this tool is performing quite well: it utilizes the Google Maps Javascript API (v3) to showcase a map on the website, allowing users ...

Is It Possible to Use Separate Stylesheets for Different Web Browsers?

I have been trying to implement a JavaScript code that loads a specific stylesheet based on the user's browser. However, it seems like the code is not functioning correctly as none of the stylesheets are being displayed. I have meticulously reviewed t ...

Unable to send message using window.parent.postMessage when src is set to "data:text/html;charset=utf-8" within an iframe

I'm currently working on a project to develop a compact editor that allows users to edit HTML using an iframe. I'm passing an HTML string into the src attribute as data:text/html, but I'm encountering challenges with communication in the par ...

Is there a neat method in React and Material UI for de-structuring the props that I am passing to useStyles?

When passing props to useStyles based on the Material docs, our code looks like this: const useStyles = makeStyles({ // style rule foo: props => ({ backgroundColor: props.backgroundColor, }), bar: { // CSS property color: props => ...

Troubleshooting issues with applying styles in Vue framework when configured with webpack

I'm facing an issue with setting up the Vue framework using webpack. Specifically, I'm having trouble with styles not being applied when included in the <style> tag within single file components. Despite following several tutorials on this ...

Issues have arisen with Google Maps functionality following the API integration, resulting in a blank grey

I am experiencing an issue with Google Maps where it is displaying a grey box or sometimes showing nothing/white. I have tried various solutions found online but none of them have worked for me. Does anyone have a solution? I even attempted to change the ...

What is the best way to extract a nested array of objects and merge them into the main array?

I've been working on a feature that involves grouping and ungrouping items. A few days ago, I posted this question: How can I group specific items within an object in the same array and delete them from the core array? where some helpful individuals ...

Function returning undefined when accessing prototype property in JavaScript

When attempting to create an image rotator using prototypal inheritance, I am encountering an error in the console showing: TypeError: this.curPhoto is undefined this.curPhoto.removeClass('previous'); I have placed this code in the callb ...

What is the best way to modify an array's property in order to achieve the desired outcome when using json_encode?

Expected Result ['#ff0000','#4caf50','#4caf50','#4caf50','#00bcd4','#00bcd4','#4caf50','#4caf50'] The output I am receiving is as follows: ["'#ff0000','#4caf5 ...

What is the process for dynamically checking in a node in jstree?

I am utilizing Jstree from https://github.com/vakata/jstree. I have successfully loaded the tree structure, and now I want to bind checked checkboxes from an array of data. By default, the nodes have unique ids. I will check the id of each node in the arra ...

Error message in JS/Ajax alert box

I keep receiving an alert box saying "Image uploaded" even when the variable $imagename is empty. Below is the script in question: <script> function ajax_post1(ca){ var cat = ca; var name = document.getElementById("name").value; var ...

Pictures will be displayed briefly for 1 second prior to the initiation of the JavaScript animation

I recently built a website using gatsby.js and incorporated bounce.js to animate some images on the page. Bounce.js is a JavaScript library that offers DOM animation functionalities. Although everything appears fine when I view the site locally, once I de ...