Module not found: Error: Can't resolve 'webextension-polyfill'

Question

I am using typescript + vue 3 to develop a google chrome app. when I run the project, shows error like this:

ERROR in ./src/popup/components/Options.vue?vue&type=script&lang=ts (./node_modules/ts-loader/index.js??clonedRuleSet-1!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[8].use[0]!./src/popup/components/Options.vue?vue&type=script&lang=ts) 2:0-44
Module not found: Error: Can't resolve 'webextension-polyfill' in '/Users/xiaoqiangjiang/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup/components'
 @ ./src/popup/components/Options.vue?vue&type=script&lang=ts 1:0-199 1:0-199 1:200-388 1:200-388
 @ ./src/popup/components/Options.vue 2:0-58 3:0-53 3:0-53 8:49-55
 @ ./node_modules/ts-loader/index.js??clonedRuleSet-1!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[8].use[0]!./src/popup/App.vue?vue&type=script&lang=ts 2:0-47 11:8-15
 @ ./src/popup/App.vue?vue&type=script&lang=ts 1:0-189 1:0-189 1:190-368 1:190-368
 @ ./src/popup/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
 @ ./src/popup/index.ts 2:0-28 4:14-17

I check the package.json and found "@types/webextension-polyfill": "^0.8.2", was added. why still could not found the package? this is the full package.json :

{
  "name": "reddwaf-translate-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "rm -rf src/bundle && webpack --mode development --config src/resource/config/webpack.dev.config.js",
    "build": "gulp --cwd . --gulpfile build/gulp-build.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jiangxiaoqiang/reddwaf-translate-plugin.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin/issues"
  },
  "homepage": "https://github.com/jiangxiaoqiang/reddwaf-translate-plugin#readme",
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "@vue/compiler-sfc": "^3.2.29",
    "babel-loader": "^8.2.3",
    "copy-webpack-plugin": "^10.2.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.5.3",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.5",
    "vue-loader": "^17.0.0",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@types/chrome": "^0.0.177",
    "@types/webextension-polyfill": "^0.8.2",
    "vue": "^3.2.29",
    "vuex": "^4.0.2"
  }
}