When a variable is brought into another JS file in Vite, it undergoes a transformation and

Currently, I am working on a vanilla JavaScript project using Vite and I have encountered an issue that I need help with:

In my app.js file, I am initializing a variable using the let command and exporting it as follows:

let activePoint = null;
export { activePoint };

Next, in another JS file called tool.js, I am importing this variable like so:

import { activePoint } from '../js/app.js'

The problem arises when I attempt to modify this variable (e.g. activePoint=4;) within the tool.js file. I receive the error message 

Uncaught TypeError: Assignment to constant variable.

I have experimented with both let and var, but the outcome remains the same. I also tried combining the initialization and export into one line versus two, yet the behavior does not change. Could there be a Vite-specific behavior that is causing my variables to act like constants?

javascriptvite

Answer №1

As stated on MDN:

The import declaration statically imports read-only live bindings exported by another module. These imported bindings are referred to as live bindings because they are updated by the exporting module but cannot be reassigned by the importing module.

If you need to work with mutable data, you can export an object. The reference to the object will remain immutable, but you can modify its properties. For example:

export const obj = {activePoint: null}

In your tool.js file:

import {obj} from '../js/app.js';
obj.activePoint = 4;

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

Associating fixed UI element interactions with Backbone's View component

I'm looking to add a click event to a button without relying on using a template. Creating the HTML <div id="transfer"> <input type="text" placeholder="From Address" id="fromAddress" /> <input type="text" pla ...

javascriptbackbone.js

Is this loader going through a triple loop?

<style> .loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-repeat: no-repeat; background: url('images/page-loader.gif'); } </style> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascripthtmlcsstwitter-bootstrap-3

Using a JavaScript code to integrate data input and dropdown menu selections

I am currently working on a data input section on my website. Users will need to enter their name in a text field and then select either "Yes" or "No" from a dropdown menu. Once they click on the 'Generate' button, all the information along with ...

javascriptjqueryhtml

Press the button to dynamically update the CSS using PHP and AJAX

I have been facing challenges with Ajax, so I decided to switch to using plain JavaScript instead. My goal is to create a button on a banner that will allow me to toggle between two pre-existing CSS files to change the style of the page. I already have a f ...

javascriptajaxwordpresspost

What is the best way to set a boolean value for a checkbox in a React project with Typescript?

Currently, I am working on a project involving a to-do list and I am facing an issue with assigning a boolean value to my checkbox. After array mapping my to-dos, the checkbox object displays 'on' when it is unchecked and a 'Synthetic Base E ...

javascriptreactjstypescriptcheckboxboolean

Steps to generate a nested list with heading tag elements in the exact order as in the DOM structure

My HTML document is full of h1, h2, h3, h4 tags with nesting. Let's take a look at an example. <h2>About cars</h2> <p>Information about cats</p> <h2>About bikes</h2> <p>Information about bikes</p> ...

javascripthtml

The problem with Vue JS static links

I'm currently working with a Vue.js application (v2). I've noticed that if I skip visiting the root of the site, the sub-links do not work properly. For example: Visit: Then go to If I directly visit: I encounter the following error messag ...

javascriptroutesvue.jsvuejs2

Getting the percentage of code coverage in Selenium tests in relation to the web application code

I need to track the code coverage of my selenium tests in relation to the source code of the server (web application source code) that they cover. For instance, I want the tests for the login feature to measure how much of the web application's code ...

javajavascriptseleniumcode-coveragejacoco

Pulling data from a MySQL database using AJAX and PHP to convert it into a JavaScript variable, resulting in

I am attempting to retrieve MySQL data using PHP, convert it to JSON, and then pass it into my JS variables for Chart.js. The JSON generated by PHP appears correct. However, when trying to access the data within my variables, the console is displaying them ...

javascriptphpmysqljsonajax

Trouble with jQuery delay in updating the CSS attribute while using fadeIn

After writing a simple JQuery code, I noticed that every time I click on 'eat', the animation lags. Is there any way to preload this animation for smoother performance? The #custom_menu element is a full-page section with a fixed position (simil ...

javascriptjquerycss

Having trouble parsing the JSON response, even though it's not empty it still comes back as undefined

My current dilemma involves using JSON codes to send a post request, retrieve data, and then parse it (see example below). $.ajax({ url: '/test', type: 'post', data: { id : "1"}, dataType: 'json', ...

javascriptjqueryjson

Error code 12004 encountered during the execution of a service request

While working on a service call in my JavaScript code that retrieves XML data using XMLHttpRequest, everything runs smoothly in Chrome and Firefox, successfully fetching the data over HTTPS. However, when attempting to execute the same code in IE11, it ret ...

javascriptajaxxmlhttprequestinternet-explorer-11

Tips for determining the height of the entire webpage using jQuery

I attempted the following code: $(window).height(); $("#content").height(); However, it did not provide an accurate value. ...

javascriptjqueryhtml

Determine if checkboxes exist on a webpage using jQuery

I am facing a situation where a form is dynamically loaded via ajax. Depending on the parameters passed to retrieve the form, it may or may not contain checkboxes. I am looking for a way to verify the presence of checkboxes on the page and prompt the user ...

javascriptjqueryajaxcheckbox

Leveraging the power of jQuery and vanilla JavaScript to create a pop-up print window for a Div element within a CMS platform that does not support media query stylesheets

I have been grappling with this particular issue for weeks now, seeking guidance from previous inquiries here. Yet, despite the helpful hints, I am still struggling to find a viable solution. My website features a scrolling sidebar measuring approximately ...

javascriptjquerycss

jQuery AJAX Triggered Only Once in Callback Function

I am facing an issue with the jQuery get function within my updateMyApps. The function works fine when called directly after it is declared. It successfully loops through the data and appends elements to the DOM. However, when I submit the form #addapplic ...

javascriptjqueryajax

Absorbing a mistake within my observable while also supplying a saved value - ensuring the subscription remains active

I'm really struggling with error handling in my observable and it's starting to drive me crazy. Despite reading countless articles, I still can't seem to get the hang of it. Ideally, I want to handle errors within the service itself and fall ...

javascriptangularrxjs

What is the best way to retrieve the values of various input fields using their numbered IDs and then store them in a MySQL

I attempted to design a form that allows for multiple inserts, where users can add as many titles and languages as they desire by entering a number. The display of titles and languages is functioning correctly, but I am struggling to retrieve the individua ...

javascriptphpjquerymysqli

Ways to make the sole element you've designed fade into view

I have a function that creates a note in the DOM. The issue is that when the note is created, it adds the "fade in" animation class to all notes instead of just the one being created. How can I modify it so that only the newly created note will have the ...

javascripthtmlcss

Tips for setting default values for named parameters in JavaScript

In my TypeScript method, I am using named parameters like this public foo({x, y, z , m , n} : {x:string, y: number, z: number, m?:string, n?:number}) { } The parameters m and n will be provided from another object like const defaults = { m : 'M&apo ...

javascripttypescriptnamed-parameters