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.

Published by coreyroth

Corey Roth is the Vice President of Engineering at UnlimitedViz where he helps build the tyGraph product line for data analytics in Microsoft 365. Corey is an eleven-time recipient of the Microsoft MVP award in Office Apps and Services. Corey helps ISVs develop mobile-first applications for Office 365 using technologies such as Ionic Framework and Azure. Corey has always focused on rapid adoption of new Microsoft technologies including Office 365 and Azure. In his spare time, Corey works with his wife, Jennifer, on their product BrewZap, a mobile app platform for breweries.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: