Troubles introducing the vite-plugin-static-copy plugin

[bartbutenaers]

Hi guys,

I wanted to implement the TTS audio feature request, but it is a bit more complex as I thought. Thought it to be a fun thing to implement during the Christmas madness, but that doesn't seem to be the case unfortunately...

1. Seems the Web Speech API has some serious cross-browser issues, as I experienced already after a couple of minutes...
2. To avoid having to solve all that cross-browser stuff myself, I wanted to use the easy-speech npm library. So I added it to the devdependencies in the package.json file.
3. However I do not only need to use that library in my vue frontend code (via the build), but also in the ui-audio node config screen (to show a list of the supported voices).
4. To use that library in the html config screen, I need to download the file from the resources folder (see explanation).
5. To have the file in the resources folder, I added the following to the vite.config.ts file:

   ...
   import { ViteStaticCopy } from 'vite-plugin-static-copy'
   
   export default defineConfig({
       resolve: { ... },
       plugins: [vue(),
           ViteStaticCopy({
               targets: [{
                   src: 'node_modules/easy-speech/dist/*',
                   dest: 'resources'
               }]
           }),
           ...
   

6. However an npm run build throws an error "vite-plugin-static-copy" resolved to an ESM file. ESM file cannot be loaded by require.
7. Found an explanation of the problem here. But that would mean we use a commonJs version of Vite?

So here I am stuck. I don't understand how we can use import statements in the vite.config.js file for other modules in that case. And "if" we use the commonjs version of Vite, that seems to be deprecated in Vite version 6. Currently we use 5.x

Would really appreciate if somebody could illuminate me about what is the best way to solve this.

Thanks!
Bart