How to use rollup-plugin-polyfill-node with @quasar/app-vite v2.5.2?

[rtcpw]

@quasar/app-vite v2.5 upgraded to Vite 8. Previously, I was using vite-plugin-node-polyfills with pre-v2.5 and it was working fine:

quasar.config:

      vitePlugins: [
        [
          nodePolyfills,
          {
            include: ['path'],
          },
          { client: true, server: false },
        ],
      ],

However, after upgrading to v2.5, this has stopped working and it is throwing TypeScript errors. Based on this discussion, we are now supposed to use rollup-plugin-polyfill-node for Vite 8, which I have done.

npm install --save-dev rollup-plugin-polyfill-node

import nodePolyfills from '@rolldown/plugin-node-polyfills';

// ....

      vitePlugins: [
        [
          nodePolyfills,
          { },
          { client: true, server: false },
        ],
      ],

However this still throws TypeScript errors that I am not certain how to fix them. Anyone has any ideas how to use node polyfills with the new @quasar/app-vite v2.5?

[yusufkandemir]

Hi.

Did you make a mistake while writing the discussion, or actually followed these steps? You said you installed rollup-plugin-polyfill-node but tried to use @rolldown/plugin-node-polyfills. You should run npm install --save-dev @rolldown/plugin-node-polyfills instead.

Also, as you can see in its name, it's a Rolldown plugin, not a Vite plugin. So, the way you are using it won't work. You can try:

extendViteConf: () => ({
  build: {
    rolldownOptions: {
      plugins: [nodePolyfills()]
    }
  }
})

But, there is a chance that it won't work. In that case, you might want to wait a bit until the vite plugin properly supports Vite 8
davidmyersdev/vite-plugin-node-polyfills#150
davidmyersdev/vite-plugin-node-polyfills#142

Also, just so you know, "this throws TS errors" is not helpful because the errors themselves could mean a lot of things. So, if none works, you can try sharing the actual errors you are getting and we might be able to provide further help.

[rtcpw]

My apologies, I just got overwhelmed I guess by all these plugins which I rarely have to deal with otherwise. I have used the @rolldown/plugin-node-polyfills and your code snippet, and while everything compiles without any issues, nothing is actually polyfilled and there is a warning during compilation:

[plugin rolldown:vite-resolve] Module "path" has been externalized for browser compatibility, imported by ".../node_modules/content-disposition/index.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

Not sure why this plugin is not working, sounds like with this setup everything is configured properly and wired up in the right places.

---

Previously I was also trying to add the @rolldown/plugin-node-polyfills in vitePlugins, I didn't realize there was another place in quasar.config for rolldown plugins (I didn't see anything about rolldown in the official documentation), so I just assumed vitePlugins is where I just drop-in replace the old polyfill plugin with the new one - of course now I know how dumb this was.

---

The fix for the vite plugin is coming, so I guess we can just wait this out and everything should hopefully correct itself.