FlowFuse / FlowFuse/node-red-dashboard

Troubles introducing the vite-plugin-static-copy plugin

Open
#1,561 0 comments 0 reactions 0 assignees View on GitHub
needs-triage
Dominant language
HTML
Stars
355
Forks
82
Avg merge
4d 23h
Merged PRs (30d)
24

Description

Hi guys,

I wanted to implement the [TTS audio feature](https://github.com/FlowFuse/node-red-dashboard/issues/1560) 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](https://github.com/leaonline/easy-speech/tree/master) 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](https://nodered.org/docs/creating-nodes/resources)).
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](https://github.com/remult/remult/issues/406#issuecomment-2045008314). 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](https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated) 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

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.