Forum Discussion

gerald4's avatar
gerald4
Copper Contributor
Mar 26, 2022

TSLint is not supported for rush-stack-compiler-4.X packages.

Please I need help. I started using pnpjs library v3, but every time i try to gulp build or gulp serve my project. I had also upgraded my rush stack compiler from version 3 to 4.

I get this error: Error - [tslint] Error: TSLint is not supported for rush-stack-compiler-4.X packages.
[20:42:55] Error - 'tslint' sub task errored after 111 ms
TSLint is not supported for rush-stack-compiler-4.X packages.

how do i fix the ts lint issue

 

 

developer
PnP
  • Srinivas Narula's avatar
    Srinivas Narula
    Brass Contributor
    Mar 29, 2022

    gerald4  - For now, I'm following trick

     

    TypeScript 4+ doesn't support tslint (tslint is deprecated). Thus you should disable the tslint task in your gulpfile.js:

     

    build.tslintCmd.enabled = false;

     

     

    • BristolNET's avatar
      BristolNET
      Copper Contributor
      Nov 10, 2022
      This did not work for. I have rush-stack-compiler-4.5 installed, added that line disabling tslint, and I still receive the error. Is there another fix? Thank you
      • avhill's avatar
        avhill
        Copper Contributor
        Dec 13, 2022

        BristolNET I had the same problem and simply deleted the tslint file from my solution.  Solved it straight away.

  • NicolasKheirallah's avatar
    NicolasKheirallah
    MVP
    Dec 13, 2022

    gerald4 

    You need to delete the TSlint file 🙂

    TSconfig should look like this:

     

     

    {
  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "inlineSources": false,
    "strictNullChecks": false,
    "noUnusedLocals": false,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection",
      "es2015.promise"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}

     

     

     

    And gulpfile.js should look like this:

     

     

    'use strict';

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
      generatedConfiguration.externals.splice(generatedConfiguration.externals.indexOf('react'), 1);
      generatedConfiguration.externals.splice(generatedConfiguration.externals.indexOf('react-dom'), 1);
      return generatedConfiguration;
  }
});

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);
  result.set('serve', result.get('serve-deprecated'));

  return result;
};

build.initialize(require('gulp'));

     

     

     

     

    Did a blogpost on this for myself so I can keep track on the steps I need to go through as I need to do this here and there:

    Link if anyone's interested 🙂 

     https://yourmodernworkplace.com/blog/How-To-Upgrade-A-Old-SPFX-Project-To-Latest-One

Resources