Error on run "pnpm dev"

Question

Error on run "pnpm dev"

jdelauney opened this issue a year ago · comments

J.Delauney commented a year ago

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

Hugues Tavernier · Answer 1 · Mon Feb 13 2023 19:02:14 GMT+0800 (China Standard Time)

hi @jdelauney, some options from your config seems to be strange out of your TypeError: symfonyPlugin is not a function.

to be sure of what I'm saying, can you confirm that your document root is <your-project-dir>/public and the directory where you want to build your js/css files is <your-project-dir>/public/build.

can you output your pnpm-lock.yaml ? (only the vite-plugin-symfony vite sections to confirm the real version)

J.Delauney · Answer 2 · Mon Feb 13 2023 22:38:13 GMT+0800 (China Standard Time)

Hi Huges, we are near. I'm leaving at Geneva 😉

My structure is :

h:\
 |- workspace
       |- myProject
             |- Resources/ ** Some docs relative to the project
             |- Maquette/   ** Where i make the HTML integration contains package.json with vite and all above
                  |- node_modules/   
                  |- package.json
             |- Server/ ** The Symfony project
                  |- assets/ ** my assets for dev
                  |       |- images/
                  |       |- scripts/
                  |       |- styles/
                  |            |- scss/
                  |- public/
                       - assets ** Where i want to put the build
                  |- node_modules/
                  |- All others folders relative to symfony (src, templates, vendor...)
                  |- composer.json
                  |- package.json
                  |- vitejs.config.js
                  |- tsconfig.json

this is the"pnpm-lock.yaml :

lockfileVersion: 5.4
specifiers:
   vite-plugin-symfony: ^0.7.2
   
devDependencies:
    typescript: 4.9.5
   vite: 4.1.1_sass@1.58.0
   vite-plugin-symfony: 0.7.5_vite@4.1.1

Strange, version are not the same

I'll try a fresh install, depends of what you say.

Thanks in advance
Jérôme

Hugues Tavernier · Answer 3 · Mon Feb 13 2023 22:56:02 GMT+0800 (China Standard Time)

hi @jdelauney,
oui c'est la première chose que j'ai vu quand tu as posté tout à l'heure !!

export default defineConfig({
    server: {
        open: false,
        port: 19875,
    },
-    base: './',
    root: '',
    css: {
        postcss: {
            /* ... */
        },
    },
    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: [
        //...
        /* react(), // if you're using React */
        symfonyPlugin({
            servePublic: true,
            publicDirectory: 'public',
-           buildDirectory: 'public',
+           buildDirectory: 'assets' 
        }),
    ],
})

like I said in vite-plugin-symfony#installation, base and build.outDir are generated from vite-plugin-symfony options : publicDirectory and buildDirectory. so you have to define either one or the other.
source code : https://github.com/lhapaipai/vite-plugin-symfony/blob/06050d5f482d256ec10865ae867bed9229b578d8/src/index.ts#L74
explanation : 0bbbc46#commitcomment-95346976

lockfileVersion: 5.4
specifiers:
   # is the version specified in your package.json
   vite-plugin-symfony: ^0.7.2
   
devDependencies:
    typescript: 4.9.5
   vite: 4.1.1_sass@1.58.0
   # is the real version in your node_modules directory
   vite-plugin-symfony: 0.7.5_vite@4.1.1

Hugues Tavernier · Answer 4 · Mon Feb 13 2023 22:58:43 GMT+0800 (China Standard Time)

your pentatrion_vite.yaml config is ok.
but unfortunatly we have not resolved your principal issue:

failed to load config from H:\my-project\server\vite.config.js
error when starting dev server:
TypeError: symfonyPlugin is not a function

Hugues Tavernier · Answer 5 · Mon Feb 13 2023 23:03:36 GMT+0800 (China Standard Time)

can you debug your vite.config.js and tell me what your symfonyPlugin variable contains? or at least tell me what returns console.log(symfonyPlugin) if it's not a function

J.Delauney · Answer 6 · Mon Feb 13 2023 23:31:04 GMT+0800 (China Standard Time)

I deleted the node_modules, pnpm-lock.yaml, and up symfony-plugin version to 0.75 in package.js and rerun pnpm install

Same error

This is the console.log(symfonyPlugin) return an object

{
  refreshPaths: [ 'templates/**/*.twig' ],
  default: [Function: symfony]
}

This is a screenshot of the debugger

Hugues Tavernier · Answer 7 · Tue Feb 14 2023 00:04:04 GMT+0800 (China Standard Time)

oh I think it's because I've defined default export and named export in vite-plugin-symfony. I will have to change this in the future.
for the moment you can set vite.config.js to prevent ts from complaining and set:

import symfonyPlugin from 'vite-plugin-symfony';

export default defineConfig({
  plugins: [
    symfonyPlugin.default({
      //...
    })
  ],
});

J.Delauney · Answer 8 · Tue Feb 14 2023 01:00:04 GMT+0800 (China Standard Time)

It was i supposed to when I have read the debug log
It's seems to work

  VITE v4.1.1  ready in 92646 ms

  ➜  Local:   http://127.0.0.1:19875/assets/
  ➜  Network: use --host to expose          
  ➜  press h to show help

It take long time but it's normal, it's the first time and vitejs need to bundle and optimize all my files

Cheers and thanks for your help. I close this issue 👍