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 do you do when schema.parseAsync cannot be found?

Currently facing an issue with zod validation in my Node.js environment, specifically encountering the error: TypeError: schema.parseAsync is not a function Despite attempting various solutions like re-importing and troubleshooting, I am unable to resol ...

javascripttypescriptvalidationzod

Leveraging Nextjs Link alongside MUI Link or MUI Button within a different functional component (varieties)

Currently in my development setup, I am utilizing Next.js (10.2) and Material-UI (MUI) with Typescript. In the process, I have implemented a custom Link component: Link.tsx (/components) [...] On top of that, I have created another iteration which functi ...

javascriptreactjstypescriptnext.js

What is the best way to create a T-shaped hitbox for an umbrella?

I've recently dived into learning Phaser 3.60, but I've hit a roadblock. I'm struggling to set up the hitbox for my raindrop and umbrella interaction. What I'd love to achieve is having raindrops fall from the top down and when they tou ...

typescriptphaser-frameworkphaserjs

Are union types strictly enforced?

Is it expected for this to not work as intended? class Animal { } class Person { } type MyUnion = Number | Person; var list: Array<MyUnion> = [ "aaa", 2, new Animal() ]; // Is this supposed to fail? var x: MyUnion = "jjj"; // Should this actually ...

typescripttypecheckingstatic-typingunion-types

transform JSON structure into an array

Is it possible to convert an interface class and JSON file into a list or array in order to work on it? For example, extracting the Racename from each object in the JSON file and storing it in a list/array. Here is the interface structure: interface IRunn ...

javascriptangularjsjsontypescript

Next.js does not support tooltips with custom children components

I created a unique Tooltip component and I'm attempting to include NextLink as the children. However, I encountered an error similar to the one below. Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Tooltip)`. Expected an e ...

reactjstypescriptmaterial-uinext.jsref

activeStyle is not a valid property for type 'IntrinsicAttributes'

I encountered an issue while attempting to utilize NavLink in a react typescript project. The error message states: "Property 'activeStyle' does not exist on type 'IntrinsicAttributes & NavLinkProps & RefAttributes'." import Rea ...

typescriptreact-router-dom

Testing in Jasmine: Verifying if ngModelChange triggers the function or not

While running unit tests for my Angular app, I encountered an issue with spying on a function that is called upon ngModelChange. I am testing the logic inside this function but my test fails to spy on whether it has been called or not! component.spec.js ...

javascriptangulartypescriptunit-testing

What is the process for setting the value of a TextField based on a Dropdown Selection?

I have a question regarding the code snippet below. I am wondering how to set the value of a specific TextField based on the selected item in a Dropdown component named ChildComponent. import * as React from "react"; import ChildComponent from './Ope ...

reactjstypescriptrenderingoffice-ui-fabrictsx

What causes interface to generate TS2345 error, while type does not?

In the code below: type FooType = { foo: string } function fooType(a: FooType & Partial<Record<string, string>>) { } function barType(a: FooType) { fooType(a) } interface FooInterface { foo: string } function fooInterface(a: FooInt ...

typescripttypes

The type 'MouseEvent<HTMLButtonElement, MouseEvent>' cannot be matched with the type 'boolean'

Just starting out with TS and running into a problem that TS is pointing out to me. Error: Type '(x: boolean) => void' is not compatible with type '(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void'. Parameters ' ...

reactjstypescriptnext.js

Is it true that TypeScript prohibits the presence of circular references under the condition of having generic parameters

I encountered an issue of type error in the given code snippet Type alias 'bar2' circularly references itself.ts(2456) type foo = { bars: bar[]; }; //works fine type bar = foo; type foo2<T extends Record<string, unknown> = Record< ...

typescript

Creating a custom event handler for form input changes using React hooks

A unique React hook was created specifically for managing form elements. This hook provides access to the current state of form fields and a factory for generating change handlers. While it works seamlessly with text inputs, there is a need to modify the c ...

javascriptreactjstypescript

What is the reason behind Rollup flagging code-splitting issues even though I am not implementing code-splitting?

In my rollup.config.js file, I have only one output entry defined as follows: export default { input: './src/Index.tsx', output: { dir: './myBundle/bundle', format: 'iife', sourcemap: true, }, plugins: [ ...

typescriptrollupiifecode-splitting

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

How can I center an image inside a view in the middle of the screen using position: "absolute"? The issue is that the view takes up 100% of the width and height of the screen, causing all components underneath it (such as input fields and buttons ...

javascriptcsstypescriptreact-nativeexpo

The existence of useRef.current is conditional upon its scope, and it may be null in certain

I'm currently working on drawing an image on a canvas using React and Fabric.js. Check out the demo here. In the provided demo, when you click the "Draw image" button, you may notice that the image is not immediately drawn on the canvas as expected. ...

javascriptreactjstypescriptcanvasfabricjs

What could be causing this error in a new Next.js application?

After multiple attempts, my frustration and disappointment in myself are causing a headache. Can someone please assist me? I am trying to create an app using the following command: npx create-next-app@latest --ts Immediately after running next dev, I enco ...

javascriptreactjstypescriptnext.js

Struggling to retrieve posted data using Angular with asp.net

I have encountered an issue while sending a post request from Angular to my ASP.NET server. I am trying to access the values of my custom model class (SchoolModel) and I can see that all the values are correct inside Angular. However, when I attempt to ret ...

c#asp.netangulartypescript

The attribute 'sandwiches' cannot be found within the data type 'string'

In my app, I require an object that can store strings or an array of strings with a string key. This object will serve as a dynamic configuration and the keys will be defined by the user, so I cannot specify types based on key names. That's why I&apos ...

javascripttypescript

Propagating numerical values through iterative iterations

I am currently facing an issue with passing values as props to a component using the forEach method in JavaScript. In addition to passing the existing values from an array, I also want to send another value that needs to be incremented by 1 for each iterat ...

javascriptreactjstypescript