How to add Vite plugin vite-plugin-node-polyfills to Quasar?

[DarkLite1]

When using the googleapis we get the following warning in the console:

Module "stream" has been externalized for browser compatibility. Cannot access "stream.prototype" in client code.

To mitigate this issue we need to use the Vite plugin 'vite-plugin-node-polyfills'. Trying to add this in quasar fails

IndexPage.vue

<script setup lang="ts">
   import { google } from 'googleapis'

   // service account credentials
   const auth = new google.auth.GoogleAuth({
     keyFile: 'auth.json',
     scopes: ['https://www.googleapis.com/auth/calendar'],
   })

quasar.config.ts

import { nodePolyfills } from 'vite-plugin-node-polyfills'

build: {
   vitePlugins: [
        [
          nodePolyfills,
          {
            globals: {
              Buffer: true,
              global: true,
              process: true,
            },
          },
        ], 

The code above throws errors:

ERROR(vue-tsc) Argument of type '(ctx: QuasarContext) => { boot: string[]; css: string[]; extras: ("material-icons" | "roboto-font")[]; build: { target: { browser: string[]; node: string; }; typescript: { strict: true; vueShim: true; }; vueRouterMode: "hash"; vitePlugins: ([...] | ... 1 more ... | [...])[]; }; ... 8 more ...; bex: { ...; }; }' is not assignable to parameter of type 'ConfigureCallback'.

client-entry.js:112 [Vue Router warn]: Unexpected error when starting the router: TypeError: Cannot read properties of undefined (reading 'slice')

What is the correct way to do this?

Sandbox for testing

[markhagemann]

I assume you probably have an answer by now but try:

vitePlugins: [
       ...nodePolyfills({ 
            globals: {
                Buffer: true,
                global: true,
                process: true,
            },
       }),
 ]