Vanilo 4.0 - npm issue

[csavelief]

Hi,

I upgraded to Vanilo 4.0 last week and I am stuck at the npm run prod step where the following error is triggered :

ERROR in ./vendor/konekt/appshell/src/resources/assets/sass/appshell.sass
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Missing argument $border-radius.
    ┌──> vendor/konekt/appshell/src/resources/assets/sass/appshell/_buttons.sass
2   │   +button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-xs, $border-radius-xs)
    │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ invocation
    ╵
    ┌──> node_modules/bootstrap/scss/mixins/_buttons.scss
104 │ @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
    │        ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ declaration
    ╵
  vendor/konekt/appshell/src/resources/assets/sass/appshell/_buttons.sass 2:3  button-size()
  vendor/konekt/appshell/src/resources/assets/sass/appshell/_buttons.sass 2:3  @import
  vendor/konekt/appshell/src/resources/assets/sass/appshell.sass 14:9          root stylesheet
    at processResult (/opt/a_src/towerify/node_modules/webpack/lib/NormalModule.js:764:19)
    at /opt/a_src/towerify/node_modules/webpack/lib/NormalModule.js:866:5
    at /opt/a_src/towerify/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /opt/a_src/towerify/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback (/opt/a_src/towerify/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/opt/a_src/towerify/node_modules/sass-loader/dist/index.js:69:5)

My composer.json file looks like this :

{
    "name": "vanilo/demo",
    "description": "Vanilo Demo Application",
    "keywords": ["vanilo", "laravel", "ecommerce"],
    "license": "MIT",
    "type": "project",
    "minimum-stability": "dev",
    "prefer-stable": true,
    "require": {
        "php": "^8.3",
        "ext-gd": "*",
        "ext-pcntl": "*",
        "guzzlehttp/guzzle": "^7.5",
        "laravel/framework": "^11.0",
        "laravel/telescope": "^5.0",
        "laravel/tinker": "^2.0",
        "laravel/ui": "^4.0",
        "league/flysystem-aws-s3-v3": "^3.0",
        "league/flysystem-path-prefixing": "^3.0",
        "phpseclib/phpseclib": "^3.0",
        "symfony/process": "^7.0",
        "vanilo/admin": "^4.0",
        "vanilo/euplatesc": "^4.0",
        "vanilo/framework": "^4.0",
        "vanilo/mollie": "^2.0",
        "vanilo/netopia": "^3.0",
        "vanilo/payment": "^4.0"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.13",
        "spatie/laravel-ignition": "^2.5",
        "fakerphp/faker": "^1.23",
        "laravel/dusk": "^8.2",
        "mockery/mockery": "^1.6",
        "phpunit/phpunit": "^11.2"
    },
    "autoload": {
        "classmap": [
            "database/seeds",
            "database/factories"
        ],
        "psr-4": {
            "App\\": "app/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "extra": {
        "laravel": {
            "dont-discover": [
            ]
        }
    },
    "scripts": {
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate"
        ],
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover"
        ]
    },
    "config": {
        "preferred-install": "dist",
        "sort-packages": true,
        "optimize-autoloader": true
    }
}

Any idea?

Best,

Cyrille

[fulopattila122]

The v4 Admin's frontend has been upgraded to Bootstrap 5.3. If you have an existing Laravel mix-based installation, run the following commands to upgrade the packages:

npm install bootstrap@5.3
npm install @popperjs/core --save

and then you can run npm run prod again

[csavelief]

Way better thanks!

From my point of view, the only remaining gotchas are in the Admin Panel where the data-toggle should be replaced by a data-bs-toggle I believe (according to this).

[fulopattila122]

Those have already been replaced. Do you maybe override the admin views in your application? https://laravel.com/docs/11.x/packages#overriding-package-views

[csavelief]

No. I removed the node_modules and vendor directories and rebuilt everything. It seems that now everything is working fine!

Thanks for your help.