Hi, i have some troubles with embeded configuration of vite
I'd like to use :
- typescript
- Sass & postcss with some plugins
- imagein plugins
- eslint & styelint
This is my pakage.json
{
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"stylelint": "stylelint 'assets/**/*.{css,scss}' --fix",
"eslint": "eslint --fix 'assets/**/*.{js,ts}'",
"dev": "vite",
"build": "tsc && vite build",
"lint": "npm-run-all stylelint eslint",
},
"license": "UNLICENSED",
"devDependencies": {
"vite": "^4.0",
"vite-plugin-symfony": "^0.7.2",
"vite-plugin-favicon": "^1.0.8",
"@types/eslint": "^8.4.10",
"@typescript-eslint/eslint-plugin": "^5.48.2",
"@typescript-eslint/parser": "^5.48.2",
"@vheemstra/imagemin-avifenc": "^2.1.0",
"@vheemstra/vite-plugin-imagemin": "^1.0.8",
"autoprefixer": "^10.4.13",
"cssnano": "^5.1.14",
"cssnano-preset-default": "^5.2.13",
"eslint": "^8.32.0",
"eslint-config-standard": "^17.0.0",
"imagemin": "^8.0.1",
"imagemin-mozjpeg": "^10.0.0",
"imagemin-pngquant": "^9.0.2",
"imagemin-svgo": "^10.0.1",
"imagemin-webp": "^8.0.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.21",
"postcss-combine-duplicated-selectors": "^10.0.3",
"postcss-combine-media-query": "^1.0.1",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-sort-media-queries": "^4.3.0",
"sass": "^1.57.1",
"stylelint": "^14.16.1",
"stylelint-config-standard": "^29.0.0",
"stylelint-config-standard-scss": "^6.1.0",
"stylelint-scss": "^4.3.0",
"typescript": "^4.9.3"
}
}this is my "tsconfig.json"
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"resolveJsonModule": true,
"isolatedModules": false,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"skipLibCheck": true,
"types": ["vite/client"],
},
"include": ["assets"]
}this is my "pentatrion_vite.yaml"
# config/packages/pentatrion_vite.yaml
pentatrion_vite:
# path to the web root relative to the Symfony project root directory
public_dir: /public
# Base public path when served in development or production
base: /assets
script_attributes:
# you can define your attributes that you want to apply
# for all your script tags
link_attributes:
# you can define your attributes that you want to apply
# for all your link tags
An finally, this is my "vite.config.js" :
import { defineConfig } from "vite";
import symfonyPlugin from "vite-plugin-symfony";
//import { resolve } from 'path';
import viteImagemin from '@vheemstra/vite-plugin-imagemin';
import { ViteFaviconsPlugin } from "vite-plugin-favicon";
import autoprefixer from 'autoprefixer';
import combineSelectors from 'postcss-combine-duplicated-selectors';
// @ts-ignore
import combineMediaQueries from 'postcss-combine-media-query';
// @ts-ignore
import postcssSortMediaQueries from 'postcss-sort-media-queries';
// @ts-ignore
import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
import cssnano from 'cssnano';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminWebp from 'imagemin-webp';
import imageminPngQuant from 'imagemin-pngquant';
import imageminSvgo from 'imagemin-svgo';
/* if you're using React */
// import react from '@vitejs/plugin-react';
const isProd = process.env.NODE_ENV === 'production';
export default defineConfig({
server: {
open: false,
port: 19875,
},
base: './',
root: '',
css: {
postcss: {
plugins: [
postcssFlexbugsFixes({ bug6: false }),
postcssSortMediaQueries( {sort: 'mobile-first',
configuration: {
unitlessMqAlwaysFirst: true,
}}),
autoprefixer(),
combineMediaQueries(),
combineSelectors({ removeDuplicatedValues: true }),
cssnano( {
preset: 'cssnano-preset-default'
}),
],
},
},
build: {
outDir: 'public',
emptyOutDir: true,
rollupOptions: {
input: {
// main: resolve(__dirname, '', 'index.html'),
app: "./assets/scripts/main.ts",
"home": "./assets/styles/scss/home.scss",
},
},
minify: isProd,
},
plugins: [
ViteFaviconsPlugin({
logo: './assets/icons/favicon.svg',
inject: false,
}),
viteImagemin({
plugins: {
jpg: imageminMozjpeg({quality: 75}),
png: imageminPngQuant({quality: [0.65, 0.9], speed: 4}),
svg: imageminSvgo({
plugins: [
{name: 'removeTitle', active: true},
{name: 'removeComments', active: true},
{name: 'removeDesc', active: true},
{name: 'removeViewBox', active: false},
{name: 'removeDimensions', active: true},
{name: 'removeScriptElement', active: true},
{name: 'removeStyleElement', active: true},
{name: 'removeEmptyAttrs', active: false},
],
}),
},
makeWebp: {
plugins: {
jpg:imageminWebp(),
png:imageminWebp(),
},
},
}),
/* react(), // if you're using React */
symfonyPlugin({
servePublic: true,
publicDirectory: 'public',
buildDirectory: 'public',
}),
],
})The problem is when i run "pnpm dev" i have an error
failed to load config from H:\my-project\server\vite.config.js
error when starting dev server:
TypeError: symfonyPlugin is not a function
I tried to rename "vite.config.js" to "vite.config.ts" but same error
If i comment "symfonyPlugin" in vitejs.config plugin section. Vite server is launched without error. But, of course my assets are not served throught Symfony
An exception has been thrown during the rendering of a template ("assets entrypoints file "H:\my-project\server/public/assets/manifest.json" does not exist. Did you forget configure your base in pentatrion_vite.yml?").
This vitejs config work well, i'm using it when i'm create my html pages as static (without the symfonyPlugin of course)
Do you have a clue on how to solve this error ?
Best regards
Jerome
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent