twig does not recognize vite directives

[dj-Andres]

vite-plugin-symfony version

6.4

vite-bundle version

6.5

your OS, node version, Symfony version, PHP version

symfony 7.1, Windows 11, PHP 8.3

Description

I have a problem, the twig view does not recognize the vite directives

{% block stylesheets %}
{{ vite_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
{{ vite_entry_script_tags('app') }}
{% endblock %}

When I inspect in the browser, the app.js and app.css files are not found, either when I do the build or in development.

I attach my vite configuration file

import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy";
import path from "path";
import symfonyPlugin from "vite-plugin-symfony";

export default defineConfig({
  plugins: [
    symfonyPlugin(),
    viteStaticCopy({
      targets: [
        {
          src: 'assets/images',
          dest: 'bundles/'
        },
        {
          src: 'assets/fonts',
          dest: 'bundles/'
        },
        {
          src: 'assets/webfonts',
          dest: 'bundles/'
        },
        {
            src: 'assets/index.php',
            dest: ''
        }
      ]
  ]},
  build: {
    outDir: "public",
    assetsDir: "bundles",
    rollupOptions: {
      input: {
        app: "./assets/app.js",
      }
    },
  },
});

How to reproduce

As I indicated above I use the tags in my twig view, but in the browser they are not placing the vite output files

{% block stylesheets %}
{{ vite_entry_link_tags('app') }}
{% endblock %}

{% block javascripts %}
{{ vite_entry_script_tags('app') }}
{% endblock %}

Possible Solution

No response

[lhapaipai]

Hi @dj-Andres, I suspect that there is a mistake in vite config. especially with the outDir.

By default, vite-plugin-symfony preconfigure Vite base and build.outDir config properties. You can override these properties but then you have to be consistent with the values ​​you submit. finally I advise you to build your files in a sub-directory of public.

one solution:

import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy";
import path from "path";
import symfonyPlugin from "vite-plugin-symfony";

export default defineConfig({
  plugins: [
    symfonyPlugin(),
    viteStaticCopy({
      // ...
  ]},
  build: {
-    outDir: "public",
    assetsDir: "bundles",
    rollupOptions: {
      input: {
        app: "./assets/app.js",
      }
    },
  },
});

one other solution:

// vite.config.js
import { defineConfig } from "vite";
import { viteStaticCopy } from "vite-plugin-static-copy";
import path from "path";
import symfonyPlugin from "vite-plugin-symfony";

export default defineConfig({
  plugins: [
    symfonyPlugin(),
    viteStaticCopy({
      // ...
  ]},
+ base: "/other/",
  build: {
+    outDir: "public/other",
    assetsDir: "bundles",
    rollupOptions: {
      input: {
        app: "./assets/app.js",
      }
    },
  },
});

# config/packages/pentatrion_vite.yaml
pentatrion_vite:
+    build_directory: other

For more details, check the doc Change the name of the build directory.

[dj-Andres]

Thanks, I actually had the output folder configured incorrectly.