vite-plugin-symfony

8.2.4 verified Sat Apr 25 auth: no javascript

A Vite plugin for integrating Vite into Symfony applications. Current stable version is 8.2.4. It generates an entrypoints.json file with JS/CSS/preload dependencies and supports browser reload on Twig file changes. This plugin is designed to be used with the pentatrion/vite-bundle Symfony bundle. It supports Vite versions 3 through 8, making it compatible with modern Vite setups. Unlike generic Vite-Symfony integrations, this package offers a dedicated ecosystem with a Symfony bundle and active maintenance.

Common errors

error Error: Cannot find module 'vite-plugin-symfony' ↓

cause Package not installed or not in node_modules.

fix

Run npm install vite-plugin-symfony.

error TypeError: symfonyPlugin is not a function ↓

cause Using named import instead of default import.

fix

Use import symfonyPlugin from 'vite-plugin-symfony' (default import).

error Error: Could not resolve entry module 'app'. ↓

cause Missing or misconfigured input entry in build.rollupOptions.input.

fix

Ensure build.rollupOptions.input has a key (e.g., 'app') pointing to a valid entry file.

Warnings

breaking Version 8.x requires Vite 5 or higher. Vite 4 is no longer supported. ↓

fix Upgrade Vite to ^5.0.0 or ^6.0.0 (or higher).

breaking Default export changed from createSymfonyPlugin (v7) to default export (v8). ↓

fix Use `import symfonyPlugin from 'vite-plugin-symfony'` instead of `import { createSymfonyPlugin } from 'vite-plugin-symfony'`.

breaking The plugin no longer automatically detects entry points; you must specify them in build.rollupOptions.input. ↓

fix Add rollupOptions.input to your Vite config.

gotcha Ensure that the Symfony bundle pentatrion/vite-bundle is installed in your Symfony project, otherwise the generated entrypoints.json will not be picked up. ↓

fix Run `composer require pentatrion/vite-bundle` and follow bundle configuration.

Install

npm install vite-plugin-symfony

yarn add vite-plugin-symfony

pnpm add vite-plugin-symfony

Imports

default
wrong
```
const symfonyPlugin = require('vite-plugin-symfony');
```
correct
```
import symfonyPlugin from 'vite-plugin-symfony';
```
This is a Vite plugin, which are typically used as ES modules. CommonJS require may work in some setups but ES import is recommended.
SymfonyPluginOptions
wrong
```
import { SymfonyPluginOptions } from 'vite-plugin-symfony';
```
correct
```
import type { SymfonyPluginOptions } from 'vite-plugin-symfony';
```
SymfonyPluginOptions is a TypeScript interface, so it should be imported as a type to avoid runtime issues.
default export (named)
wrong
```
import { symfonyPlugin } from 'vite-plugin-symfony';
```
correct
```
import symfonyPlugin from 'vite-plugin-symfony';
```
The plugin is exported as default, not a named export. Named import will fail.

Quickstart

Basic Vite configuration using vite-plugin-symfony with an entry point in assets/app.js.

// vite.config.js
import { defineConfig } from 'vite';
import symfonyPlugin from 'vite-plugin-symfony';

export default defineConfig({
  plugins: [
    symfonyPlugin(),
  ],
  build: {
    rollupOptions: {
      input: {
        app: './assets/app.js',
      },
    },
  },
});