Error while running vite dev command - TypeError: Cannot read properties of undefined (reading 'join')

[RiQuY]

Description

When trying to use vite-plugin-nodecg 2.1.0 in a project with Vite, the command "vite dev" fails with the following error:

> nodecg-vite-svelte-js-template@1.0.0 dev:graphics /media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template
> vite --config vite.graphics.config.mjs

vite-plugin-nodecg: Found the following inputs:  [ 'src/graphics/graphics1/main.js' ]
TypeError: Cannot read properties of undefined (reading 'join')
    at file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.12_lightningcss@1.25.1/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:49998:13
    at async file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/vite@5.3.4_@types+node@20.14.12_lightningcss@1.25.1/node_modules/vite/dist/node/chunks/dep-D8YhmIY-.js:50654:26
file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/minimatch@9.0.5/node_modules/minimatch/dist/esm/index.js:930
            return p.split(/\/+/);
                     ^

TypeError: p.split is not a function
    at Minimatch.slashSplit (file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/minimatch@9.0.5/node_modules/minimatch/dist/esm/index.js:930:22)
    at Minimatch.match (file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/minimatch@9.0.5/node_modules/minimatch/dist/esm/index.js:952:25)
    at minimatch (file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/minimatch@9.0.5/node_modules/minimatch/dist/esm/index.js:12:44)
    at file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/vite-plugin-nodecg@2.1.0_vite@5.3.4_@types+node@20.14.12_lightningcss@1.25.1_/node_modules/vite-plugin-nodecg/dist/index.js:93:24
    at Array.find (<anonymous>)
    at file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/vite-plugin-nodecg@2.1.0_vite@5.3.4_@types+node@20.14.12_lightningcss@1.25.1_/node_modules/vite-plugin-nodecg/dist/index.js:92:56
    at Array.forEach (<anonymous>)
    at generateHTMLFiles (file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/vite-plugin-nodecg@2.1.0_vite@5.3.4_@types+node@20.14.12_lightningcss@1.25.1_/node_modules/vite-plugin-nodecg/dist/index.js:90:24)
    at Server.<anonymous> (file:///media/Almacen/Archivos/Proyectos/nodecg/bundles/nodecg-vite-svelte-js-template/node_modules/.pnpm/vite-plugin-nodecg@2.1.0_vite@5.3.4_@types+node@20.14.12_lightningcss@1.25.1_/node_modules/vite-plugin-nodecg/dist/index.js:173:17)
    at Server.emit (node:events:530:35)

Node.js v20.11.1
 ELIFECYCLE  Command failed with exit code 1.

The plugin has these settings in my vite config file: https://codeberg.org/RiQuY/nodecg-vite-svelte-js-template/src/branch/main/vite.graphics.config.mjs

Steps to reproduce

git clone https://codeberg.org/RiQuY/nodecg-vite-svelte-js-template.git
cd nodecg-vite-svelte-js-template
pnpm install

# Run one of these commands, the error happens in both
pnpm dev:dashboard
pnpm dev:graphics

[Dan-Shields]

Can't try to reproduce right now, but I'm wondering if manually setting your base and build options in vite.config.mjs is causing issues. Can you try it without the following section?:

  base: '/bundles/nodecg-vite-svelte-js-template/',
  build: {
    cssCodeSplit: false,
    outDir: 'graphics',
    sourcemap: true,
    rollupOptions: {
      input: {
        'graphics1/main': 'src/graphics/graphics1/main.js'
      },
      output: {
        entryFileNames: '[name].js',
        assetFileNames: `[name].[ext]`
      },
    }
    // emptyOutDir: true,
  }

[RiQuY]

Can't try to reproduce right now, but I'm wondering if manually setting your base and build options in vite.config.mjs is causing issues. Can you try it without the following section?:

Sorry for the delay, I wasn't home the previous weeks.

Thank you for the tip, leaving a single vite.config.mjs with the following configuration solved the issue:

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import NodeCGPlugin from "vite-plugin-nodecg";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
    NodeCGPlugin({
      inputs: {
        "dashboard/dashboard1/index.js": "./src/dashboard/dashboard1/index.html",
        "graphics/graphics1/index.js": "./src/graphics/graphics1/index.html",
      },
      srcDir: './src'
    }),
  ],
  base: "/bundles/nodecg-vite-svelte-js-template/",
});

I think the next question is unrelated but I would appreciate if you could help me with it.

In the package.json I have these scripts to watch the changes for dashboard/graphics and extension folders, but after running pnpm dev I'm not able to stop the dev server with Q o a single Ctr-C, I have to press Ctrl-C like 10 times until everything stops/crashes.

"dev": "npm-run-all --parallel dev:*",
"dev:browser": "vite --config vite.config.mjs",
"dev:extension": "parcel watch src/extension/index.js --dist-dir extension",

Do you know a way to avoid this or how to build the extension folder with Vite to use a single command? I'm not using Vite to build the extension folder because it generates an empty .js file.

Thanks.

[Dan-Shields]

Glad to hear its fixed!

As to your new issue, I'm not sure to be honest. Maybe this issue is related?

A bigger question is why are you using parcel for your extension code? You should be able to use tsc directly, there's no need to do bundling for server-side code? Take a look at some of the other templates like zoton's vue-ts-template as a guide.

[RiQuY]

A bigger question is why are you using parcel for your extension code? You should be able to use tsc directly.

Im using Parcel to convert my extension.js file to a CommonJS format, because for some reason NodeCG throws an error trying to read the extension.js file if is using export default function(nodecg)instead of module.exports. And I can't use tsc because there is nothing to compile, it's a Javacript file.

https://codeberg.org/RiQuY/nodecg-vite-svelte-js-template/src/branch/main/src/extension/index.js

[Dan-Shields]

I see. When I've written pure js extensions I've always just used CommonJS stuff as then you can skip the build step entirely. Otherwise with typescript you can use esnext modules and have it transpile to commonjs

[RiQuY]

Thank you for sharing a related issue of npm-run-all and the general guidelines, your plugin made using vite config easier.

I'll try to take a look at vite to see if I can generate the extension.js in the same vite.config.mjs to avoid the frozen dev command.

[Dan-Shields]

Do note that vite is really not designed for bundling server-side code. Perhaps you'd be better off using esbuild directly. Best of luck.