Vite build in sub directory can't find the imported library

Question

I'm building a Browser Extension. I created a Popup with Vue in a subfolder src/popup, and it contains the index.html file and src folder with the Vue app.

The build is done by Vite in a gulpfile.js script:

const popupRoot = path.join(srcDirPath, 'popup');
await vite.build({
  root: popupRoot,
  base: '',
  build: {
    emptyOutDir: true,
    outDir: popupDistDirPath,
  },
  plugins: [vue(), commonjs(), nodeResolve()],
});

To support cross browsers, I added the webextension-polyfill library:

import browser, { storage } from 'webextension-polyfill';
import LRUCache from 'lru-cache';
console.log(LRUCache);

(The LRUCache here to check if it a library problem)

When I build the project, I get the next warning (twice) (which is error on runtime):

"webextension-polyfill" is imported by "src/storage.js", but could not be resolved – treating it as an external dependency.
"lru-cache" is imported by "src/storage.js", but could not be resolved – treating it as an external dependency.
"storage" is imported from external module "webextension-polyfill" but never used in "src/storage.js".
No name was provided for external module "webextension-polyfill" in "output.globals" – guessing "browser".
No name was provided for external module "lru-cache" in "output.globals" – guessing "LRUCache".

---

When I'm using Rollup to build the background.js, it works with LRUCache and webextension-polyfill:

bundle = await rollup({
  input: path.join(srcDirPath, 'background.js'),
  plugins: [commonjs(), nodeResolve()],
});
await bundle.write({
  file: path.join(outputDirPath, 'background.js'),
  format: 'iife',
});