spfx-fast-serve: no-unused-vars - Lots of errors!

I’ve just integrated fast serve onto an existing project that’s recently been upgraded to SPFX 1.12.1.

Pretty much every single TS file is reporting all of the imported symbols as being unused, even though they are.

e.g.

no-unused-vars: 'WebPartContext' is defined but never used.
     7 | import AadClientConstants from "./AadClientConstants";
  >  8 | import { WebPartContext } from "@microsoft/sp-webpart-base";

It’s also causing the debugged pages to bail out with the full screen errors:

Failed to compile.

src/components/XXXXXXX/XXXXXX.tsx:1:10
no-unused-vars: 'TextField' is defined but never used.
  > 1 | import { TextField } from '@fluentui/react';
      |          ^^^^^^^^^
    2 | import * as React from 'react';
    3 | import * as CSS from 'csstype';
    4 |

Version info:

jim@NG-WKS-004:~/git/xxxxxxxx$ npm list spfx-fast-serve-helpers
xxxxxxxxx@1.0.0 /home/jim/git/xxxxxxxxx
└── spfx-fast-serve-helpers@1.12.9

jim@NG-WKS-004:~/git/xxxxxxxxx$ npm list typescript
xxxxxxxxx@1.0.0 /home/jim/git/xxxxxxxxx
├─┬ @microsoft/rush-stack-compiler-3.7@0.2.3
│ ├─┬ @microsoft/api-extractor@7.7.8
│ │ └── typescript@3.7.7 deduped
│ └── typescript@3.7.7
└─┬ spfx-fast-serve-helpers@1.12.9
  └─┬ ts-loader@8.1.0
    └── typescript@3.3.4000

Interestingly, when I run it, it uses TS 3.7.7 during the SPFX parts of the build, but then ts-loader is trying to use 3.3 which throws an error, not sure if this is related.

[10:46:18] ==================[ Finished ]==================
[10:46:19] Project xxxxxxxxx version:1.0.0
[10:46:19] Build tools version:3.17.11
[10:46:19] Node version:v12.13.0
[10:46:19] Total duration:18 s
ℹ ｢wds｣: Project is running at https://localhost:4321/
ℹ ｢wds｣: webpack output is served from https://localhost:4321/dist/
ℹ ｢wds｣: Content not from webpack is served from /home/jim/git/xxxxxxxxx
ℹ ｢wds｣: 404s will fallback to /index.html
ts-loader: Using typescript@3.3.4000. This version is incompatible with ts-loader. Please upgrade to the latest version of TypeScript.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (8 by maintainers)

Most upvoted comments

You can just uninstall @typescript-eslint/parser dependency and that should fix the issue. I verified the basic setup with eslint and it works without problems. Thus it looks like it’s specific to your project, maybe something is missing in the eslint setup. If it works without eslint, then I’ll close the issue as resolved. Feel free to reopen or create a new one in case of any further problems.

s-KaiNet on May 25, 2021

Could you just remove node_modules, package-lock.json and reinstall the deps. It should resolve the issue with This version is incompatible with ts-loader..... I’m not sure whether it will help with eslint, but we can try.

s-KaiNet on May 25, 2021

eslintrc:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

tsconfig:

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/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"
  ]
}

jimmywim on May 25, 2021

{
  "name": "XXXXXXXXX",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test",
    "dev": "gulp serve --nobrowser",
    "package": "gulp clean && gulp bundle --ship && gulp package-solution --ship",
    "serve": "gulp bundle --custom-serve --max_old_space_size=4096 && fast-serve"
  },
  "dependencies": {
    "@fluentui/react": "^7.160.1",
    "@microsoft/sp-core-library": "1.12.1",
    "@microsoft/sp-lodash-subset": "1.12.1",
    "@microsoft/sp-property-pane": "1.12.1",
    "@microsoft/sp-webpart-base": "1.12.1",
    "@pnp/sp": "^2.1.0",
    "@pnp/spfx-controls-react": "3.1.0",
    "@pnp/spfx-property-controls": "3.1.0",
    "@types/luxon": "^1.25.1",
    "@uifabric/file-type-icons": "^7.6.24",
    "@uifabric/fluent-theme": "^7.4.8",
    "luxon": "^1.25.0",
    "md5": "^2.3.0",
    "office-ui-fabric-react": "7.156.0",
    "react": "16.9.0",
    "react-dom": "16.9.0"
  },
  "resolutions": {
    "@types/react": "16.8.8"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.7": "0.2.3",
    "@microsoft/sp-build-web": "1.12.1",
    "@microsoft/sp-module-interfaces": "1.12.1",
    "@microsoft/sp-tslint-rules": "1.12.1",
    "@microsoft/sp-webpart-workbench": "1.12.1",
    "@types/react": "16.9.36",
    "@types/react-dom": "16.9.8",
    "@types/webpack-env": "1.13.1",
    "@typescript-eslint/eslint-plugin": "^2.5.0",
    "@typescript-eslint/parser": "^2.5.0",
    "ajv": "~5.2.2",
    "eslint": "^6.5.1",
    "eslint-plugin-react": "^7.22.0",
    "gulp": "4.0.2",
    "spfx-fast-serve-helpers": "~1.12.0",
    "webpack-bundle-analyzer": "^3.9.0"
  }
}

jimmywim on May 25, 2021