The error message "TypeError: Unable to access the 'getFullWidth' property of an undefined value when using TSLint and TypeScript" was

I have been using Dan Wahlin's tutorials and online examples to set up Gulp and Typescript, but I am facing an issue with the tslint() function. The problem occurs in my code as follows:

node_modules\tslint\lib\language\walker\ruleWalker.js:18
    this.limit = this.sourceFile.getFullWidth();
                                ^

TypeError: Cannot read property 'getFullWidth' of undefined
at EnableDisableRulesWalker.RuleWalker [as constructor] (C:\Users\sscott\Development\OntarioDarts.com\node_modules\tslint\lib\language\walker\ruleWalker.js:18:37)
at EnableDisableRulesWalker.SkippableTokenAwareRuleWalker [as constructor] (C:\Users\sscott\Development\OntarioDarts.com\node_modules\tslint\lib\language\walker\skippableTokenAwareRuleWalker.js:11:16)
at new EnableDisableRulesWalker (C:\Users\sscott\Development\OntarioDarts.com\node_modules\tslint\lib\enableDisableRules.js:13:16)
at Linter.lint (C:\Users\sscott\Development\OntarioDarts.com\node_modules\tslint\lib\tslint.js:16:27)
at C:\Users\sscott\Development\OntarioDarts.com\node_modules\gulp-tslint\index.js:96:34
at respond (C:\Users\sscott\Development\OntarioDarts.com\node_modules\rcloader\index.js:73:7)
at respond (C:\Users\sscott\Development\OntarioDarts.com\node_modules\rcfinder\index.js:140:7)
at next (C:\Users\sscott\Development\OntarioDarts.com\node_modules\rcfinder\index.js:164:16)
at nextTickCallbackWith0Args (node.js:433:9)
at process._tickCallback (node.js:362:13)

I am currently working on Windows 10 and have installed typescript, tslint, gulp-typescript, and gulp-tslint.

Version Information:

├─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afc8dac3df82dbd6dfcadcccddc6dfdbef9d819e9f819f">[email protected]</a>
│ └── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0e030a1f091908130a0e3a4b544d5449">[email protected]</a>
├─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b0a2bba7faa2b0bbbeb1ae97e6f9e2f9e6">[email protected]</a>
│ └─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="394c5e55505f4014534a790b170f1709">[email protected]</a>
│   └─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1861796a7f6b582b3629283628">[email protected]</a>
│     └─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4847425e426b19051a051b">[email protected]</a>
│       └── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9aeb6abbdaeabb8a999e9f7e9f7eb">[email protected]</a>
├─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f6f1eeebecf6c2b1acb0acb3">[email protected]</a>
│ └─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7817080c1115110b0c3848564e5649">[email protected]</a>
│   └── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="463129342231342736067668766875">[email protected]</a>
└── <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7838e87928494859e8783b7c6d9c0d9c2">[email protected]</a>

Gulp Task:

module.exports = function (gulp, PlugIns, Settings) {
    return function () {
        gulp.src([Settings.SourceFiles.TypeScript])
            .pipe(PlugIns.plumber())
            .pipe(PlugIns.debug())
            .pipe(PlugIns.typescript())

            .pipe(PlugIns.tslint( {
                configuration: {
                    rules: {
                        "class-name": true,
                        "comment-format": [
                            true,
                            "check-space",
                            "check-uppercase"
                        ],
                        "curly": true,
                        "eofline": true,
                        "indent": [
                            true,
                            "tabs"
                        ],
                        "jsdoc-format": true,
                        "max-line-length": 100,
                        "no-unreachable": true,
                        "no-unused-expression": true,
                        "no-unused-variable": true,
                        "no-use-before-declare": true,

                        "one-line": [
                            true,
                            "check-open-brace",
                            "check-catch",
                            "check-else",
                            "check-whitespace"
                        ],
                        "quotemark": [
                            true,
                            "single",
                            "avoid-escape"
                        ],
                        "semicolon": true,
                        "switch-default": true,

                        "variable-name": [
                            true,
                            "allow-trailing-underscore",
                            "ban-keywords"
                        ],
                        "whitespace": [
                            true,
                            "check-branch",
                            "check-decl",
                            "check-operator",
                            "check-separator",
                            "check-type"
                        ]
                    }
                }
            }))
            .pipe(PlugIns.tslint.report("stylish"))
            .pipe(gulp.dest(Settings.Destination.TSCompiled))
        ;
    }
};
typescriptgulptslint

Answer №1

This issue commonly arises when TSLint is instructed to process a file that does not have a .ts or .tsx extension. It's important to double-check that you are not inadvertently including any .js files or other unsupported file types. While there may be plans for compatibility with .js files in the future, currently they are not supported.

Furthermore, I suggest running TSLint from the command line using the same settings on multiple files to see if the problem persists. If TSLint continues to malfunction in this scenario, it could be indicative of a bug within TSLint itself.

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 is the best way to update the image source in Angular 2?

Learn How to Get a Directive's Reference in Angular 2 Looking to swap image src on hover? Check out this helpful link for guidance:-- ...

angulartypescript

Error message: When using Vue CLI in conjunction with Axios, a TypeError occurs stating that XX

I recently started working with Vue.js and wanted to set up a Vue CLI project with Axios for handling HTTP requests. I came across this helpful guide which provided a good starting point, especially since I plan on creating a large project that can be reus ...

typescriptrestvue.jsnpmaxios

The specified property cannot be found on the object type in a Svelte application when using TypeScript

I am attempting to transfer objects from an array to components. I have followed this approach: https://i.stack.imgur.com/HHI2U.png However, it is indicating that the property titledoes not exist in this type. See here: https://i.stack.imgur.com/VZIIg.pn ...

typescriptsvelte

Working with an arbitrary number of arguments in TypeScript

Looking for a way to pass an arbitrary number of arguments with different types into a function and utilize those types, similar to the following: function f<A>(a: A): A; function f<A, B>(a: A, b: B): A & B; function f<A, B, C>(a: A, ...

typescript

React - A high-capacity file selector component designed to efficiently handle large numbers of files being selected

I am in search of a component that can retrieve a list of files from the user without actually uploading them. The upload functionality is already in place; I simply require a list of selected files. The component must meet the following criteria: Restric ...

reactjstypescriptfileupload

What is the most effective method for sharing a form across various components in Angular 5?

I have a primary form within a service named "MainService" (the actual form is much lengthier). Here is an overview- export class MainService { this.mainForm = this.formBuilder.group({ A: ['', Validators.required], B: & ...

javascriptangularperformancetypescriptangular-reactive-forms

What's the best way to group rows in an angular mat-table?

I am working on a detailed mat-table with expanded rows and trying to group the rows based on Execution Date. While looking at this Stackblitz example where the data is grouped alphabetically, I am struggling to understand where to place the group header c ...

javascripthtmlangulartypescriptangular-material

Tips for troubleshooting the error message: "The relative import path "$fresh/dev.ts" is not prefaced with / or ./ or ../"

My editor is showing a TypeScript error for a Deno module I am working on. The import path "$fresh/dev.ts" should be prefixed with / or ./ or ../ I have an import_map.json file set up with the following content. { "imports": { "$fre ...

typescriptdeno

utilize console.log within the <ErrorMessage> element

Typically, this is the way the <ErrorMessage> tag from Formik is utilized: <ErrorMessage name="email" render={(msg) => ( <Text style={styles.errorText}> ...

javascriptreactjstypescriptreact-nativeformik

How can I silence the warnings about "defaultProps will be removed"?

I currently have a next.js codebase that is experiencing various bugs that require attention. The console is currently displaying the following warnings: Warning: ArrowLeftInline: Support for defaultProps will be removed from function components in a futur ...

javascriptreactjstypescriptsvgnext.js

Issues with Angular2 causing function to not run as expected

After clicking a button to trigger createPlaylist(), the function fails to execute asd(). I attempted combining everything into one function, but still encountered the same issue. The console.log(resp) statement never logs anything. What could be causing ...

javascriptangulartypescriptwebfrontend

Executing MongoDB collection operations with array filtering

I am looking to count records based on tags and filter them before including in specific groups // data in database {tags: ['video', 'Alex'], ... }, {tags: ['video', 'John'], ... }, {tags: ['video', 'J ...

javascriptnode.jsmongodbtypescript

Is it possible to modify a portion of the zod schema object according to the value of a

My form consists of several fields and a switch component that toggles the visibility of certain parts of the form, as shown below: <Field name="field1" value={value1} /> <Field name="field2" value={value2} /> &l ...

javascriptreactjstypescriptvalidationzod

Is it possible to determine when a component has completed its rendering process in Angular?

I am currently working on an Angular application where I have a page component that contains several subcomponents. Each subcomponent is set up to fetch data from an API in the ngOnInit method, causing a layout shift issue as they load at different speeds ...

angulartypescript

Leverage the power of TypeScript by enabling the noImplicitAny flag when working

Currently, I am looking to activate the noImplicitAny flag in my compiler. My main issue lies with utilizing lodash/fp as there are no typings available at this moment. Due to this, the compiler is generating errors due to the absence of a definition file ...

javascripttypescripttypescript-typings

What is the best way to generate an object in TypeScript with a variety of fields as well as specific fields and methods?

In JavaScript, I can achieve this using the following code: var obj = { get(k) { return this[k] || ''; }, set(k, v) { this[k] = v; return this; } }; obj.set('a', 'A'); obj.get('a'); // returns &ap ...

typescript

Implementing NgRx state management to track and synchronize array updates

If you have multiple objects to add in ngrx state, how can you ensure they are all captured and kept in sync? For example, what if one user is associated with more than one task? Currently, when all tasks are returned, the store is updated twice. However, ...

javascriptangulartypescriptgoogle-cloud-firestorengrx

Is it possible for Typescript to resolve a json file?

Is it possible to import a JSON file without specifying the extension in typescript? For instance, if I have a file named file.json, and this is my TypeScript code: import jsonData from './file'. However, I am encountering an error: [ts] Cannot ...

javascripttypescriptwebpack

What is the reason for the function to return 'undefined' when the variable already holds the accurate result?

I have created a function that aims to calculate the digital root of a given number. Despite my efforts, I am encountering an issue where this function consistently returns undefined, even though the variable does hold the correct result. Can you help me ...

javascripttypescript

Tips for ensuring that the code inside a subscribe block completes before moving on to the next iteration within a forEach loop in Angular

Within the code snippet below, there exists a for loop where an API call is made. The intention is to have the 1st API call complete and execute all the subscribed code before moving on to the next iteration of the loop, triggering another API call. Curre ...

angulartypescriptobservableangular-promiseangular-observable