Output JSON file to a separate assets folder

[tomektomczuk]

Here is my vite.config.js file. I'm trying to output certain assets to a specific assets folder. Fonts to assets/fonts, Image to assets/images etc. Unfortunately for some reasons JSON files are not exported like everything else.

I also setup some https://stackblitz.com/edit/node-vs9rej?file=vite.config.js as an example.

import { defineConfig } from "vite";
import liveReload from 'vite-plugin-live-reload';
import vitePluginRequire from "vite-plugin-require";
import json from '@rollup/plugin-json';
const { resolve } = require('path');
const fs = require('fs');

export default defineConfig(({ command, mode }) =>{
return {
plugins: [
liveReload(__dirname + '/**/*.php'),
vitePluginRequire({
// @fileRegex RegExp
// optional：default file processing rules are as follows
// fileRegex:/(.jsx?|.tsx?|.vue)$/
}),
json({

  })
],

root: '',
base: process.env.NODE_ENV === 'development'
    ? '/'
    : '/assets/',

build: {
  // output dir for production build
  outDir: resolve(__dirname, './assets'),
  emptyOutDir: true,
  // emit manifest so PHP can find the hashed files
  manifest: true,

  // esbuild target
  target: 'esnext',

  // our entry
  rollupOptions: {
    input: {
      app: resolve(__dirname + '/resources/scripts/app.js'),
      editor: resolve(__dirname + '/resources/scripts/editor.js'),
      'hello-editor': resolve(__dirname + '/resources/scripts/hello-elementor/hello-editor.js'),
      'hello-frontend': resolve(__dirname + '/resources/scripts/hello-elementor/hello-frontend.js')
    },

    output: {
      assetFileNames: (assetInfo) => {
        let extType = assetInfo.name.split('.').at(1);
        if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
          extType = 'images';
        } else if (/css|sass|scss/i.test(extType)) {
          extType = 'styles';
        } else if (/woff|woff2|eot|ttf|otf/i.test(extType)) {
          extType = 'fonts';
        } else if (/json/.test(extType)) {
          extType = 'animations';
        }
        return `${extType}/[name][extname]`;
      },
      entryFileNames: `scripts/[name].js`,
      chunkFileNames: `scripts/[name].js`,
      sourcemap: true
    }
  },

  // minifying switch
  //minify: true,
  write: true
},

server: {

  // required to load scripts from custom host
  cors: true,

  // we need a strict port to match on PHP side
  // change freely, but update in your functions.php to match the same port
  strictPort: true,
  port: 3000,

  // serve over http
  https: false,

  // serve over httpS
  // to generate localhost certificate follow the link:
  // https://github.com/FiloSottile/mkcert - Windows, MacOS and Linux supported - Browsers Chrome, Chromium and Firefox (FF MacOS and Linux only)
  // installation example on Windows 10:
  // > choco install mkcert (this will install mkcert)
  // > mkcert -install (global one time install)
  // > mkcert localhost (in project folder files localhost-key.pem & localhost.pem will be created)
  // uncomment below to enable https
  //https: {
  //  key: fs.readFileSync('localhost-key.pem'),
  //  cert: fs.readFileSync('localhost.pem'),
  //},

  hmr: {
    host: 'localhost',
    //port: 443
  },

},

esbuild: {
  minify: process.env.NODE_ENV === 'development'
  ? false
  : true
},

// required for in-browser template compilation
// https://v3.vuejs.org/guide/installation.html#with-a-bundler
resolve: {
  alias: {
    //vue: 'vue/dist/vue.esm-bundler.js'
    jquery: resolve(__dirname + '/node_modules/jquery/dist/jquery.js')
  }
}

}
})

when I run Vite build script I see
[plugin:json] Could not parse JSON file
[plugin:json] Could not parse JSON file (x2)

What is the problem?