Updating JavaScript files generated from TypeScript in IntelliJ; encountering issues with js not being refreshed

Struggling with a puzzling issue in IntelliJ related to the automatic deployment of changes while my server is running (specifically Spring Boot).

I've made sure to enable the "Build project automatically" option in my IntelliJ settings.

Whenever I modify a .ts file, the .js and .js.map files are properly updated in the code.

However, the .ts file itself does not get updated in the target directory. Luckily, pressing the "Compile" shortcut refreshes the .ts file in the target output. So far so good.

The problem arises when the target .js and .js.map files fail to update. No matter how many times I attempt to compile them, they remain unchanged. This results in a mismatch between the .ts and .js files, requiring me to restart the server for the .js file alterations to take effect.

To make matters stranger, this process works seamlessly on my work computer - even though I've double-checked that the settings are identical to those on my home machine. Strangely enough, a colleague also faces this issue on his work computer despite our efforts to find any discrepancies in the settings.

It appears as if IntelliJ detects file changes in some configurations but completely overlooks them in others, especially those involving generated files.

If anyone has any insights or suggestions, please do share!

javascripttypescriptspring-bootintellij-idea

Answer №1

After much trial and error, I finally came up with a solution for this issue.

I made a crucial adjustment to the tsconfig.json file by specifying the compilerOptions/outDir to directly output into the target/classes/static directory. This change effectively implemented the desired updates. (for me, the configuration ended up looking like 

../../../../../target/classes/static/scripts
)

An unintended consequence of this modification was that the source map paths seemed distorted, displaying something resembling a folder structure such as 

C:/.../src/main/resorces/static/...
in the browser's developer tools. Additionally, accessing TypeScript files became problematic at times, appearing blank.

To address this issue, I also adjusted the compilerOptions/inlineSources to true and set compilerOptions/sourceRoot to a fictional placeholder like http://TypeScriptFiles. By doing so, the development tools now showcase a distinct root node labeled TypeScriptFiles instead of the convoluted nested directories previously seen.

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

Asynchronous task within an if statement

After pressing a button, it triggers the check function, which then executes the isReady() function to perform operations and determine its truth value. During the evaluation process, the isReady() method may actually return false, yet display "Success" i ...

javascripttypescript

Discovering all class names following the same naming convention and storing them in an array through Javascript

Hey everyone, I could use some assistance with a coding challenge. I'm aiming to extract all class names from the DOM that share a common naming convention and store them in an array. For instance: <div class="userName_342">John</div> & ...

javascripthtml

What is the proper way to invoke render functions using Vue 3 composition API?

During my time with Vue 2, I would typically call render() in this manner: export default { mounted(){ ... }, render(){ ... }, methods(){ ... } } Now that I'm exploring Vue 3 and the composition API, I ...

javascriptvue.js

Restrict dropping items in HTML5 by only allowing the drop if the target div is

I am working on developing a user-friendly visual interface for creating simple graphics. The interface includes 10 image icons and 5 boxes where users can place these icons. Users have the freedom to select which icon they want to display and arrange them ...

javascripthtml

Tips for refreshing the apollo cache

I have been pondering why updating data within the Apollo Client cache seems more challenging compared to similar libraries such as react-query. For instance, when dealing with a query involving pagination (offset and limit) and receiving an array of item ...

reactjstypescriptgraphqlapollo-client

Issue with express-validator returning undefined value on forms set to enctype='multipart/form-data'

Currently, I am developing a login authentication application using basic node.js+express. While extracting values (such as name, email, etc) from the registration page, I utilize express-validator for validation. However, I encounter an issue where all va ...

javascriptnode.jsmongodbexpressexpress-validator

"The Bootstrap framework in MVC is throwing an error message stating that '$.notify' is not recognized as

I'm having trouble getting a notify to show up when my ajax function completes successfully. I've checked my code and everything seems fine, but for some reason the notify isn't working as expected. When I checked the Chrome console, I found ...

javascriptjqueryajaxasp.net-mvcnotify

Unnecessary Page Diversion

Within my index.php file, I have a download button with the id of "render". Using AJAX, I am sending a request to the server. The JavaScript code being utilized is as follows: $('#render').click(function(e){ $('html,body').animat ...

javascriptphpjqueryajax

Measuring Page Loading Status using Ajax

I'm still learning Ajax and JQuery, and I've been having a tough time putting this together. My goal is to use ajax navigation to load URLs and implement back and front navigations with popstate. The code below is functional, but I'm facing ...

javascriptjqueryajax

What is the best way to initiate multiple processes in Node.js and ensure they finish before proceeding?

When working with Node.js and TypeScript, my goal is to initiate multiple processes using the spawn function. Afterwards, I aim to ensure all of these processes are completed before proceeding to execute any additional commands. ...

node.jstypescriptspawn

What is the process for customizing a form in the "add event" feature of wdCalender?

I am looking to customize the form in wdCalendar to add events with fields like first name and last name instead of "what". I need to modify the quickadd function in jquery.calendar.js, which is triggered when a user clicks on the calendar to add an event. ...

javascriptjqueryajaxcalendar

Pass data to three.js using an input form

I'm trying to figure out how to pass the value of an input form to a three.js workspace. Here's my code where I want to use a slider to change the radius of a sphere, without relying on the built-in controls of three.js since I'm new to HTML ...

javascripthtmlthree.js

Images are failing to render on Next.js

Hello there! I am facing an issue while working on my Next.js + TypeScript application. I need to ensure that all the images in the array passed through props are displayed. My initial approach was to pass the path and retrieve the image directly from the ...

javascriptreactjstypescriptnext.jsfrontend

react-native-track-player failing to play song requested from Express server

I set up an expressjs server with a 'songs' route that serves .mp3 files. Here is the code for the Songs Route: import express from "express" const path = require("path") const router = express.Router() ... router.get(" ...

javascriptnode.jsreact-nativeexpressreact-native-track-player

Continuously verify if there are any active child elements

I am dealing with a recursive list of items in Angular/TypeScript. My goal is to only show items when they are either active=true; themselves or if any of their children or grandchildren are also active=true. data.json [ { "active": ...

typescript

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

javascripthtmlasp.netajax

How can I integrate NIB into a project created with WebStorm 8 using node.js, Express, Jade, and Stylus?

Starting off with node.js, Express, Jade, Styl and NIB in WebStorm 8 has been a bit of a challenge. Unfortunately, WebStorm does not natively support NIB, so I have been looking into how to manually add it. Here is the sample app.js generated by WebStorm: ...

javascriptnode.jsexpresswebstormstylus

What steps can I take to ensure that WebStorm properly recognizes a package's functions?

No matter what I do, WebStorm refuses to stop throwing inspection warnings when I try to use the JOI package in my node.js project. The code runs fine and there are no runtime errors, but the warning persists. I have updated the package, explicitly install ...

javascriptnode.jswebstormjoi

Guide on creating dynamic datasets and multiple dynamic yAxes

To enhance my chart, I am interested in adding multiple Y Axes based on the examples provided below: script 1 script 2 Although I attempted to modify the code as shown below, it seems to not be functioning properly. function rdnum() { return Math.flo ...

javascriptdynamicdatasetchart.js

Ways to implement the tabIndex attribute in JSX

As per the guidelines provided in the react documentation, this code snippet is expected to function properly. <div tabIndex="0"></div> However, upon testing it myself, I encountered an issue where the input was not working as intended and ...

javascripthtmlreactjsjsxtabindex