How to use vite-plugin-rewrite-all? (or enable periods in path another way)

[jsmartt]

When using quasar+vite in vueRouterMode: 'history' mode with paths matching thing/:id where the id has a period/dot, a 404 is returned. This is documented in a few different places:

• Dots in URL lead to 404 (regression?) vitejs/vite#2415
• In History Mode, a route containing a symbol . will be lost after refreshing vitejs/vite#4344
• https://stackoverflow.com/questions/71029445/handling-dot-in-vue-router-params-using-vue-3

Everyone seems to recommend using vite-plugin-rewrite-all, but the specified usage is:

// vite.config.js
import pluginRewriteAll from 'vite-plugin-rewrite-all';

export default {
  plugins: [pluginRewriteAll()]
}

I've read the docs, but I'm having trouble getting this plugin to work (or find any other solution to the period/dot issue) using quasar.config.js.

Can anyone assist?

[jsmartt]

I finally got this working by configuring my quasar.config.js as follows:

module.exports = configure(async function(/* ctx */) {
  const pluginRewriteAll = await import('vite-plugin-rewrite-all')
  return {
    build: {
      vitePlugins: [
        pluginRewriteAll.default()
      ]
    }
  }
})

I had to make the export function async, then was able to await the import. I'm not sure if this is the best way to do it, but it seems to work.

It looks as if Vite 5 fixes this natively, so I'm really looking forward to a @quasar/app-vite v2 GA release, which supports it.

Update:

Turns out vite-plugin-rewrite-all v1.0.2 has an issue loading as an ESM. If you pin to v1.0.1, the following works too:

const pluginRewriteAll = require('vite-plugin-rewrite-all')
module.exports = configure(function(/* ctx */) {
  return {
    build: {
      vitePlugins: [
        pluginRewriteAll.default()
      ]
    }
  }
})

This feels a little less hacky, and is probably standard usage for importing other plugins.