Failed to load plugin ‘@typescript-eslint/eslint-plugin’ declared in ‘.eslintrc.js with SPFx 1.15 and Azure DevOps Pipeline

With the transition to ESLint with SPFx 1.15, the migration has been challenging to say the least. While new ESLint rules have found some legitimate issues in my code, they have required me to touch almost every file in my projects. Recently, when I finished all of my changes and had everything building successfully locally, I went to push my code through my Azure DevOps pipeline. I was surprised to find the following error when it executed the gulp bundle task.

Error - [lint] Unexpected STDERR output from ESLint: 
Oops! Something went wrong! :(
ESLint: 8.7.0
Error: Failed to load plugin '@typescript-eslint/eslint-plugin' declared in '.eslintrc.js » @microsoft/eslint-config-spfx/lib/profiles/react » @rushstack/eslint-config/profile/web-app': Cannot find module 'typescript'
Require stack:
- /home/vsts/work/1/s/tyGraphPagesWebParts/node_modules/@typescript-eslint/eslint-plugin/dist/util/astUtils.js
- /home/vsts/work/1/s/tyGraphPagesWebParts/node_modules/@typescript-eslint/eslint-plugin/dist/util/index.js
- /home/vsts/work/1/s/tyGraphPagesWebParts/node_modules/@typescript-eslint/eslint-plugin/dist/rules/adjacent-overload-signatures.js
- /home/vsts/work/1/s/tyGraphPagesWebParts/node_modules/@typescript-eslint/eslint-plugin/dist/rules/index.js
- /home/vsts/work/1/s/tyGraphPagesWebParts/node_modules/@typescript-eslint/eslint-plugin/dist/index.js
- /home/vsts/work/1/s/tyGraphPagesWebParts/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (/home/vsts/work/1/s/tyGraphPagesWebParts/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/home/vsts/work/1/s/tyGraphPagesWebParts/node_modules/@typescript-eslint/eslint-plugin/dist/util/astUtils.js:27:25)
    at Module._compile (/home/vsts/work/1/s/tyGraphPagesWebParts/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)

I did a quick search on the Internet and didn’t find anything specific to SPFx just specific issues around Typescript in general. I didn’t encounter this error on the first project I upgraded but for some reason it’s here. I first tried to reproduce it locally. My DevOps environment uses a Linux build agent whereas I build locally on my Mac. I cleared my node_modules folder, deleted package-lock.json, and then ran npm install again. I still couldn’t produce it locally. The next difference I knew of were that my node versions weren’t exactly the same. Locally, I was on v14.18.1 and the build agent was using v14.20.0. I thought about making the switch to v16 on both but I haven’t pulled the trigger yet.

Reading the error message it was complaining about the typescript module not being present. SPFx projects typically don’t include it directly as a devDependency, but I tried including it anyway. I sifted through node_modules to find the project that was failing and I found the following TypeScript devDependency.

typescript": "~4.5.2"

I added it to my SPFx project and pushed it into Azure DevOps and sure enough it worked. I don’t know if this is the correct solution for this problem, but I thought I would share it as a work-around in case you run into the same.