Conflict with `webextension-polyfill-ts`

Describe the bug

After switch to Typescript by vue add typescript, I choose webextension-polyfill-ts as devDependencies, and use import { browser } from 'webextension-polyfill-ts' in background script. However, Now any browser function not work and this object IS undefined.

The background.ts may like this:

// background.ts
import { browser } from 'webextension-polyfill-ts'

browser.runtime.onMessage.addListener((msg, sender): Promise<any> => {
  console.log('BG page received message', msg, 'from', sender)
  return Promise.resolve()
})

I worked around and find https://github.com/adambullmer/vue-cli-plugin-browser-extension#browser-polyfills notes. After I follow those steps by edit vue.config.js, the browser object from webextension-polyfill-ts work again.

module.exports = {
   ....
  chainWebpack: (config) => {
    // adambullmer/vue-cli-plugin-browser-extension seems conflict with webextension-polyfill-ts
    // And browser object will be undefined
    // To support Typescript, Follow https://github.com/adambullmer/vue-cli-plugin-browser-extension#browser-polyfills to remove the webpack chain 'provide-webextension-polyfill'
    config.plugins.delete('provide-webextension-polyfill')
    config.module.rules.delete('provide-webextension-polyfill')
  }
}

Is there any idea to solve this bug? Since it is useful to develop in Typescript environment.

To Reproduce

Create The extension example by Using Kocal/vue-web-extension

vue create --preset kocal/vue-web-extension my-extension
cd my-extension
yarn install

Use Vue Cli to add Typescript support

vue add typescript

Add webextension-polyfill-ts as devDependencies

yarn add --dev webextension-polyfill-ts

Edit the backgroud.ts and any other options script

// background.ts
import { browser } from 'webextension-polyfill-ts'

browser.runtime.onMessage.addListener((msg, sender): Promise<any> => {
  console.log('BG page received message', msg, 'from', sender)
  return Promise.resolve()
})

When use browser.runtime.sendMessage , The error shows.
I have to remove the webpack chain 'provide-webextension-polyfill' as Describe to make it work agian.

Expected behavior

Maybe I don't need to remove the webpack chain 'provide-webextension-polyfill', but the 'webextension-polyfill-ts' worked fined.

Screenshots If applicable, add screenshots to help explain your problem.

Reproducible Example

None at this moment, I'm sorry.

Name	Version
vue-cli-plugin-browser-extension	0.25.1
Operating System	Windows 10 Version 2004
Node	v15.3.0
NPM/Yarn	1.22.5
vue-cli	@vue/cli 4.5.9
vue-cli-service	4.5.9
browser	Microsoft Edge 87.0.664.55

Additional context

package.json

{
  "name": "xxxxxxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service build --mode development --watch",
    "devtools": "vue-devtools",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^5.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-cli-plugin-browser-extension": "latest",
    "vue-template-compiler": "^2.6.11",
    "webextension-polyfill-ts": "^0.20.0"
  }
}

vue.config.js

module.exports = {
  pages: {
    options: {
      template: 'public/browser-extension.html',
      entry: './src/options/main.ts',
      title: 'Options'
    }
  },
  pluginOptions: {
    browserExtension: {
      componentOptions: {
        background: {
          entry: 'src/background.ts'
        },
        contentScripts: {
          entries: {
            'content-script': [
              'src/content-scripts/content-script.ts'
            ]
          }
        }
      },
      manifestTransformer: (manifest) => {
        if (process.env.NODE_ENV === 'development') {
          manifest.content_security_policy = "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"
        }

        return manifest
      }
    }
  },
  chainWebpack: (config) => {
    // adambullmer/vue-cli-plugin-browser-extension seems conflict with webextension-polyfill-ts
    // And browser object will be undefined
    // To support Typescript, Follow https://github.com/adambullmer/vue-cli-plugin-browser-extension#browser-polyfills to remove the webpack chain 'provide-webextension-polyfill'
    config.plugins.delete('provide-webextension-polyfill')
    config.module.rules.delete('provide-webextension-polyfill')
  }
}

adambullmer / vue-cli-plugin-browser-extension

Conflict with `webextension-polyfill-ts` #106