Cannot find module '@microsoft/sp-application-base' or its corresponding type declarations

Question

I am working on spfx webpart and getting below error when trying to run my solution

Cannot find module '@microsoft/sp-application-base' or its corresponding type declarations

then i tried installing npm i @microsoft/sp-application-base

but now its give error in installing

npm WARN deprecated @types/[email protected]: This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.
npm ERR! Invalid dependency type requested: alias

npm ERR! A complete log of this run can be found in:

can anyone please help

Answer 1

That package is used when building SharePoint Framework Application Customizer extensions, not web parts. Is there a reason you are trying to use it?

These are the standard imports for a web part project. Note that they do not include @microsoft/sp-application-base.

import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { IReadonlyTheme } from '@microsoft/sp-component-base';
import { escape } from '@microsoft/sp-lodash-subset';

And this is what the package.json should look like when a web part project is created. Note that @microsoft/sp-application-base is not included.

{
  "name": "hello-world",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "tslib": "2.3.1",
    "@microsoft/sp-core-library": "1.15.2",
    "@microsoft/sp-property-pane": "1.15.2",
    "@microsoft/sp-webpart-base": "1.15.2",
    "@microsoft/sp-lodash-subset": "1.15.2",
    "@microsoft/sp-office-ui-fabric-core": "1.15.2"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
    "@rushstack/eslint-config": "2.5.1",
    "@microsoft/eslint-plugin-spfx": "1.15.2",
    "@microsoft/eslint-config-spfx": "1.15.2",
    "@microsoft/sp-build-web": "1.15.2",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "gulp": "4.0.2",
    "typescript": "4.5.5",
    "@microsoft/sp-module-interfaces": "1.15.2"
  }
}

These are the standard imports for an application customizer extension project. Note that they include @microsoft/sp-application-base.

import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';

And this is what the package.json should look like when an application customizer extension project is created. Note that @microsoft/sp-application-base is included.

{
  "name": "hello-world-extension",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "tslib": "2.3.1",
    "@microsoft/sp-core-library": "1.15.2",
    "@microsoft/decorators": "1.15.2",
    "@microsoft/sp-dialog": "1.15.2",
    "@microsoft/sp-application-base": "1.15.2"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
    "@rushstack/eslint-config": "2.5.1",
    "@microsoft/eslint-plugin-spfx": "1.15.2",
    "@microsoft/eslint-config-spfx": "1.15.2",
    "@microsoft/sp-build-web": "1.15.2",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "gulp": "4.0.2",
    "typescript": "4.5.5",
    "@microsoft/sp-module-interfaces": "1.15.2"
  }
}