Issues regarding ambient getters and setters

Recently, I encountered an issue with my open-source library called Firemodel. The library utilizes ES classes and getters/setters within those classes. Everything was working smoothly until my VueJS frontend code started flagging every instance of these getters/setters as errors.

Here's a glimpse of how the error appears:

https://i.stack.imgur.com/Zs8Xn.png

Upon inspecting the d.ts file in vs-code, the error is clearly highlighted. However, when I checked the same transpiled file from the Firemodel repository using vs-code, no error was detected.

Interestingly, when I transpile using tsc with Firemodel, no errors are reported. Even a consumer of Firemodel that also uses tsc for transpilation does not encounter any issues with Firemodel's generated *.d.ts files. On the other hand, the VueJS project, which relies on the default settings of Vue CLI, fails to build due to these errors as it uses Babel for transpilation.

This situation has led me to suspect that Babel might be the root cause, but I'm uncertain. Has anyone else faced this issue before? Any thoughts or suggestions?

typescriptvue.jsbabeljs

Answer №1

The issue seems to have been resolved by updating the local version of Typescript in the VueJS app to 3.7.x. Previously, it was on version 3.5.x, which is the default for new projects created using vue create ... and selecting the Typescript option.

It is worth noting that while this solution worked for me in multiple projects, I am still unsure as to the exact reason why it works. Could Babel be detecting the change and behaving differently? Or perhaps the VueJS build system is making adjustments?

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

Tips for adding styling to HTML in Vue by entering CSS code into the CodeMirror editor

Is there a way to style HTML by entering CSS code into the Codemirror editor? For instance, if we have the HTML code <head> </head>, how can I apply the CSS code, head{ color : red }, typed in the Codemirror editor to stylize this HTML code? mo ...

javascriptvue.js

The Google Chrome console is failing to display the accurate line numbers for JavaScript errors

Currently, I find myself grappling with debugging in an angular project built with ionic framework. Utilizing ion-router-outlet, I attempt to troubleshoot using the Google Chrome console. Unfortunately, the console is displaying inaccurate line numbers mak ...

javascriptangulartypescriptgoogle-chromeionic-framework

Exploring the capabilities of using Next.js with grpc-node

I am currently utilizing gRPC in my project, but I am encountering an issue when trying to initialize the service within a Next.js application. Objective: I aim to create the client service once in the application and utilize it in getServerSideProps (wit ...

javascripttypescriptnext.jsgrpcgrpc-node

Having trouble injecting ActivatedRouteSnapshot into the component

Struggling to inject ActivatedRouteSnapshot into a component, encountering errors when trying to access query params. Here is the error stack trace: "Error: Can't resolve all parameters for ActivatedRouteSnapshot: (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?). a ...

angulartypescriptangular2-routing

Is there a way to merge two observables into one observable when returning them?

I'm struggling with getting a function to properly return. There's a condition where I want it to return an Observable, and another condition where I'd like it to return the combined results of two observables. Here is an example. getSearc ...

typescriptrxjs

"What is the best way to determine the data type of an object retrieved from an API in TypeScript

Hey there, I'm currently developing a web application using Angular 2 and I'm focusing on implementing an exception handling mechanism. To achieve this, I've created a model that mirrors the object structure I will receive from the server (E ...

typescriptexception

Error: The @use directive must come before any other rules in Angular

Error message: Issue: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error Details: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) ...

cssangulartypescriptsass

Building upon the foundation: Extending a base component in Angular

I have a Base Component that is extended by its children in Angular. However, when creating a new Component using angular-cli, it generates html and css files that I do not need for the base component. Is there a way to create a Base Component without inc ...

angulartypescript

What is the best way to incorporate the parallax effect into a v-carousel?

Currently, I have a "v-carousel" containing multiple images and now I am looking to incorporate a parallax effect into it, similar to "v-parallax". <v-carousel cycle height="600" hide-delimiter-background show-arrows-on-hover> <v-carousel-i ...

cssvue.jsvuetify.js

The type 'function that takes in a CustomEvent and returns void' cannot be assigned to a parameter of type 'EventListenerOrEventListenerObject'

When I upgraded from TypeScript version 2.5.3 to 2.6.1, my custom event setup started giving me an error. window.addEventListener('OnRewards', (e: CustomEvent) => { // my code here }) [ts] Argument of type '(e: CustomEvent) => vo ...

javascripttypescript

Navigating to a different page in Ionic 2 upon app initialization

Is there a way to automatically redirect the page to the home page instead of displaying the login page if there is already a token stored in localStorage? I currently have the following code in the constructor() of app.component.ts, but it still display ...

angulartypescriptionic2

Why is it possible to import the Vue.js source directly, but not the module itself?

The subsequent HTML code <!DOCTYPE html> <html lang="en"> <body> Greeting shown below: <div id="time"> {{greetings}} </div> <script src='bundle.js'></script& ...

javascriptwebpackvue.jswebpack-2

Issue with React Context: The type 'Dispatch<SetStateAction<GiftsType>>' cannot be assigned to type '(arr1: string[], arr2: string[]) => void'

I'm currently working on a project in React+TS where I need to create a context that takes two string arrays and updates an object's state with these arrays. I keep encountering a title typo error in the setChoices function inside the return stat ...

reactjstypescripttypescript-typingsreact-context

VueJs encountered a fatal error when trying to promote young objects in the MarkCompactCollector, resulting in a failed allocation due to the JavaScript heap running

When I try to run the build command (npm run build) for my VueJs project, I encounter an error. package.json { "name": "acme-web", "version": "0.1.0", "private": true, "scripts": { ...

vue.jsnpmwebpacknpm-build

I am looking for a way to write a function that will emit an event to the parent component when an icon is

I am creating an input element with an icon to show/hide the password. How can I emit an event in the v-icon to notify the parent component when the icon is clicked? Here is my child component BaseInputPassword: <div class="label"> ...

vue.jsvuetify.js

Setting up lint-staged for Vue projects: A step-by-step guide

After setting up a new Vue3 app using the Vue CLI and configuring Prettier as my linter, I decided to implement commitlint, husky, and lint-staged for validating commit messages and linting the code before pushing it. My Approach Following the instructio ...

javascriptvue.jseslintprettierlint-staged

Vue: JSON input ended abruptly while parsing near "...version":"0.5.0","dev"

Currently, I am diving into learning Vue JS with the intention of developing applications using it. To begin with, I went ahead and installed Vue by running the command: npm install vue-cli -g However, a close friend brought to my attention that this met ...

vue.jsnpm

React Native component that enables users to both input their own text and select options from a dropdown menu as they type

Looking to develop a component that combines Text Input and FlatList to capture user input from both manual entry and a dropdown list. Has anyone successfully created a similar setup? I'm facing challenges in making it happen. Here's the scenari ...

typescriptreact-nativeuse-statereact-native-flatlistreact-native-textinput

There was an issue converting the value {null} to the data type 'System.Int32', resulting in a 400 error

Attempting to make a POST request with some missing data is causing errors in my angular form. Here is the payload I am using: DeviceDetail{ deviceId:'332', sideId: null, deviceName:'test' } Unfortunately, I encountered a 400 bad re ...

javascriptjsonangulartypescriptnull

esBuild failing to generate typescript declaration files while running in watch mode

Recently dove into using edBuild and I have to say, it's been a breeze to get up and running - simple, fast, and easy. When I execute my esBuild build command WITHOUT WATCH, I can see that the type files (.d.ts) are successfully generated. However, ...

node.jstypescriptnpmtscesbuild